管理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开发速度的能力。 这样，将来可能在本网站上工作的其他人也将采用良好编码实践的做法，而不是像我那样选择它。

这个问题问得好。 无论我看到什么，CSS文件都会在一段时间后失控 - 特别是，但不仅仅是在团队中工作时。

以下是我自己试图遵守的规则（并非我总是设法遵守）。

建立合理的班级

这就是我喜欢构建明智的课程的方式。

我首先应用全局设置：

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 s。

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.contactpage div.container ul.mainmenu li { color: green }

<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能够处理多个类; 我还没有尝试过，但看起来很有前途，来自Dean Edwards。 在此之前，您必须设置对您而言最重要的课程（商品编号，活动或第一个/最后一个）或使用ID。 （booo IE6！）

这里只是4个例子：

在所有4中，我的答案都包含了下载和阅读Natalie Downe的PDF CSS系统的建议。 （PDF中包含了很多不在幻灯片中的笔记，所以请阅读PDF！）。 注意她对组织的建议。

编辑（2014/02/05）四年后，我会说：

不要在CSS中编写标题

只是将部分分割成文件。 任何CSS评论，应该就是这样，评论。

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

使用脚本将它们合并为一个; 如有必要。 你甚至可以有一个很好的目录结构，只需要你的脚本递归扫描.css文件。

如果您必须编写标题，请在文件的开头提供TOC

TOC中的标题应与您稍后编写的标题完全相同。 搜索标题是一种痛苦。 为了增加这个问题，如果有人想知道在你的第一个头文件后面有另一个头文件吗？ PS。 在编写TOC时，不要在每行的开头添加doc-like *（星号），这只会让选择文本变得更加恼人。

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

在规则中写入注释，而不是在块之外

首先，当你编辑脚本时，你有50/50的机会可以关注规则块之外的内容（特别是如果它是一个巨大的文本循环;））。 其次，（几乎）不存在你需要外部“评论”的情况。 如果它在外面，它是标题的99％，所以保持它的样子。

将页面拆分为组件

在大多数情况下，组件应具有position:relative ，无padding和margin 。 这大大简化了％规则，并允许absolute:position简单得多absolute:position元素的absolute:position ，因为如果存在绝对定位的容器，绝对定位的元素将在计算top ， right ， bottom和left属性时使用容器。

HTML5文档中的大多数DIV通常都是一个组件。

一个组件也可以被认为是页面上的一个独立单元。 用外行人的话来说，像对待类似黑盒子的东西是有道理的。

再次访问QA页面示例：

#navigation
#question
#answers
#answers .answer
etc.

通过将页面拆分为组件，可以将工作分解为易于管理的单元。

将规则与累积效应放在同一行上。

例如， border ， margin和padding （但不是outline ）都会添加到正在设置的元素的尺寸和大小。

position: absolute; top: 10px; right: 10px;

如果它们在一条线上不可读，至少要把它们放在一起：

padding: 10px; margin: 20px;
border: 1px solid black;

尽可能使用简写：

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

切勿重复选择器

如果你有更多的同一个选择器的实例，你很可能会不可避免地结束同一个规则的多个实例。 例如：

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

当你可以使用id / classes时，避免使用TAG作为选择器

首先关闭DIV和SPAN标签是例外：永远不要使用它们！ ;）只使用它们来附加一个类/ ID。

这个...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

应该这样写：

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

因为额外悬挂的DIV没有给选择器添加任何内容。 他们也强制一个不必要的标签规则。 例如，如果要更改从某个div到article .answer ，您的样式会打破。

或者如果你更喜欢更清晰的话：

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

原因是border-collapse属性是一个特殊的属性，只有在应用于table时才有意义。 如果.statistics不是table ，则不适用。

通用规则是邪恶的！

他们不会节省你的时间，他们让你的头部爆炸; 以及使维护成为一场噩梦。 当你写规则时，你可能知道他们在哪里申请，但是这并不能保证你的规则不会在以后混淆你。

添加到这个通用规则是令人困惑和难以阅读的，即使你对你正在设计的文档有一些想法。 这并不是说你不应该写通用规则，除非你真的打算让它们成为通用规则，否则就不要使用它们，甚至它们会尽可能多地向选择器中添加范围信息。

像这样的东西...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

...具有与在编程语言中使用全局变量相同的问题。 你需要给他们的范围！

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

基本上读作：

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

无论何时我知道的组件是页面上的单例，我都喜欢使用ID; 您的需求可能会有所不同。

注意：理想情况下，您应该写得够好。 然而，提及选择器中的更多组件相比提到更少的组件而言是更宽容的错误。

让我们假设你有一个pagination组件。 你可以在你的网站的很多地方使用它。 这将是您编写通用规则时的一个很好的例子。 比方说，你display:block单个页面的链接，并给他们一个深灰色的背景。 为了让他们可见，你必须有这样的规则：

.pagination .pagelist a {
    color: #fff;
}

现在让我们说你使用你的分页作为答案列表，你可能会遇到类似这样的事情

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

这会使你的白色链接变黑，而你不想要。

修复它的不正确方法是：

.pagination .pagelist a {
    color: #fff !important;
}

解决这个问题的正确方法是：

#answers .header .pagination .pagelist a {
    color: #fff;
}

复杂的“逻辑”评论不工作:)

如果你写下类似这样的话：“这个价值取决于等值线和等高线的差距”，这是不可避免的，你会犯一个错误，它会像一幢房子一样掉下来。

保持你的评论简单; 如果您需要“逻辑操作”，请考虑SASS或LESS之类的CSS模板语言之一。

你如何写一个彩色托盘？

离开这个结束。 为您的整个颜色托盘提供一个文件。 没有这个文件，你的风格应该在规则中仍然有一些可用的颜色托盘。 您的颜色托盘应覆盖。 您可以使用非常高级别的父组件（例如#page ）链接选择器，然后将您的样式编写为自足规则块。 它可以只是颜色或更多。

例如。

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

这个想法很简单，您的颜色托盘是独立于基础样式的样式表，您可以将它们级联到一起。

名字较少，需要较少的内存，使代码更易于阅读

使用更少的名字更好。 理想情况下，使用非常简单（和简短！）的词语：文本，正文，标题。

我还发现简单单词的组合比较容易理解，然后有一长串“合适”的单词：postbody，posthead，userinfo等。

即使有些陌生人进来阅读你的风格汤（就像你自己几周后一样），也只需要了解哪里使用了单词，而不是每个选择器的使用位置，这样就可以保持词汇量小。 例如.this每当一个元素被假定为“所选项目”或“当前项目”等时，就使用这个。

自己清理

编写CSS就像吃东西，有时候你会留下一团糟。 确保你清理了那个烂摊子，否则垃圾代码就会堆积如山。 删除不使用的课程/ ID。 删除不使用的CSS规则。 确保一切都很好，你没有冲突或重复的规则。

如果您按照我的建议，将一些容器当作您的样式中的黑盒子（组件），在选择器中使用这些组件，并将所有内容保存在一个专用文件中（或者用TOC和头文件正确拆分文件），然后工作要容易得多......

您可以使用诸如firefox扩展程序Dust-Me Selectors（提示：将其指向您的sitemap.xml）的工具，以帮助您找到隐藏在您的css核心和carnies中的一些垃圾。

保留一个unsorted.css文件

假设你正在设计一个QA网站，并且你已经有了一个“答案页面”的样式表，我们将会调用answers.css 。 如果您现在需要添加大量新的CSS，请将其添加到unsorted.css样式表中，然后重构到answers.css样式表中。

有几个原因：

上一篇: Managing CSS Explosion

下一篇: How does ?#iefix solve web fonts loading in IE6