css命名规范
1.BEM命名规范
BEM是块（block）、元素（element）、修饰符（modifier）的简写，由Yandex团队提出的一种前端css命名方法论。
BEM命名约定的模式是：
.block{} or .block-index{}//一级组件或元素（全部是小写字母或数字，名称中的不同单词用单个连字符（-）分隔）
.block__element{}//.block的后代（两个下划线）
.block--modifier{}//.block的状态（两个连字符）
优势：代码更易于阅读和理解，适合多人协作开发！
不足：这种命名方式太长了，写的累。可以用sass或者less。
例：
头部导航：.header__nav
导航被选中：.header__nav–active
2.OOCSS
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;
}
3.SMACSS
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 { }
4.ACSS
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 文件的尺寸，提高性能。
缺点：在于它与大多数开发人员所理解的最佳实践差异很大，可能不容易被接受。
总的来说
不论是哪一种，都有它的优点和缺点。没有好坏之说，选择适合的自己的就好。没有使用命名格式习惯的前端小伙伴可以去了解一下。
代码规范很重要，每种语言都有自己的规范，建议开发团队，都制定对应的代码规范，大家都去执行，不仅有助于自身的成长，还可以促进团队合作，降低维护成本。
