Question

最近我使用的CSS结构让HTML变得更清晰但我不知道这是否有问题。

而不是使用：

.top { //properties }

.top-wrapper { //properties }

.top-logo { //properties }

对于HTML：

<div class="top">
    <div class="top-wrapper">
        <a href="" class="top-logo">Logo</a>
    </div>
</div>

我实际上是这样编码的：

.top { //properties }

.top .wrapper { //properties }

.top .wrapper .logo { //properties }

对于HTML：

<div class="top">
    <div class="wrapper">
        <a href="" class="logo">Logo</a>
    </div>
</div>

这样做是不对的？

Answer 1

没错，但是你拥有的选择器越多，你的风格的特征就越高。有关特定性的更多信息，请参阅http://www.w3.org/TR/CSS21/cascade.html#specificity。

想象一下你的例子

.top .wrapper .logo { font-size: 10px; }

接着是：

.logo { font-size: 20px; }

<a class="logo">的字体大小为10px，即使您为第二次声明指定它是20px。

Answer 2

<强>不。

你的第二个代码正在做的是，“定位具有类top的元素内的所有元素，它们具有类wrapper并应用这样的属性”

另一方面，您的第一个代码仅针对具有类top-wrapper（或其他）的元素，无论其父类如何。

Answer 3

这样做并不一定“错误”，它有效，如果你发现它易于使用，我会说它去吧！

然而 - 这种方法有一些缺点，例如你的CSS文件最终会变大，这意味着任何观看网站的人都会有更长的下载时间（授予此效果可以忽略不计）

还有一个问题是，如果你想在另一个元素上重用top-wrapper的样式，你必须将该元素放在一个带有top类的div中，这样就会混乱你的HTML。

（有关上述观点的更多信息，请参阅OOCSS）

在一天结束时，任何方法都有好处和缺点，如果您对这种方法感到非常满意，并且它适合您 - 那么坚持下去！

修改还应该注意的是，第二种方法是浏览器渲染所需的时间比您第一次接近（浏览器必须检查多个条件而不是一次）以获取更多信息，请参阅this question

Answer 4

取决于您将如何使用指定的类

.logo { //general properties  }


.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }

.bottom .wrapper .logo { //specific property to bottom  wrapper that overrides .logo }

HTML

<div class="top">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

 <div class="bottom">
    <div class="wrapper>
        <a href="" class="logo">Logo</a>
    </div>
</div>

一般来说，它更好

Answer 5

这没有错，但是如果你有10级嵌套，它可能会变得冗长和慢一点。如果.logo和.wrapper .logo都设置了风格，结果也可能更难调试。

另一方面，.button或.content中的.menu看起来不同可能会很不错。通常，使用在特定用例中有意义的内容。

Answer 6

这里没有对错：一切都取决于你正在建立的网站，如果你是一个团队，对你来说有什么意义。

就我个人而言，我认为html现在比以前更清洁了（在这个小例子中）但是你的CSS特性增加了，可能会产生不利影响。

我现在问自己'我为什么要用这种方式设计这个元素？'。有时这是因为继承，有时是因为它是一个碰巧在某个区域的特定情况。您使用的示例似乎是继承的良好候选者，但查看网站的其余部分可能会得出不同的结论。

据我所知，添加更长的类名并不会大大降低性能。我怀疑唯一的影响是微不足道的，不太可能引人注意。真的取决于实施

此外，如果您正在“阅读”html，那么阅读类似top-logo的类名可能会更有意义，另外，您需要寻找合适的祖先（请注意，可能不止一个可能适用）。

我正忙着采用OOCSS / BEM方法（谷歌这些更多，那么多资源......）我自己因为我相信它将来会使维护变得更容易，而且我觉得它更有意义团队环境。这些方法可能导致“类炎”或其他“混乱”的HTML。我不介意这一点，并认为网站越大，这就越有意义。如果你正在制作一个4页的网站，也许不要打扰。

但这对我有用，可能不适合你。所以我回到原来的陈述，这里没有对错：）

以这种方式使用CSS是错误的吗？

6 个答案: