5

最近我正在使用一种 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>

这样做有错吗？

4

6 回答 6

4

这没有错，但是您拥有的选择器越多，您的样式的最终特异性就越高。有关特异性的更多信息，请参见http://www.w3.org/TR/CSS21/cascade.html#specificity。

想象一下你的例子

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

其次是：

.logo { font-size: 20px; }

<a class="logo">即使您在第二个声明中将其指定为 20 像素，它的字体大小也会为10像素。

于 2012-11-30T13:16:11.200 回答
1

没有。

您的第二个代码正在执行的操作是“针对具有 class 的元素内的所有元素，这些元素具有topclasswrapper并应用此类和此类属性”

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

于 2012-11-30T13:15:39.470 回答
1

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

但是 - 这种方法有一些缺点，例如您的 CSS 文件最终会变大，这意味着任何查看网站的人的下载时间都会更长（当然这种影响可以忽略不计）

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

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

归根结底，任何方法都有优点和缺点，如果您对这种方法感到非常满意，并且它对您有用 - 那就坚持下去！

编辑： 还应该注意的是，您的第二种方法比第一种方法需要更长的时间来渲染浏览器（浏览器必须检查多个条件而不仅仅是一个）有关更多信息，请参阅此问题

于 2012-11-30T13:16:30.063 回答
0

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

.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>

一般情况下比较好

于 2012-11-30T13:17:28.147 回答
0

这没有错，但是如果您有 10 层嵌套，它可能会变得冗长且速度稍慢。.logo如果同时设置和.wrapper .logo样式，结果也可能更难调试。

另一方面，在 in或 in 中有一个.button不同的外观可能会很好。一般来说，使用在特定用例中有意义的东西。.content.menu

于 2012-11-30T13:18:32.660 回答
0

这里没有对错：一切都取决于您正在构建的网站，如果您在一个团队中，以及什么对您有意义。

就我个人而言，我不认为现在的 html 比以前更干净（在这个小例子中），但是你的 CSS 特异性已经增加，这可能会产生有害的连锁反应。

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

据我所知，添加更长的类名不会大大降低性能。我怀疑唯一的影响是微不足道的，不太可能引起注意。真正依赖于实现

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

我自己正忙于转向 OOCSS / BEM 方法（谷歌这些以获得更多信息，那里有很多资源......），因为我相信它会使将来的维护更容易，而且我发现它在团队环境中更有意义. 这些方法可能导致“classitis”或“混乱”html。不过我不介意，并认为网站越大，这就越有意义。如果您正在制作一个 4 页的网站，也许不必费心。

但这对我有用，可能不适合你。所以我回到我原来的说法，这里没有对错:)

于 2012-11-30T13:27:25.383 回答