管理 CSS 爆炸

小编典典

管理 CSS 爆炸

all

我一直在严重依赖 CSS 来开发我正在开发的网站。现在，所有的 CSS
样式都在每个标签的基础上应用，所以现在我正试图将它转移到更多的外部样式，以帮助未来的任何变化。

但现在的问题是我注意到我得到了“CSS Explosion”。我越来越难以决定如何最好地组织和抽象 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
开发速度的能力。这样，将来可能在此站点上工作的其他人也将开始使用良好的编码实践，而不必像我一样去学习它。

阅读 96

2022-03-03

共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
存在多个类的问题 ，因此本示例使用ids。

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。

2022-03-03