css書寫規則總結

1. JavaScript鉤子使用的class不能是css class，要加j或j-前綴

2. 選擇器

　　2.1 css選擇器儘可能簡短，層級要少，最好是1-2層

　　例如：.nav{} 優於 ul.nav{}

　　2.2 不要依賴於html層級結構

　　例如：.nav a{} 優於 .nav li a{}

　　2.3 不用Id選擇器，複用度過低

　　2.4 用class命中元素，而不是標籤

3. 不聲明高度。高度僅僅用於尺寸固定的東西，例如圖片和css sprite.
而p,ul,div等元素上不該當聲明高度，須要時，優先使用line-height,更加靈活

4. 簡寫

background:red是很差的寫法。由於其同時聲明瞭
background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;
應當用 background-color:red

只修改底邊距的話，margin-bottom:0 優於 margin:0

5.使用Sass等預處理器，減小嵌套層次，最好2層之內

6. BEM命名法

BEM，即Block， Element， Modifier，是由Yandex（俄羅斯最著名的互聯網企業）的開發團隊提出的前端開發理論。BEM經過Block、Element、Modifier來描述頁面。

Block是頁面中獨立存在的區塊，能夠在不一樣場合下被重用。每一個頁面均可以看作是多個Block組成。

Element是構成Block的元素，只有在對應Block內部才具備意義，是依賴於Block的存在。

Modifier是描述Block或Element的屬性或狀態。同一Block或Element能夠有多個Modifier。

這三部分結合在一塊兒，能夠體如今class命名上，從而爲開發者提供更友好、更有意義的css組織方式。其形式是：

.block { }
.block_modifier { }
.block__element { }
.block__element_modifier { }

7. OOCSS

Separate structure and skin

分離結構和主題是在於將一些視覺樣式效果（例如background、color）做爲單獨的「主題」來應用。在上面的例子中的陰影效果，沒有被直接寫在media的樣式規則內，而是被單獨寫在了一個名爲media-shadow的class中。所以，它成爲了可選擇、可拆分的主題。若是不須要對應主題，什麼也不要加，若是須要，加上對應的class，就是這樣的思路。

Separate container and content

分離容器和內容要求使頁面元素不依賴於其所處位置。在上面的例子中，css的選擇符都很短，無繼承選擇符（例如.header .media { }），因此，這個圖文排列的元件，能夠在任何地方使用，且會有一致的外觀。

若是須要在特定的地方讓這個元件看起來不同一些，繼續爲這個元件增長class，將「不同的部分」做爲可配置的選項。元件的外觀仍不依賴其所處位置。