Question

CSS中是否有任何方法可以限制某些内容的级联？

我遇到的情况是我的CSS失控，因为我必须制作多少个类，因为继承。比如..

.menu a:hover {
   background : #XXXXXX;
}

<div class="menu">
   <a href="#">Hyperlink</a>
   <ul>
      <li><a href="#">Another Hyperlink</a></li>
   </ul>
</div>

现在，Another Hyperlink继承了相同的风格。现在我有两个选择......我可以将.menu实现改为此...

.menu > a:hover {
   // ...
}

这只会影响顶级锚元素。但这并不总是我想要的。通常，在很多情况下，我最终不得不在各种层次结构中编写更专业的样式。

在这个例子中，我知道解决方案，但更复杂的情况呢？我有一个非常糟糕的“CSS Gone Wild”案例。我现在有超过20个.css文件，虽然它们组织良好并且计划好了，但它只是处理得太多了。这是正常的吗？大多数大型网站都有那么多css风格要处理吗？

Answer 1

您是否查看了Sass或Less？这些基本上是CSS语法的超集（所以你现有的css仍然可以工作），它允许你通过mixins，变量，嵌套等更好地组织你的css代码。它们输出普通的css，但通常可以比你手工做得更好具有最小量的重复等。它还导致更小的源文件。

正如其他人所说，为了获得最高效率，有更多的因素而不仅仅是css的数量。 http请求的数量是一个 - 实际上应该尽可能少地获取文件，即使您只是将它们作为构建过程的一部分连接起来。还要记住，并非所有CSS规则都是相同的。不同的选择器具有不同的成本，并且组合的选择器越多，效率就越低。效率方面，更好地拥有更多有效选择器的规则。以下是一些解释efficiency of css selectors的好提示。

Answer 2

你似乎对你的CSS和HTML有很好的处理。你知道正确的规则，意识到过于冗长，并且正努力避免为所有事情使用个人风格。

此时我建议您继续使用该网站，而不考虑您的代码有多长，只需质量。我相信你最终会意识到它与网站的大小并没有太大关系。

如果您在20个不同的文件之间切换，可能会导致“失控”的感觉。您现在可以将它们组合到一个文件中（由明显的注释块分隔），这样就不会太过分了。

Answer 3

这是正常的吗？做最庞大的网站有那么多的CSS样式来处理与？

如果你看一下最庞大的网站（在你的浏览器中找到源代码），你会看到一些（1 - 3）个CSS文件被链接到每个文件1000行或更多。但这对CSS来说并不是一个很大的数字。重要的是保持结构与细分（通过评论），如下所示：

/********************* sidebar **********************/

/********************* main content **********************/

此外，如果您查看HTML，它会有所帮助。经常出现的CSS经常与一些HTML疯狂相关。尽量做到更简单。

Answer 4

简短回答：不，CSS中没有办法指定样式应该级联多远。正如您所示，您可以指定非级联样式（一个示例是使用>来表示单个级别）但即使这样也不是特别受支持。我自己从不使用它（但后来我从未建立过不需要IE6支持的网站......）

我发现CSS的一个挑战是使用我的声明获得正确的特异性。你想要尽可能少的管理，所以我从一般的开始，然后开始尽可能广泛的目标。如果你这样做，那么你可以做的就更多了。总有一些例子（通常在我的作品中它是一个左手导航树，每个都有自己的颜色和背景图像下降8个等级），你写的比你想要的更多。

但如果它们是非级联风格，你需要看看正面图像！：）

CSS疯狂 - 如何阻止风格走得太远

4 个答案: