管理CSS爆炸 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我一直非常依赖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开发速度。这样，将来可能在此站点上工作的其他个人也将参与使用良好编码实践的实践，而不必像我以前那样去实践。

#1楼

这里有一些很棒的材料，有些花了一些时间来回答这个问题，但是当涉及到单独的样式表或单独的样式表时，我将使用单独的文件进行开发，然后将所有用于站点的通用css合并到一起部署时将其合并为一个文件。

这样，您就可以兼得两全其美，提高了性能（减少了从浏览器请求的HTTP请求），并且在开发时分离了代码问题。

#2楼

很多时候，我会看到个人将文件分成几部分，并在各部分之间添加标题注释。

就像是

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

它工作得很好，可以很容易地稍后返回并找到您正在处理的内容。

#3楼

这个问题问得好。在我所看到的任何地方，CSS文件都会在一段时间后变得失控-特别是（但不仅限于）团队合作时。

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

尽早重构，经常重构。 经常清理CSS文件，将同一类的多个定义融合在一起。立即删除过时的定义。
在修复错误期间添加CSS时，请留意更改的内容（“这是为了确保该框在IE <7中保持对齐”）
避免冗余，例如，在.classname和.classname:hover定义相同的内容。
使用注释/** Head **/建立清晰的结构。
使用有助于保持风格不变的修饰工具。我使用Polystyle ，我很高兴（售价15美元，但花得很值）。也有免费的工具（例如，基于CSS Tidy的 Code Beautifier ，这是一个开放源代码工具）。
建立明智的课程。请参阅下面的一些注意事项。
使用语义，避免DIV汤-例如，对菜单使用<ul> 。
在尽可能低的级别上定义所有内容（例如，默认字体系列， 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"> <li class="item_first item_active item_1"> First item </li> <li class="item_2"> Second item </li> <li class="item_3"> Third item </li> <li class="item_last item_4"> Fourth item </li> </ul>
```
这样，每个菜单项都可以根据其语义上下文进行样式设置：无论是列表中的第一项还是最后一项；是否为当前活动项目；和数字。

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

#4楼

我发现困难的是将网站所需的设计转换为一系列规则。如果站点的设计清晰且基于规则，那么您的类名和CSS结构就可以从中得到。但是，如果人们随着时间的推移在站点中随机添加一些没有多大意义的内容，那么CSS中您将无能为力。

我倾向于这样组织我的CSS文件：

CSS重置，基于Eric Meyer的。（因为否则我发现，对于大多数元素，我至少有一个或两个规则只是在重置默认浏览器样式-例如，我的大多数列表看起来都不像列表的默认HTML样式。）
网格系统CSS（如果站点需要）。（我的基础是960.gs ）
在每个页面上显示的组件的样式（页眉，页脚等）
在网站的各个地方使用的组件的样式
仅在个别页面上相关的样式

如您所见，大部分取决于站点的设计。如果设计清晰，有条理，则可以使用CSS。如果没有，那你就被搞砸了。