剛開始寫 CSS 時，我們都知道要有意義的命名，但即使命名都有自己的意義，卻發現選擇器之間有很多重複的屬性，完成第一份作業後，就有問彭彭老師，老師就提到選擇器的命名規則是滿值得討論的議題，並讓我查詢「css bem naming」，我就開始調查，CSS 怎麼樣才是好命名，並查學習一些常見網頁的命名方式。 - 重要的命名觀念 - BEM - KKBOX 的導覽列分解 - KKBOX 的導覽列總結 - 參考資料 ### 重要的命名觀念 1. 抽象化命名，例如: ```left``` 就只能放在左邊，改為 ```aside``` 就可以放在左右 2. 避免針對性命名，例如: 作業的歡迎橫幅 ```welcome```，可以改為 ```banner``` 內容就不一定是歡迎 3. 狀態命名，例如: 導航欄連結在當前頁面狀態 ```menu-item``` 加上 ```is-active```，其他頁面則只有 ```menu-item``` ### BEM Block Element Modifier (BEM) 是一種為了讓 CSS 類別更好維護的**命名方式** 1. Block 區塊 ```.block {}``` 主要負責描述大範圍功能，例如 ```header``` 或 ```container``` 2. Element 元素 ```.block__element {}``` 區塊的小部分，區塊可以不包含元素，但元素一定要包含在區塊，用於表達目的，中間用**雙底線**連結 例如 ```list__item``` 或 ```navbar__toggler``` 3. Modifier 修飾器 ```.block__element--modifier {}``` 區塊或元素的狀態，同一個區塊或元素可能有多種狀態，使用修飾器表達，中間用**雙中線**連結 例如 ```nav__item--active```、```star--active``` 或 ```star--inactive``` ### KKBOX 的導覽列分解 1. KKBOX 導覽列分為兩個選擇器，並在寬度 1024 切換 | | Mobile | Desktop | | -------- | -------------------- | -------------------- | | 0 ~ 1024 | ```display: flex``` | ```display: none``` | | 1024 ~ | ```display: none``` | ```display: flex``` | ``` pm-header ├─ pm-mobile-header └─ pm-desktop-header ``` | | | :-: | |  | | 圖1 pm-header | |  | | 圖2 pm-desktop-header | |  | | 圖3 pm-mobile-header | 2. 桌面版本裡面的 pm-container 有兩個區塊，位於旁邊的 pm-header-aside，和位於另一端的 pm-header-menu ``` pm-header ├─ pm-mobile-header └─ pm-desktop-header └─ pm-container* ├─ pm-header-aside* └─ pm-header-menu* ``` | | | :-: | |  | | 圖4 pm-container| |  | | 圖5 pm-header-aside| |  | | 圖6 pm-header-menu | 3. 在旁邊的 pm-header-aside 裡面只有一個 pm-logo ``` pm-header ├─ pm-mobile-header └─ pm-desktop-header └─ pm-container-menu ├─ pm-header-aside | └─ pm-logo* └─ pm-header-menu ``` | | | :-: | |  | | 圖7 pm-logo | 4. 而 pm-header-menu 包含的東西就比要多，有 pm-drop-down、pm-search-button 和普通的 a - pm-drop-down: 下拉式選單，例如: 特色功能、娛樂情報等 - pm-search-button: 搜尋按鈕 - a: 非下拉式選單，例如: 訂閱方案和下載 ``` pm-header ├─ pm-mobile-header └─ pm-desktop-header └─ pm-container-menu ├─ pm-header-aside | └─ pm-logo └─ pm-header-menu ├─ pm-drop-down* ├─ pm-search-button* └─ a* ``` | | | :-: | |  | | 圖8 pm-drop-down | |  | | 圖9 pm-search-button | |   | | 圖10 普通的 a | 5. 利用狀態顯示顏色，像是搜尋按鈕和下載都是藍色，使用選擇器 pm-highlight | | | :-: | |  | | 圖11 帶有 pm-highlight 的 pm-search-button | |  | | 圖12 帶有 pm-highlight 的 a | 6. 接下來介紹 pm-mobile-header，裡面都是圖片 pm-menu-icon、pm-search-icon、pm-logo 其中 pm-logo 是 mobile 和 desktop 共用選擇器 ``` pm-header ├─ pm-mobile-header | ├─ pm-menu-icon* | ├─ pm-search-icon* | └─ pm-logo* └─ pm-desktop-header └─ pm-container-menu ├─ pm-header-aside | └─ pm-logo └─ pm-header-menu ├─ pm-drop-down ├─ pm-search-button └─ a ``` | | | :-: | |  | | 圖13 pm-menu-icon | |  | | 圖14 pm-search-icon | |  | | 圖15 pm-logo | 7. 最後，當 pm-menu-icon 和 pm-search-icon 被點擊都會展開左或右側的菜單，所以他們都有狀態 pm-active， 這個狀態將背景圖片都改為叉叉，複寫原本的選單或放大鏡 | | | :-: | |  | | 圖16 帶有 pm-active 的 pm-menu-icon | |  | | 圖17 帶有 pm-active 的 pm-search-icon | ### KKBOX 的導覽列總結 用 BEM 角度看 KKBOX 的導覽列，從中看到 Block 中都是可被單一重複使用，Element 需要依賴在特定 Block 之下，Modifier 則可以直接附加在 Block 或 Element - Block: pm-header、pm-menu-icon、pm-search-icon、pm-logo、pm-drop-down、pm-search-button - Element - pm-header 的 element: pm-mobile-header、pm-desktop-header - pm-desktop-header 的 element: pm-header-aside、pm-header-menu - Modifier: pm-highlight、pm-active ### 參考資料 - [KKBOX](https://www.kkbox.com/tw/tc/) - [竹白記事本-BEM，CSS 設計模式](https://chupainotebook.blogspot.com/2019/05/bemcss.html) - [鐵人賽 5 - CSS 的命名技巧](https://www.casper.tw/css/2016/12/05/css-naming/)