章節連結
撰寫程式的人們的日常頭痛問題之一，就是如何命名變數。變數命名的好，可以省下日後維護時的大量時間在研究先前的邏輯上。這邊筆記下這個段落部分有提及的一些設計巧點。
課程對應章節
Course 48 ～ Course 54 (全部一共有 72 Courses)
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2
內容
命名
- 駝峰式大小寫是程式編寫的命名規則之一，你可以使用小駝峰(lowerCase)或是大駝峰(UpperCase)來寫你的CSS，只要你前後一致或是符合公司規範。
- 使用 “-” 或是 “_” ？這點完全是看你開發者喜好，或是大家談好一套規則來遵守即可。
- 改以工具名稱命名，像是 .list .button 。
- 採用主色方式來設計色彩，像是 .text-primary{color:red;}
- 外部可以保留 .header, .footer 之類的命名，不過其他部分可以利用格線系統來撰寫排版。
BEM
Block, Element 和 Modifier 所組成的一個方法學 (Methodology)，以下有個簡單範例：
|
1 2 3 4 |
.list /*區塊, block*/ .list__title /*區塊內的標題, element*/ .list__img /*區塊內的圖片, element*/ .list__title--color /*區塊內的標題的顏色, modifier*/ |
BEM 搭配 SCSS，寫起來並不會太過於困難，如同以下範例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.list{ &__title{ width:50px; } &__img{ height:100px; &--changeBg{ width:50px; } } } /*編譯結果*/ .list__title { width: 50px; } .list__img { height: 100px; } .list__img--changeBg { width: 50px; } |
