BEM命名规则和规范

BEM命名规则：http://segmentfault.com/a/1190000000391762

class命名方案：http://www.w3cplus.com/css/css-class-name.html

经常使用的CSS命名规范：http://www.html5cn.org/article-7600-1.html

通用CSS笔记、建议与指导：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md

CSS代码重构和优化之路：http://luopq.com/2016/01/05/css-optimize/

CSS进阶：http://caibaojian.com/toutiao/6098

 

切勿将标记 CSS 样式的 class 用做 JavaScript 钩子。把js行为与样式混在一块儿将没法对其分别处理。

若是你要把js和某些标记绑定起来的话，写一个js专用的 class。简单地说就是划定一个前缀 .js- 的命名空间，例如 .js-toggle，.js-drag-and-drop。这意味着咱们能够经过 class 同时绑定 JS 和 CSS 而不会由于冲突而引起麻烦。

如：<div class="is-sortable js-is-sortable"></div>

命名约定的模式以下：

.block{}

.block__element{}

.block--modifier{}

.block 表明了更高级别的抽象或组件。

.block__element 表明.block的后代，用于造成一个完整的.block的总体。

.block--modifier表明.block的不一样状态或不一样版本。

 

CSS书写顺序：

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其余(animation, transition等)
//表明当前全部的标签 通配符（兼容任何浏览器打开页面内容的边距都为0）。目前最经常使用的是Normalize.css ，它是一个可定制的 CSS 文件，使浏览器呈现的全部元素，更一致和符合现代标准。它正是针对只须要统一的元素样式，依赖于研究浏览器默认元素风格之间的差别，精肯定位须要重置的样式。

 

-ms-（私有属性）；//IE

-moz-（私有属性）；//Firefox 

-webkit-（私有属性）；//Safari 和 Chrome 

-o-（私有属性）；// Opera

如：-moz-column-count:4;（分红4块显示） // Firefox

 

格式：1.先写带有浏览器私有标志的，后写W3C标准的。

2.使用16进制表示颜色值。

3.省略值为0时的单位

4.最后一个值也以分号结尾
5.根据属性的重要性按顺序书写 

参考网址：http://nec.netease.com/standard