pipe理CSS爆炸
我一直在很大程度上依赖CSS来开发我正在使用的网站。 现在，所有的CSS样式都被应用在每个标签的基础上，所以现在我正试图将其移到更多的外部样式中以帮助进行任何未来的变化。
但现在问题是，我注意到我得到了“CSS爆炸”。 我很难决定如何最好地组织和抽象CSS文件中的数据。
我在网站中使用了大量的div标签，从一个大量的基于表格的网站移动。 所以我得到了很多像这样的CSSselect器：
div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Here */ } div.body { /* Styles Here */ } /* And many more */
这还不算太糟糕，但是因为我是初学者，所以我想知道是否可以就如何最好地组织CSS文件的各个部分提出build议。 我不想为我的网站上的每个元素都有一个单独的CSS属性，我总是希望CSS文件相当直观，易于阅读。
我的最终目标是简化CSS文件的使用，展示他们提高网页开发速度的能力。 这样，未来可能在这个网站上工作的其他人也将进入使用好的编码实践的实践，而不是像我这样做。
这是一个非常好的问题。 在我看来，CSS文件往往会在一段时间后失控 – 特别是，但不仅仅是在团队中工作时。
以下是我自己试图遵守的规则（不是我总是设法去做的）。
-
早期重构，经常重构。 经常清理CSS文件，融合同一类的多个定义。 立即删除过时的定义。
-
在修正错误的时候添加CSS时，请留下一个注释，说明这个改变是干什么的（“这是为了确保这个盒子左alignmentIE <7”）
-
避免冗余，例如在
.classname和.classname:hover定义相同的事物。 -
使用评论
/** Head **/build立一个清晰的结构。 -
使用一个美化工具，帮助保持恒定的风格。 我使用Polystyle ，我很高兴（花费15美元，但是花的钱）。 我相信也有免费的（更新：例如基于CSS Tidy的 Code Beautifier ，我还没有用过自己的开源工具，但看起来非常有趣）。
-
build立合理的class级。 请参阅下面的一些注意事项。
-
使用语义，避免DIV汤 – 例如，使用菜单
<ul>s。 -
在尽可能低的层次上定义所有内容（例如，一个默认的字体系列，颜色和大小），并尽可能地使用
inherit -
如果你有非常复杂的CSS，也许CSS预编译器有帮助。 我计划很快就会考虑到xCSS 。 还有其他几个人。
-
如果在一个团队中工作，突出强调CSS文件的质量和标准的必要性。 每个人在编程语言的编码标准方面都很重视，但是也很less有人意识到这对CSS也是必要的。
-
如果在团队中工作， 请考虑使用版本控制。 它使事情更容易跟踪，编辑更容易解决的冲突。 即使你只是“进入HTML和CSS”，这也是值得的。
-
不要使用
!important。 不仅因为IE = <7不能处理它。 在一个复杂的结构中，“重要”的使用经常会诱使改变一个源头无法find的行为，但这对于长期维护是一种毒害 。
build立合理的class级
这就是我喜欢build立明智的课程。
我首先应用全局设置：
body { font-family: .... font-size ... color ... } a { text-decoration: none; }
然后，我确定页面布局的主要部分 – 例如顶部区域，菜单，内容和页脚。 如果我写了好的标记，这些区域将与HTML结构相同。
然后，我开始build立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结构想象成一棵具有越来越具体的定义的树 ，离你的根越来越远。 你想保持尽可能低的class级数量，你想重复自己尽可能less。
例如，假设您有三个级别的导航菜单。 这三个菜单看起来不一样，但是它们也有一些特点。 例如，它们都是<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输出中，devise人员可以稍后使用纯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。 （booo IE6！）
这里只是4个例子：
- CSS约定/代码布局模型
- 在编写我的第一个样式表时，是否有任何CSS标准？
- 什么是最好的方法来整理CSS？
- 最佳实践 – CSS样式表格式
在所有4我的答案包括build议下载和阅读娜塔莉·唐恩的PDF CSS系统 。 （PDF中包含了大量不在幻灯片中的笔记，所以请阅读PDF！）。 注意她对组织的build议。
编辑（2014/02/05）四年后，我会说：
- 使用CSS预处理器和pipe理你的文件作为partials（我个人比较喜欢Sass和Compass，但是Less还不错，还有其他的）
- 阅读OOCSS ， SMACSS ， BEM或getbem等概念。
- 看一下像Bootstrap和Zurb基金会这样stream行的CSS框架是如何构build的。 不要打折不那么stream行的框架 – 因纽特人是一个有趣的，但也有很多其他人。
- 在持续集成服务器上和/或像Grunt或Gulp这样的任务运行器上，通过构build步骤合并/缩小文件。
不要在CSS中编写标题
只是分割成文件。 任何CSS评论，应该就是这样，评论。
reset.css base.css somepage.css someotherpage.css some_abstract_component.css
使用脚本将它们合并为一个; 如有必要。 你甚至可以有一个很好的目录结构，只要你的脚本recursion扫描.css文件。
如果您必须编写标题，请在文件的开始处指定TOC
TOC中的标题应该与您稍后写的标题完全相同。 search标题是一件痛苦的事情。 为了增加这个问题，如果有人想知道在第一个标题后面有另外一个标题？ PS。 在写TOC时，不要在每一行的开始处添加doc-like *（星号），这只会让select文本更烦人。
/* Table of Contents - - - - - - - - - Header stuff Body Stuff Some other junk - - - - - - - - - */ ... /* Header Stuff */ ... /* Body Stuff */
在规则中写入注释，而不是在块之外
首先，当你编辑脚本的时候，你有50/50的机会可以关注规则块之外的内容（尤其是如果它是一个大的文本循环）。 其次，几乎没有什么情况需要在外面发表评论。 如果是在外面的话，99％是标题的时间，所以保持这样。
将页面拆分为组件
组件应该有position:relative大部分时间都是position:relative ，没有padding和没有margin 。 这简化了很多％的规则，以及允许更简单的absolute:position元素的absolute:position ，因为如果有绝对定位的容器，当计算top ， right ， bottom ， left属性时，绝对定位的元素将使用容器。
HTML5文档中的大多数DIV通常是一个组件。
一个组件也可以被认为是页面上的一个独立单元。 用外行人的话来说，如果把一个像黑匣子这样的东西看作是有道理的，就把它当作一个组件来对待。
再次与质量保证页面的例子：
#navigation #question #answers #answers .answer etc.
通过将页面拆分为组件，可以将工作分解为可pipe理的单元。
将规则与累积效果放在同一行上。
例如， border ， margin和padding （但不是outline ）都会添加到正在设置的元素的尺寸和大小。
position: absolute; top: 10px; right: 10px;
如果他们在一条线上不可读，至less要把它们放在一起。
padding: 10px; margin: 20px; border: 1px solid black;
尽可能使用简写：
/* the following... */ padding-left: 10px; padding-right: 10px; /* can simply be written as */ padding: 0 10px;
切勿重复select器
如果你有更多的同一个select器的实例，那么你很有可能会不可避免地结束同一个规则的多个实例。 例如：
#some .selector { margin: 0; font-size: 11px; } ... #some .selector { border: 1px solid #000; margin: 0; }
避免使用标签作为select器，当你可以使用ID /类
首先，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没有给select器添加任何东西。 他们也强制一个不必要的标签规则。 如果你想改变，例如，从一个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重置/未重设，所有的通用魔法都应该适用于至less一个根组件
他们没有节省你的时间，他们让你的头部爆炸; 以及使维护成为一场噩梦。 当你写规则的时候，你可能知道他们在哪里申请，但是这并不能保证你的规则不会在以后混淆你。
添加到这个通用规则是令人困惑和难以阅读的，即使你对你正在devise的文档有一些想法。 这并不是说你不应该写通用规则，除非你真的打算让它们成为通用规则，否则就不要使用它们，甚至可以将尽可能多的范围信息添加到select器中。
像这样的东西…
.badges { width: 100%; white-space: nowrap; } address { padding: 5px 10px; border: 1px solid #ccc; }
…具有与在编程语言中使用全局variables相同的问题。 你需要给他们的范围！
#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; 您的需求可能会有所不同。
注意：理想情况下，你应该写得够好。 然而，在select器中提到更多的组件相比提到更less的组件而言是更宽容的错误。
让我们假设你有一个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 ）链接select器，然后将你的样式写成一个自足的规则块。 它可以只是颜色或更多。
例如。
#page #header .description, #page #categories .description, #page #answers .answer .body { color: #222; background: #fff; border-radius: 10px; padding: 1em; }
这个想法很简单，你的颜色托盘是独立于基础样式的样式表。
名字less，需要更less的内存，使代码更易于阅读
使用更less的名字更好。 理想情况下使用非常简单（和短！）的话：文本，正文，标题。
我还发现简单的词组合比较容易理解，然后有一个长的“合适”的话汤：postbody，posthead，userinfo等。
即使有些陌生人进来阅读你的风格汤（就像你自己几个星期以后一样），只需要知道在哪里使用了单词，而不是使用每个select器的地方，这样就保持了词汇量的小。 例如，我使用。这是一个元素被认为是“选定的项目”或“当前的项目”，等等。
自己清理
写CSS就像吃东西，有时候你会留下一个烂摊子。 确保你清理乱七八糟的东西，否则垃圾代码就会堆积如山。 删除不使用的类/ ID。 删除不使用的CSS规则。 确保一切都很好，你没有冲突或重复的规则。
如果你按照我的build议，把一些容器当作你的风格的黑盒（组件），在你的select器中使用这些组件，并把所有东西放在一个专用文件中（或者用TOC和头文件正确地分割一个文件）工作要容易得多
您可以使用诸如Firefox扩展Dust-Meselect器（提示：将其指向您的sitemap.xml）的工具，以帮助您find隐藏在您的css核心和carnies中的一些垃圾。
保留一个unsorted.css文件
假设您正在devise一个QA网站，并且您已经有一个“答案页面”的样式表，我们将会调用answers.css 。 如果你现在需要添加很多新的CSS，把它添加到unsorted.css样式表，然后重构到你的answers.css样式表。
有几个原因：
- 完成后重构速度更快，然后search规则（可能不存在）并注入代码
- 你会写的东西，你会删除，注入代码只是更难以删除该代码
- 附加到原始文件容易导致规则/select器重复
看看1. SASS 2. 指南针
我见过的最好的方法是使用面向对象的CSS原则。
还有一个OOCSS框架非常好。
一些意识形态与顶级答案中的大部分内容背道而驰，但是一旦您知道如何以面向对象的方式构buildCSS ，您就会发现它确实能够保持代码的精简和意义。
这里最关键的是在你的网站和build筑师身上识别“对象”或构build模块。
Facebook聘请了OOCSS的创始人Nicole Sullivan在他们的前端代码（HTML / CSS）中获得了大量的节省。 是的，你不但可以在你的CSS中获得储蓄，而且可以在你的HTML中获得储蓄，而你也可以在HTML中获得这种储蓄，因为你提到将基于table的布局转换成很多div
另一个很好的方法是在OOCSS的某些方面是类似的，从一开始就规划和编写你的CSS是可扩展和模块化的。 Jonathan Snook撰写了关于SMACSS – 用于CSS的可扩展和模块化体系结构的精彩写作和书籍/电子书
让我连接你的一些链接：
大规模CSS的5个错误 – （video）
大规模CSS的5个错误 – （幻灯片）
CSS膨胀 – （幻灯片）
你也应该了解级联和重量，以及它们是如何工作的。
我注意到你只使用类标识符（div.title）。 你知道你也可以使用身份证吗？身份证比class级更重要吗？
例如，
#page1 div.title, #page1 ul, #page1 span { // rules }
将使所有这些元素共享一个字体大小，或者说颜色，或者不pipe你的规则是什么。 你甚至可以让＃page1的后代所有的DIV都得到一定的规则。
至于体重，请记住，CSS轴从最一般/最轻到最特定/最重的。 也就是说，在一个CSSselect器中，一个元素说明符被一个ID说明符压倒了。 数字计数，所以具有两个元素说明符（ul li）的select器比只有一个说明符（li）的select器具有更多的权重。
想想像数字。 一列中的9个仍然不到十列中的一个。 具有ID说明符，类说明符和两个元素说明符的select器将具有比没有ID，500个类说明符和1,000个元素说明符的select器更多的权重。 这当然是一个荒谬的例子，但是你明白了。 关键是，应用这个概念可以帮助你清理大量的CSS。
顺便说一句，将元素说明符添加到类（div.title）是没有必要的，除非您遇到与class =“title”的其他元素的冲突。 不要添加不必要的重量，因为您可能需要稍后使用该重量。
我可以build议更less的CSSdynamic框架
和前面提到的SASS类似。
它有助于维护每个父类的CSS。
例如
#parent{ width: 100%; #child1 { background: #E1E8F2; padding: 5px; } #child2 { background: #F1F8E2; padding: 15px } }
这是什么：对＃child1和＃child2应用宽度：100％。
此外，＃child1特定的CSS属于#parent。
这将呈现给
#parent #child1 { width: 100%; background: #E1E8F2; padding: 5px; } #parent #child2 { width: 100%; background: #F1F8E2; padding: 15px; }
我觉得很难把一个网站所需的devise转换成一系列规则。 如果网站的devise清晰且基于规则，那么您的类名和CSS结构就可以从中stream转。 但是，如果随着时间的推移，人们随意地向网站添加一点点没有意义的东西，那么在CSS中就没有太多可以做的事情了。
我倾向于像这样粗略地组织我的CSS文件：
-
CSS重置，基于埃里克迈耶的 。 （因为否则我发现，对于大多数元素，我至less有一两个规则重置默认的浏览器样式 – 例如，我的大多数列表看起来不像列表的默认HTML样式。）
-
网格系统的CSS，如果网站要求它。 （我的基础是960.gs ）
-
每个页面上显示的组件样式（页眉，页脚等）
-
在网站的各个地方使用的组件的样式
-
仅在单个页面上相关的样式
正如你所看到的，大部分取决于网站的devise。 如果devise的清晰和有组织，你的CSS可以。 如果没有，你搞砸了。
我的答案是高层次的，以解决您在问题中提出的高层次问题。 可能会有低层次的组织诀窍，可以调整，使其更漂亮，但这些都不能解决方法上的缺陷。 有几件事情会影响CSS爆炸。 显然，网站的整体复杂性，还包括命名语义，CSS性能，CSS文件组织以及可testing性/可接受性等。
你似乎在命名语义上是正确的道路，但它可以更进一步。 在网站上重复出现的没有结构修改的HTML部分（称为“模块”）可以被视为select器根，并且从那里可以将内部布局与该根关联起来。 这是面向对象的CSS的基本原则，您可以在雅虎工程师的演讲中阅读/观看更多关于它的内容 。
重要的是要注意，这种干净的方法可能与性能的担忧背道而驰，这有利于基于id或标签名称的短select器 。 发现这种平衡取决于你，但是除非你有一个庞大的网站，否则这应该只是你头脑中的一个向导，提醒你让select器保持简短。 更多关于这里的performance 。
最后，你将有一个单一的CSS文件为您的整个网站，或多个文件（单个基本文件与每页或部分文件使用）？ 单个文件对性能更好，但可能难以与多个团队成员了解/维护，并且可能更难以testing。 为了进行testing，我build议您有一个包含每个支持的CSS模块的CSStesting页面 ，以testing冲突和意外级联。
或者，您可以使用多种文件方式 ，将CSS规则的范围限定在一个页面或一个部分。 这要求浏览器下载多个性能问题的文件。 您可以使用服务器端编程来dynamic指定和汇总（和缩小）CSS文件到单个文件中。 但是由于这些文件是分开的，对它们的testing是分开的，因此您可能会在页面/部分中引入不一致的外观和感觉。 因此testing变得更加困难。
您需要分析客户的具体需求，并相应地平衡这些问题。
正如我之前所说：进入OOCSS。 Sass / Less / Compass很诱人，但是直到使用vanilla CSS才行，Sass / Less / Compass只会让事情变得更糟。
首先，阅读高效的CSS。 尝试Google Page Speed并阅读Souders关于高效css的文章。
然后，inputOOCSS。
- 学习如何使用级联。 （毕竟，我们称之为级联样式表）。
- 学习如何获得正确的粒度（自下而上而不是自上而下）
- 学习如何分离结构和皮肤（什么是独特的，这些对象有什么变化？）
- 学习如何分离容器和内容。
- 学会爱上网格。
它会革命每一个关于写作CSS的一点点。 我完全重新开始，喜欢它。
更新：SMACSS类似于OOCSS，但一般来说更容易适应。
A lot of times I will see individuals break the file out into sections, with a heading comment between sections.
就像是
/* Headings and General Text */ .... stuff here for H1, etc.. /* Main page layout */ .... stuff here for layout page setup etc.
It works pretty well and can make it easy to go back later and find what you are working on.
The core principles for sensible CSS, extracted from CSS Refactoring: From append-only to modular CSS
Write in SASS. You'd be insane to forego the advantages of variables, mixins, and so on.
Never use an HTML ID for styling; always use classes . HTML IDs, when used correctly, appear only once in the whole page, which is the complete opposite of re-usability — one of the most basic goods in sensible engineering. Moreover, it's really hard to override selectors containing IDs and often the only way to overpower one HTML ID is to create another ID, causing IDs to propagate in the codebase like the pests they are. Better to leave the HTML IDs for unchanging Javascript or integration test hooks.
Name your CSS classes by their visual function rather than by their application-specific function. For example, say ".highlight-box" instead of ".bundle-product-discount-box". Coding in this way means that you can re-use your existing style-sheets when you role out side-businesses. For example, we started out selling law notes but recently moved into law tutors. Our old CSS classes had names like ".download_document_box", a class name that makes sense when talking about digital documents but would only confuse when applied to the new domain of private tutors. A better name that fits both existing services — and any future ones — would be ".pretty_callout_box".
Avoid naming CSS classes after specific grid information. There was (and still is) a dreadful anti-pattern in CSS communities whereby designers and creators of CSS frameworks (cough Twitter Bootstrap ) believe that "span-2" or "cols-8" are reasonable names for CSS classes. The point of CSS is to give you the possibility to modify your design without affecting the markup (much). Hardcoding grids sizes into the HTML thwarts this goal, so it is advised against in any project expected to last longer than a weekend. More on how we avoided grid classes later.
Split your CSS across files . Ideally you would split everything into "components"/"widgets" and then compose pages from these atoms of design. Realistically though, you'll notice that some of your website pages have idiosyncrasies (eg a special layout, or a weird photo gallery that appears in just one article). In these cases you might create a file related to that specific page, only refactoring into a full-blown widget when it becomes clear that the element will be re-used elsewhere. This is a tradeoff, one that is motivated by practical budgetary concerns.
Minimise nesting. Introduce new classes instead of nesting selectors. The fact that SASS removes the pain of repeating selectors when nesting doesn't mean that you have to nest five levels deep. Never over-qualify a selector (eg don't use "ul.nav" where ".nav" could do the same job.) And don't specify HTML elements alongside the custom class name (eg"h2.highlight"). Instead just use the class name alone and drop the base selector (eg the previous example should be ".highlight"). Over-qualifying selectors doesn't add any value.
Create styles for HTML elements (eg "h1") only when styling base components which should be consistent in the whole application. Avoid broad selectors like "header ul" because it's likely that you have to override them in some places anyway. As we keep saying, most of the time you want to use a specific, well-named class whenever you want a particular style.
Embrace the basics of Block-Element-Modifier. You can read about it for example on here. We used it quite lightly, but still it helped us a lot in organising CSS styles.
You should look at BEM .
理论
BEM is an attempt to provide a set of instructions for organising and naming css selectors in an attempt to make things more re-usable and modular and to avoid clashes between selectors of the sort that often leads to spaghetti code and specificity headaches.
When it's used correctly it actually has some very positive effects.
- Styles do what you expect when they're added to an element
- Styles don't leak and effect only what they're added to
- Styles are completely decoupled from document structure
- Styles don't need to be forced to over-ride each other
BEM works well with SASS to bring an almost object oriented style to CSS. You can build modular files, that handle the display of a single UI element and contain variables, such as colours and 'methods' such as how internal elements are handled. While a hardcore OO programmer might balk at this idea, in fact, the applied concepts bring in a lot of the nicer parts of OO structures, such as modularity, loose coupling and tight cohesion and context free re-usability. You can even build in a way that looks like an encapsulated object by using Sass and the & operato r.
A more in depth article from Smashing Magazine can be found here ; and one from Harry Roberts of CCS Wizardry (who anyone involved in css should have a read of) is here .
在实践中
I've used this, several times, along with having used SMACSS and OOCSS meaning I have something to compare them too. I've also worked in some big messes, often of my own, inexperienced creation.
When I use BEM in the real world I augment the technique with a couple of extra principles. I utilise utility classes – a good example is a wrapper class:
.page-section { width: 100%; } @media screen and (min-width: 1200px) { margin: 0 auto; width: 1200px; }
And I also rely somewhat on the cascade and specificity. Here the BEM module would be .primary-box and the .header would be the context for a specific over-ride
.header { .primary-box { color: #000; } }
(I try my hardest to make everything as generic and context free as possible, meaning a good project almost everything is in the modules which are re-usable)
One final point I'd make here is that however small and un-complex your project may appear you should do this from the start, for two reasons:
- projects increase in complexity, so laying good foundations is important, css included
- even a project that appears simple because it's built on WordPress has little JavaScript can still be very complex in the CSS – OK, you don't have to do any server side coding, so that part is simple, but the brochure-wear front end has twenty modules and three variations of each: you've got some very complex css there!
Web Components
In 2015 we are starting to look at Web Components. I don't know a huge amount about these yet, but they look to bring all front end functionality together in self contained modules, effectively trying to apply the sorts of principles from BEM to the front end as a whole and componentise dispersed but wholly coupled elements such as DOM fragments, Js (MVC) and CSS that all build the same UI widget.
By doing this theyb will address some of the original issues that exist with css which we've tried to solve with things like BEM, while along the way making some of the other front end architecture more sane.
There's some further reading here and also a framework Polymer here which is well worth a look
最后
I also think this is an excellent, modern best practice css guide – designed specifically for stopping large css projects from getting messy. I try to follow most of these.
I would recommend you to look at "Compass Style" CSS framework .
there is some great material here and some have taken allot of time in answering this question however when it comes to either seperate or individual style sheets I would go with seperate files for development and then move into have all your generic css used across the sited merged into a single file when deployed.
this way you have the best of both worlds, increases performance (less HTTP requests being requested from the browser) and seperation of code concerns while developing.
