CSS走火入魔-如何阻止样式走得太远

CSS中有没有任何方法可以限制某个东西层叠的距离

我遇到了这样一种情况，我的CSS正失去控制，因为我必须创建多少类，因为继承性。例如

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

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

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

在这个例子中，我知道解决方案，但是更复杂的场景呢？我有一个非常糟糕的“CSS失控”案例。我现在有20多个.css文件，虽然它们组织得很好，计划得很好，但要处理的事情太多了。这正常吗？大多数大型网站都有那么多css样式需要处理吗

这正常吗？做最大型的网站吗 有那么多css样式需要处理吗 用什么

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

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

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

---

此外，如果您查看HTML，它也会有所帮助。通常，CSS的疯狂与HTML的疯狂齐头并进。尽量把事情做得简单些。

你似乎对css和html有很好的处理能力。你知道正确的规则，知道过于冗长，并且努力避免在任何事情上使用个人风格

在这一点上，我建议您不要考虑代码的长度，只考虑质量。我相信最终你会意识到，这与网站的大小没有多大关系

---

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

简短回答：不，CSS中没有办法指定样式应层叠的距离。正如您正确地展示的那样，您可以指定一个非级联样式（一个示例是使用

来指示单个级别），但即使这样也没有得到很好的支持。我自己从来没有使用过它（但我从来没有做过不需要IE6支持的网站…）

我发现CSS的一个挑战是在我的声明中获得适当级别的特殊性。你们想要的尽可能少，所以我从非常一般的开始，然后开始瞄准尽可能广泛的领域。如果你正在这样做，那么你能做的就不多了。总是有一些例子（通常在我的作品中，它是一个左手导航树，它会下降8个级别，每个级别都有自己的颜色和背景图像），在这些例子中，你写的东西比你想要的多

但是如果它们是非层叠样式，您需要看到正面的图像！！：）

你有没有调查过或？这些基本上是CSS语法的超集（因此您现有的CSS仍然有效），允许您通过混合、变量、嵌套等更好地组织您的CSS代码。它们输出纯CSS，但通常比手动复制的CSS做得更好。这也会导致更小的源文件

---

正如其他人所说，为了获得最高的效率，除了css的数量，还有更多的因素。http请求的数量是一个-实际获取的文件应该尽可能少，即使您只是将它们作为构建过程的一部分。还要记住，并非所有CSS规则都是平等创建的。不同的选择器具有不同的成本，您组合的选择器越多，效率越低。效率方面，最好有更多的规则，这些规则具有更高效的选择器。以下是一些很好的提示说明。

这并不是解决您问题的方法，但我只想指出，一旦测试完成，您肯定应该尽可能多地合并这些文件。大量http请求的流失将真正影响站点性能。并在必要时进行压缩。更多关于主题：我想我要问的问题是，为什么这么多不同的东西需要20页的样式。一般来说，你所有的身体副本和链接应该是相同的。侧边栏和导航元素将有单独的样式，但内部不应变化太大。你是不是太过分了？您是否在尽可能地重用样式（具有不需要反复定义的通用a、p、h2、h3样式）？作为参考，我在我的网站（一个大型政府组织）上有两个css文件，每个文件大约有1000行。你离这很远吗？这个网站非常大，有很多需要用户交互的元素。我已经大踏步地尽可能地把事情浓缩起来，但有时这是不可行的。我有20个css文件，但每个大约有150行长——我按类别和用途将它们划分。是的，我打算最后做压缩。老实说，我花了很长时间仔细梳理我的HTML代码，我已经尽我所能压缩了内容。我只是希望CSS还有更多我不知道的地方。我读过几本书，研究过像

和

+

这样的外围选择器，了解了很多关于级联层次结构的知识，但感觉事情完全失控了。大多数CSS都用于使jQuery插件正常工作。CSS是一种语言，通常没有比看上去更多的东西。如果大部分CSS只是用于使jQuery插件正常工作，那么可以将该CSS放在单独的文件中或单独的分区下。也许如果你发布一些代码，我们可以给你一些提示。。。

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

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