BEM是块（block）、元素（element）、修饰符（modifier）的简写，由Yandex团队提出的一种前端css命名方法论。 BEM命名约定的模式是：
.block{} or .block-index{}//一级组件或元素（全部是小写字母或数字，名称中的不同单词用单个连字符（-）分隔） .block__element{}//.block的后代（两个下划线） .block--modifier{}//.block的状态（两个连字符）优势：代码更易于阅读和理解，适合多人协作开发！ 不足：这种命名方式太长了，写的累。可以用sass或者less。 例： 头部导航：.header__nav 导航被选中：.header__nav–active
OOCSS表示的是面向对象CSS（Object Oriented Css），是一种把面向对象方法学应用到CSS代码组织和管理中的实践。 原则： 1.外观和结构分开。 2.容器和内容分开。 例：
<div class="media"> <a href="http://oocss.org/" class="img"> <img src="https://placehold.it/50x50"/> </a> <div class="bd"> OOCSS media object </div> </div> .media { margin: 10px; } .media, .bd { overflow: hidden; } .media .img { float: left; margin-right: 10px; } .media .img img { display: block; } .media .imgExt { float: right; margin-left: 10px; }SMACSS表示的是可扩展和模块化CSS（Scalable and Modular Architecture for CSS）。 SMACSS的核心是分类CSS规则，通过分类，我们可以将CSS规则归为不同的模式，并对每种模式定义更好的实践。SMACSS将CSS规则分为以下5类：
Base：不管element是否在页面上，它都应该长这样。 例：html, body, form { margin: 0; padding: 0; }Layout：负责页面的布局，layout可以包含一个或多个modules。Module：模块化的，可重用的CSS规则。它们可以是菜单，弹出框，产品列表等等。State：layouts或modules的一个特殊的状态，hidden或是expanded，active或是inactive，不同屏幕下的尺寸Theme：所有layouts和modules的look and feel。当然，很多网站不需要Theme.css来提供更多的网站主题。对于layout规则，一般使用l-或layout-作为前缀。对于state规则，一般使用is-作为前缀，比如.is-hidden或.is-collapsed。modules规则作为最主要的一类css规则，如果使用module-作为前缀，会显得有些冗余，所以SMACSS建议直接使用module名称，而不需要任何前缀。
例：
/* Example Module */ .example { } /* Callout Module */ .callout { } /* Callout Module with State */ .callout.is-collapsed { } /* Form field module */ .field { } /* Inline layout */ .l-inline { }ACSS 表示的是原子化 CSS（Atomic CSS），是 Yahoo 提出来的一种独特的 CSS 代码组织方式，应用在 Yahoo 首页和其他产品中。 原则： 把 CSS 样式打散成尽可能小的部分，每个 CSS 类只对应一条样式规则，从而达到最大化的可复用性。比如 CSS 类 M(10px)所对应的样式规则是 margin: 10px。 例：
<div class="BfcHack M(10px)"> <a href="http://oocss.org/" class="Fl(start) Mend(10px)"> <img src="https://placehold.it/50x50"/> </a> <div class="BfcHack"> OOCSS media object </div> </div> .BfcHack { display: table-cell; width: 1600px; *width: auto; zoom: 1; } .M\(10px\) { margin: 10px; } .Fl\(start\) { float: left; } .Mend\(10px\) { margin-right: 10px; }好处：所生成的 CSS 文件只包含必须的内容，而且冗余很少，可以减少 CSS 文件的尺寸，提高性能。 缺点：在于它与大多数开发人员所理解的最佳实践差异很大，可能不容易被接受。
不论是哪一种，都有它的优点和缺点。没有好坏之说，选择适合的自己的就好。没有使用命名格式习惯的前端小伙伴可以去了解一下。
代码规范很重要，每种语言都有自己的规范，建议开发团队，都制定对应的代码规范，大家都去执行，不仅有助于自身的成长，还可以促进团队合作，降低维护成本。
