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，將“不一樣的部分”作為可配置的選項。元件的外觀仍不依賴其所處位置。