一个好的程序员的web前端分享值得参考的css理论：OOCSS、SMACSS和BEM最近在The看到文章ModularCSStypographySassWay，发现文章开头提到了OOCSS、SMACSS、BEM这三个词。“如果你不知道这些是什么，请不要继续阅读。”想起作者友善（gāolěng）的提醒，身为围观的人群，自然要应声。所以，本文在这里分别介绍它们。 OOCSS、SMACSS、BEM都是css相关的方法论（准确的说BEM应该是一套完整的前端开发理论，不局限于css），可以作为实现优秀css架构的指南。 css很容易理解，但应用和维护起来并不简单。CSS可能是各种开发场景中的问题点。因此，我们应该认真仔细地编写和组织css。OOCSS OOCSS（ObjectOrientedCSS），字面意思是面向对象的CSS，是NicoleSullivan提出的css理论。它的两个主要原则是： Separatestructureandskin(separatestructureandskinTopic)Separatecontainerandcontent(separatecontainerandcontent) 举个例子来说明。请看以下图文排列： 本作的主人公是帝国北部地方贵族施瓦泽男爵的养子，帝国特等阶级“七组”成员。托尔兹军事学院。.media{1.
内边距：10px;
2.
3.
.media:after{
4.
显示：表格；
5.
clear:both;
6.
content:"";
7.
}
8.
.media-image-container{
9.
float:left;
10.
margin-right:10px;
11.
}
12.
.media-image{
13.
显示：块；
14.
}
15.
.media-body{
16.
溢出：隐藏；
17.
}
18.
字体大小="3"> .media-shadow{
19.
box-shadow:1px1px3pxrgba(0,0,0,.5);
20.
}
以上代码使用media来表示这种图形排列的页面元素。如果把组成它的html、css和javascript（如果有的话）看成一个整体的话，它就相当于一个组件，或者说是一个对象。它可以在网站的任何地方重复使用。这如何体现OOCSS的两大原则？ Separatestructureandskin Separatestructureandtheme是将一些视觉风格效果（如背景，颜色）作为一个单独的“主题”应用。上面的例子中，阴影效果并没有直接写在mediastylerules中，而是单独写在一个名为media-shadow的类中。因此，它成为一个可选择的、可拆分的主题。如果您不需要相应的主题，则不要添加任何内容。如果需要，添加相应的类。这就是思维方式。 分离容器和内容 分离容器和内容要求页面元素不依赖于它们所在的位置。在上面的例子中，css选择器很短，没有继承选择器（例如.header.media{}），所以图形和文本元素可以在任何地方使用并且具有一致的外观。 如果你需要让这个组件在特定的地方看起来不一样，继续给这个组件添加类，并使用“不同的部分”作为一个可配置选项。组件的外观仍然与其位置无关。 操作指南 可见OOCSS风格的css可以描述为两点： 加入类，不使用继承选择器 OOCSS追求组件的复用。体现具体内容。SMACSS SMACSS（Scalable&ModularArchitectureforCSS）是JonathanSnook提出的css理论。主要有以下三个原则： CategorizingCSSRules（为css分类）NamingRules（命名规则）MinimizingtheDepthofApplicability（最小化适应深度） 这些原则是什么意思？ 分类CSS规则 这是SMACSSCore。SMACSS认为css有5大类，分别是： BaseLayout(MajorComponents)Module(MinorComponents)StateTheme BaseRules，基本样式，描述页面元素在任何场合的默认外观。它的定义不使用类和ID。CSS重置也属于这一类。 布局规则，布局风格。它与以下模块规则一起描述了页面中的各种特定元素。元素分为层级，LayoutRules属于较高层，可以作为下层ModuleRules元素的容器。左右栏、网格系统等都是布局样式。 ModuleRules，模块样式。它可以是产品列表，导航栏。一般来说，ModuleRules定义的元素都放在上面提到的LayoutRules元素中。模块是独立的，可以在各种场合重复使用。 StateRules，状态样式，描述任意元素在特定状态下的外观。例如，消息框可能有成功和错误状态，导航栏中的任何项目可能有当前状态。 继续OOCSS中的例子，下面添加is-hidden使元素不显示属于StateRules： ...1.
复制代码
2.
.is-hidden{
3.
显示：无；
4.
}
ThemeRules，主题风格，描述页面主题的外观，一般指颜色，背景图片。ThemeRules可以修改前4类的样式，并且应该和前4类分开（方便切换，即“换肤”）。SMACSS的ThemeRules不需要使用单独的类名，也就是说你可以在ModuleRules中定义.mod{}，然后在ThemeRules中使用.mod{}来定义需要修改的部分。 NamingRules NamingRules就是在思考类的命名等的时候，考虑用命名来体现对应的类。根据前五种，LayoutRules使用l-或layout-等前缀，例如：.l-header,.l-sidebar。 ModuleRules使用模块本身的名称，例如图文排列的.media、.media-image。 状态规则以is-为前缀，例如：.is-active,.is-hidden。主题规则如果作为单独的类使用，使用theme-前缀，比如.theme-a-background，.theme-a-shadow。 BaseRules不使用class和ID，而是基于标签选择器，如p和a，没有命名。 命名规则无需严格遵守，其他约定可根据实际情况和自己的喜好进行。记录自己的约定（写文档），然后遵守是可行的。 MinimizingtheDepthofApplicability 直译就是最小化适用的深度。用简单的描述来说明： /depth1/1.
.sidebarulh3{}
2.
/depth2/
3.
.sub-title{}
上下端css的区别在于html和css的耦合程度。可以想象，由于上述样式规则使用了继承选择器，实际上对HTML的结构有一定的依赖性。如果将h3元素移动到另一个位置，它可能不再具有这些样式。相应的，下面的样式规则只有一个选择器，所以不依赖于具体的HTML结构，只要给元素添加一个class，就可以得到对应的样式。 当然继承选择器是有用的，可以减少相同命名带来的风格冲突（多人协作开发中经常出现）。但是我们也不要过度使用，在不引起样式冲突的允许范围内，尽量使用不限制html结构的短选择器。这就是SMACSS的最小适配深度的意思。 看来这和OOCSS分离容器和内容的原理很像啊。MainGoals SMACSS专注于两个主要目标： 更加语义化的html和css减少对特定html结构的依赖BEM BEM，即Block，Element，Modifier，是由Yandex开发的前端（俄罗斯最著名的互联网公司）开发团队提出的开发理论。BEM通过Block、Element和Modifier来描述页面。 Block是页面中一个独立的块，可以在不同的场合重复使用。每个页面可以看作是由多个块组成的。 元素是构成块的元素，只在对应的块内才有意义，依赖于块的存在。 Modifier描述了Block或Element的属性或状态。同一个块或元素可以有多个修改器。 这三部分的结合可以体现在类命名上，从而为开发者提供一种更友好、更有意义的CSS组织方式。它的形式是： .block{}1.
.block_modifier{}
2.
.block__element{}
3.
.block__element_modifier{}
回到前面OOCSS图文排版的例子，BEM的写法是： 本作品的主人公，帝国北部地方贵族施瓦泽男爵的养子，也是特科班ThorzMilitaryAcademygroup”的“Ⅶ”成员。 这种写法的好处是在班级命名中以约定俗成的形式携带了更多有用的信息。多人合作时，新接手项目的人也可以很容易的从类命名上区分哪些部分是Blocks，哪些是对应的Elements，哪些是Modifiers，进一步推断HTML的哪些部分是可以独立使用的。 BEM是一个完整的前端开发理论，这里仅介绍提到了它使用的CSS类命名规则。可见BEM的命名规则可以让代码更容易维护。 这些理论真的适用吗？ 是的，而且它们有效。但是，请不要被太乐观了。任何理论都是just尝试解决css编写维护问题，总结经验。在实际的具体项目中，你可能还会遇到困惑。这些理论最重要的是提供了一种思维方式（即使它们也提供了开发模型的代码基础），你可能不会直接应用它们，但你应该通过它们意识到你在写代码之前需要多思考. 不是直接写css，而是使用less、sass等预编译器，也需要合理的代码编写和组织方式，因为可以从编译出来的css中分析出来，所以原理是一样的。 结语 在完成和写正文之前，我对OOCSS只有一个初步的了解，而对其他两个没有印象……（嗯，其实很正常） 这里面的三个理论文章各有各的Style，没有好坏之分，写css时值得参考。如果可能的话，我强烈建议你根据这些理论背后的意图想一个适合你的方法。
