以下是一些标记的示例:
<div class="document">
<div class="main">
<div class="title" />
<div class="description />
</div>
<div class="sections">
<div class="section">
<div class="title" />
<div class="description" />
</div>
<div class="section">
<div class="title" />
<div class="description" />
</div>
</div>
</div>
在我的样式表中,我的规则可能如下所示:
.document .main .title { ... }
.document .sections .section .description { ... }
我喜欢这个。这种方法对我来说一直很好,我认为越来越具体的选择器使得它非常清楚是什么(几乎就像读一个句子)。
最近我被告知这种方法很糟糕,我应该做以下的事情:
<div class="document">
<div class="main">
<div class="mainTitle" />
<div class="mainDescription />
</div>
<div class="sections">
<div class="section">
<div class="sectionTitle" />
<div class="sectionDescription" />
</div>
<div class="section">
<div class="sectionTitle" />
<div class="sectionDescription" />
</div>
</div>
</div>
原因是它避免了类标题所引用的含糊不清。
我很好奇这里的人们在想什么?我的方法是不好的(即令人困惑,有问题)?是否有一种为复杂标记格式化css的首选方法?
答案 0 :(得分:4)
我已经开始使用LESS样式表了,不能推荐它们。嵌套选择器通过像HTML一样构造代码,使代码具有令人难以置信的可读性:
.document {
.main {
.title {
...
}
.foo {
...
}
}
.sections {
.section .description {
...
}
// Same as `.sections.hidden`
&.hidden {
...
}
}
}
至于你的HTML,没有必要多余。 title
类引用一个充当标题的元素,并且可以通过查看父元素来推断标题的类型。如果您没有发现它们具有吸引力,那么使用长名称确实没有任何好处。
答案 1 :(得分:3)
嗯,我对CSS不是很有经验,但你想平衡可读性和压缩。你曾经这样做的方式是压缩程度很高,而你所说的建议你做这件事的方式似乎很重要。但我已经尝试过后者,而男孩,那是很多工作。它几乎没有增加可读性,因为CSS中的大多数东西不仅出现在任何给定网站结构中的一个地方 - 它们出现在多个地方,使得建议的结构无法实际变得可读。
如果你问我,没什么好评。
// *如果您正在尝试轻松找到CSS的各个部分,即使您快速浏览也会引起很多关注的标题是要走的路* //
确保胜过标签CSS的所有工作。就像我之前所说的那样,CSS声明的可重用性使得无法轻易跟上标签。