管理CSS爆炸

小编典典

管理CSS爆炸

css

我一直非常依赖CSS来开发我正在工作的网站。现在，所有CSS样式都在每个标记的基础上应用，因此现在我尝试将其移至更多外部样式中，以帮助将来进行任何更改。

但是现在的问题是，我注意到我遇到了“ CSS爆炸”。对我来说，决定如何最好地组织和抽象CSS文件中的数据变得越来越困难。

我正在div从大量基于表格的网站中使用网站中的大量标签。因此，我得到了许多如下所示的CSS选择器：

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

还算不错，但是作为我的初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想为网站上的每个元素都拥有单独的CSS属性，而且我一直希望CSS文件相当直观且易于阅读。

我的最终目标是简化CSS文件的使用并展示其强大功能以提高Web开发速度。这样，将来可能在该站点上工作的其他个人也将进入使用良好编码实践的实践中，而不必像我以前那样去实践。

阅读 452

2020-05-16

共1个答案

小编典典

这个问题问得好。在我所看到的所有地方，CSS文件都会在一段时间后失去控制，尤其是（但不仅限于）团队合作时。

以下是我本人想要遵守的规则（并非我总是设法做到）。

尽早重构，经常重构。 经常清理CSS文件，将同一类的多个定义融合在一起。立即删除过时的定义。
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
避免冗余，例如在.classname和中定义相同的内容.classname:hover。
使用注释/** Head **/来构建清晰的结构。
使用有助于保持风格不变的修饰工具。我使用 Polystyle ，我很高兴（售价15美元，但花得很值）。也有免费的工具（例如，基于 CSS Tidy的 Code Beautifier ，这是一个开放源代码工具）。 ****
建立明智的课程。请参阅下面的一些注意事项。
使用语义，避免DIV汤- <ul>例如，将s用于菜单。
在尽可能低的级别上定义所有内容（例如，中的默认字体系列，颜色和大小body），并inherit在可能的情况下使用
如果您有非常复杂的CSS，则CSS预编译器可能会有所帮助。我正计划出于同样的原因研究 xCSS 。周围还有其他几个。
如果是团队合作，请同时强调CSS文件的质量和标准。每个人都非常重视其编程语言的编码标准，但是很少有人意识到这对于CSS也是必要的。
如果是团队合作，请考虑使用版本控制。它使事情更容易跟踪，而编辑冲突也更容易解决。即使您只是“简单”地学习HTML和CSS，这也确实值得。
请勿使用!important。不仅因为IE=<7无法处理它。在复杂的结构中，!important经常会使用来更改无法找到其来源的行为，但这是长期维护的毒药。

建立明智的班级

这就是我喜欢建立明智的班级的方式。

我首先应用全局设置：

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

然后，我确定页面布局的主要部分，例如顶部区域，菜单，内容和页脚。 如果我编写了不错的标记，那么这些区域将与HTML结构相同。

然后，我开始构建CSS类，在合理的范围内尽可能多地指定祖先，并尽可能地将相关类分组。

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

将整个CSS结构视为一棵具有越来越具体定义的树，离您的根越远。您希望将类的数量保持在尽可能低的水平，并且希望很少重复。

例如，假设您具有三个级别的导航菜单。这三个菜单看起来不同，但是它们也具有某些特征。例如，它们都是<ul>，它们的字体大小都相同，并且所有项目都彼此相邻（与的默认呈现相反ul）。此外，所有菜单都没有任何项目符号（list- style-type）。

首先，在名为的类中定义通用特征menu：

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

然后，定义三个菜单中每个菜单的特定特征。级别1高40像素；2和3级，20像素。

注意： 您也可以为此使用多个类，但是Internet Explorer 6的多个类存在问题，因此本示例使用id。

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

菜单的标记如下所示：

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

如果您在页面上具有语义上相似的元素（例如这三个菜单），请尝试先计算出共同点，然后将它们放入类中；然后，计算出特定的属性并将其应用于类，或者，如果必须支持Internet
Explorer 6，则将其应用于ID。

其他HTML技巧

如果将这些语义添加到HTML输出中，设计人员以后可以使用纯CSS自定义网站和/或应用程序的外观，这是一个很大的优势，可以节省时间。

如果可能的话，给每个页面的主体一个唯一的类：<body class='contactpage'>这使得在样式表中添加特定于页面的调整非常容易：
```
body.contactpage div.container ul.mainmenu li { color: green }
```
自动构建菜单时，请添加尽可能多的CSS上下文，以便以后进行广泛的样式设置。例如：
```
<ul class="mainmenu">
```
First item

Second item

Third item

Fourth item

这样，每个菜单项都可以根据其语义上下文进行样式设置：无论是列表中的第一项还是最后一项；是否为当前活动项目；和数字。

请注意 ，上面示例中概述的这种分配多个类在IE6中无法正常工作。有一种解决方法可以使IE6能够处理多个类。如果没有解决方法，则必须设置对您来说最重要的类（项目编号，使用中的或第一个/最后一个），或者使用ID。

2020-05-16