###### tags: `前端技能樹`

# CSS設計模式，擺脫義大利麵代碼

當別人說你的程式是義大利麵代碼 (Spaghetti code)，聽起來很好吃，應該是稱讚的意思吧！千萬不要誤會，那是在說你的程式碼雜亂無章、難以理解。

在前面的章節我們學到可以隨意命名 HTML 元素的 ID 和 Class 名稱，**意味著沒有結構化的命名模式下，可能會因為重複命名，需要去解決 CSS 衝突的問題，就一直往下新增 CSS 代碼**，導致程式亂亂的。所以本篇的教學重點就是：建立易讀易寫的CSS代碼規則 — OOCSS / BEM。

## OOCSS

OOCSS (Object Oriented CSS)，**主張用物件的形式管理 CSS 的分類規則，專注在讓組件的重複使用性提升**，並且提出下面兩個主要的原則：

### 結構與樣式的分離
將重複的樣式抽離，獨立成一個組件重複使用。舉例來說如下面的程式碼，紅色的 box 和紅色的 button，那我們就可以把紅色的樣式抽離出來：

CSS

.box {
    width: 200px;
    height: 50px;
}
.button {
    width: 100px;
    height: 50px;
    padding: 10px;
}
.red-skin {
    background-color: red;
}

HTML

<div class="red-skin box"></div>
<button class="red-skin button"></div>

### 容器和內容的分離

將容器內部通用的結構分離。舉例來說如下面的程式碼，Header 雖然在 Section 跟 Footer 區塊都會出現，外觀一樣但安裝的位置不一樣，那我們就可以將 Header 像零件一樣抽離，再另外設定各自安裝的位置：

CSS

.global-header {
    font-size: 28px;
    width:500px;
    height:10px
}
.section-header {
    padding: 10px;
}
.footer-header {
    padding: 5px;
}

HTML

<section>
    <div class="section-header global-header">...</div>
</section>
<footer>
    <div class="footer-header global-header">...</div>
</footer>

## BEM

BEM (Block, Element, Modifier)，**主張劃分網頁區塊，以區塊 (Block)、元素 (Element) 和修飾子 (Modifier) 命名**，用組件的模式去進行介面開發。

### 區塊 (Block)
獨立的頁面元件

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li>...</li>
        <li>...</li>
    </ul>
</header>

### 元素 (Element)

存在於 Block 中不可單獨存在的小元件，使用雙底線 ```__``` 做分隔。

<header class="header">
    <div class="logo">
        <!-- logo中的元素 -->
        <img class="logo__img" />
        <h1 class="logo__title" />
    </div>
    <ul class="menu">
        <!-- menu中的item元素 -->
        <li class="menu__item">...</li>
        <li class="menu__item">...</li>
    </ul>
</header>

### 修飾子 (Modifier)
描述 Block 或 Element 的外觀，不能單獨使用，用單底線 ```_``` 做分隔。

<header class="header">
    <div class="logo">...</div>
    <ul class="menu">
        <li class="menu__item">...</li>
        <!-- menu中的item--active元素 -->
        <li class="menu__item_active">...</li>
    </ul>
</header>

## 小結

**OOCSS 強調的能提升組件的重複使用性、BEM 能讓命名結構更清楚**，最主要的是能**活用兩者的核心規則**，建立易讀易寫的CSS，方便之後維護與管理。這個章節雖然只介紹了這兩種，但其實還有 **SMACSS** 的方式來管理 CSS，建議你都可以了解一下。那今天的介紹就到這，接下來我們會提到最後一個網頁核心技術 — Javascript，那我們就下章再見囉！

👉 如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

### 參考資料
- [Scalable CSS - 介紹OOCSS/SMACSS/BEM](http://sj82516-blog.logdown.com/posts/1077348/finish-css-intro-oocss-smacss-bem)
- [How to Organize Your CSS with a Modular Architecture(OOCSS, BEM, SMACSS)](https://snipcart.com/blog/organize-css-modular-architecture)
- [BEM Document](https://en.bem.info/methodology/quick-start/)
<!-- - [SMACSS](http://smacss.com/) -->