# 其他命名法
此處為連結
[小駝峰 EX：headerArticle
大駝峰 EX：HeaderArticle
蛇型 EX：header_artucle_p
肉串 EX：header-aeticle-p](https://hackmd.io/@Heidi-Liu/note-common)

---

# BEM
BEM 是由 [Yandex](https://zh.wikipedia.org/zh-tw/Yandex) 團隊提出來的一種==創新命名 Class 名稱==的設計模式。把原本的 class 名稱用不同的區塊來做寫法上的區分，讓人更容易閱讀，以達到 CSS 命名語義化、可重用性高、後期維護容易、加載渲染快的要求。

### 名稱構成
源於該方法學的三個組成部分英文字首，分别為：
* **Block** 區塊
* **Element** 元素
* **Modifier** 修飾符

### 連接符
在選擇器中，由以下三種符號來表示擴展的關係：

- -中線：僅作爲連字符使用，表示某個塊或者某個子元素的多單詞之間的連接記號。
- __ 雙底線：用來連接塊和塊的子元素。
- -- 雙中線：用來描述一個塊或者塊的子元素的一種狀態

<div class="product">
  <div class="menu">
    <li class="menu__item menu__item--active"><a href="#"></a></li>
    <li class="menu__item"><a href="#"></a></li>
    <img src="https/....." class="menu__image">
  </div>
</div>

如上圖
: **Block**：menu 代表菜單這個區塊
**Element**：item、image 代表這個菜單的子元素, 名稱需能簡單的描述出，其結構、佈局或意義，並且在語義上與 Block 相關聯。
**Modifier**：active 當區塊或元素因為外觀、狀態或行為改變時，那這個型態轉變就是修飾符。

除了對於名稱好管理外, 對未來學到sass時 會有用處

EX：
: CSS：main__infor
SASS：＆__infor

省掉前墜, 會提昇效率

https://hackmd.io/@chupai/SkeNVToGr
此文詳細敘述規則

EX：
: main-tool__button--active
在上面例子中
main 表示這個東西所在的層
-tool代表這個詞完整名稱叫做 main tool 只是不能留空
——雙底線表示這個東西是什麼
--表示這個東西為做出的行為 但不包含改變性質