Atitit OOCSS vs bem

通常的導航欄寫法，結構應該會像上面的 HTML 範例同樣，若是要對那些 <a> 標籤訂義樣式，CSS 的寫法可能寫成.nav--main ul li a {}，這種寫法先無論效能上的問題，能夠看出來過分地依賴元素標籤的結構，有可能以後 HTML 結構改變，這個 CSS 就必須跟著重構，形成維護上多餘的成本。

若從這個例子來考量，原則上 <a> 都必定會接在 <li> 標籤的後面，一個 <li> 只會有一個 <a>，一般不會獨立存在，那就能夠寫成 .nav--main a {}，會是比較好的寫法，甚至是直接給 <a> 加上 class nav--main_item。後者是 OOCSS 所提倡的用法。

這樣的寫法，一來效能理論上比較好（我沒辦法驗證），二來層次比較單純。

2.3.2. 增長 CSS class 的重複使用

在 OOCSS 的觀念中，強調重複使用 class，而應該避免使用 id 做爲 CSS 的選擇器。這種想法就是像
OOP
儘可能抽離重複的程式碼，例如如下這個例子，這是兩種按鈕的 CSS 樣式屬性：

.button {

display: inline-block;

padding: 6px 12px;

color: hsla(0, 100%, 100%, 1);

&.button-default { background: hsla(180, 1%, 28%, 1); }

&.button-primary { background: hsla(208, 56%, 53%, 1); }

}

上面的 CSS 將兩種不一樣樣式的 button，抽離出重複的部份，而且定義在同個 class
上。所以，要使用這樣的樣式，HTML 的寫法可能長這個樣子：

1 2	<a class="button button-default"> <a class="button button-primary">

先用 button 宣告此爲一個按鈕的樣式，再用 button-default 或 button-primary 做爲按鈕底色的區別。這麼作能夠維護成本變得比較低，例如：想要改網站上全部按鈕的大小，就只要修改 .button 的 padding 而已。

3. OOCSS

OOCSS,字面意思是面向對象的CSS，是由Nicole Sullivan提出的css理論,雖然說是理論，實則更像一種程序員間約定的規範：
* Separate structure and skin（分離結構和主題）減小對 HTML 結構的依賴
* Separate container and content（分離容器和內容）增長樣式的複用性

3.1. 減小對 HTML 結構的依賴

<ul>

</ul>

</div>

· 1

· 2

· 3

· 4

· 5

· 6

· 7

通常咱們在書寫列表的時候結構大概會如上面的結構所示，這種時候咱們若是要對a修改樣式可能常常會用.container-list ul li a這種方式來選擇，一方面這種寫法在效率上比較拙劣，另外一方面一旦咱們在項目後期過程當中對列表中的html結構進行了重構，這意味着咱們同時也須要對css進行重構，使html與css的耦合性變得十分強，形成維護上的困難，也要避免不必的嵌套地獄

而OOCSS推薦的寫法是在a標籤內加上list-item樣式,此時便能經過.container-list .list-item的方式來控制解耦