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