我一直非常依赖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开发速度。这样，将来可能在此站点上工作的其他个人也将参与使用良好编码实践的实践，而不必像我以前那样去实践。
3 回答
慕码人8056858
TA贡献1803条经验 获得超6个赞
这个问题问得好。我所看到的任何地方，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">
<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。（嘘IE6！）
湖上湖
TA贡献2003条经验 获得超2个赞
不要在CSS中写标题
只需将部分拆分为文件。任何CSS注释都应该是注释。
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
使用脚本将它们组合为一个；如有必要。您甚至还可以拥有一个不错的目录结构，只需让您的脚本以递归方式扫描.css文件即可。
如果必须写标题，请在文件开头添加目录
TOC中的标题应与您稍后编写的标题完全相同。搜索标题很痛苦。更麻烦的是，有人究竟想知道您在第一个标头之后还有另一个标头吗？ps。编写TOC时，不要在每一行的开头添加类似doc的*（星号），这只会使选择文本更加麻烦。
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
在规则内或规则内（而不是在块外）编写注释
首先，当您编辑脚本时，您有50/50的机会会注意规则块之外的内容（尤其是在一大堆文本中）；）。其次，（几乎）在任何情况下，您都不需要外部“评论”。如果它在外面，则是99％的时间是标题，因此应保持该标题不变。
将页面拆分为组件
大多数情况下position:relative，组件应具有no padding和no margin。这简化％原则很多，以及允许更简单的absolute:position“元素的ING，因为如果有一个绝对定位的容器绝对定位的元素将计算时所使用的容器top，right，bottom，left的属性。
HTML5文档中的大多数DIV通常是一个组件。
组件也是可以视为页面上的独立单元的东西。用外行的话来说，如果把像黑匣子这样的东西当作有意义的东西对待就好了。
再次使用“质量检查”页面示例：
#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 /类时，避免使用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，所以对选择器没有任何作用。它们还会强制执行不必要的标签规则。如果你要改变，例如，.answer从一个div到article你的风格将打破。
或者，如果您希望更清晰：
#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，则不适用。
通用规则是邪恶的！
如果可以，请避免编写通用/魔术规则
除非用于CSS重置/取消重置，否则所有通用魔术都应至少应用于一个根组件
它们没有节省您的时间，却使您的头部爆炸。并使维护成为一场噩梦。在编写规则时，您可能会知道它们的适用位置，但这并不能保证您的规则以后不会与您混淆。
加上这些通用规则，即使您对文档的样式有所了解，也难以理解且难以理解。这并不是说您不应该编写通用规则，除非您真正打算使它们通用，否则不要使用它们，甚至它们会向选择器中添加尽可能多的作用域信息。
像这样的东西
.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;
}
复杂的“逻辑”注释不起作用:)
如果您写这样的东西：“此值取决于blah-blah加上blah-blah的高度”，那么不可避免的是您会犯错，并且它们都会像纸牌屋一样掉下来。
保持您的评论简单；如果需要“逻辑运算”，请考虑使用CSS模板语言之一，例如SASS或LESS。
我该如何写一个彩色托盘？
到此为止。为您的整个彩色托盘准备一个文件。没有此文件，您的样式在规则中仍应具有一些可用的调色板。您的颜色托盘应覆盖。您可以使用非常高级的父级组件（例如#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就像吃东西，有时会留下一团糟。确保清理混乱，否则垃圾代码将堆积。删除不使用的类/标识。删除不使用的CSS规则。确保一切都很好，并且没有冲突或重复的规则。
如果您按照我的建议将某些容器视为样式中的黑盒（组件），在选择器中使用了这些组件，并将所有内容保存在一个专用文件中（或使用TOC和标头正确分割了文件），工作实质上更容易...
您可以使用诸如firefox扩展名Dust-Me Selectors（提示：将其指向您的sitemap.xml）之类的工具来帮助您找到隐藏在CSS核武器和狂欢者中的一些垃圾。
保留unsorted.css档案
假设您正在对质量检查网站进行样式设置，并且已经有了“答案页面”的样式表，我们将其称为answers.css。如果现在需要添加很多新的CSS，请将其添加到unsorted.css样式表中，然后将其重构为answers.css样式表。
原因如下：
完成后重构的速度更快，然后就是搜索规则（可能不存在）并注入代码
您将编写要删除的内容，注入代码只会使删除该代码更加困难
附加到原始文件很容易导致规则/选择器重复
- 3 回答
- 0 关注
- 336 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消