[筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒

撰寫程式的人們的日常頭痛問題之一,就是如何命名變數。變數命名的好,可以省下日後維護時的大量時間在研究先前的邏輯上。這邊筆記下這個段落部分有提及的一些設計巧點。
sass logo


課程對應章節

Course 48 ~ Course 54 (全部一共有 72 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/ueo7bm2

內容

命名

  1. 駝峰式大小寫是程式編寫的命名規則之一,你可以使用小駝峰(lowerCase)或是大駝峰(UpperCase)來寫你的CSS,只要你前後一致或是符合公司規範。
  2. 使用 “-” 或是 “_” ?這點完全是看你開發者喜好,或是大家談好一套規則來遵守即可。
  3. 改以工具名稱命名,像是 .list .button 。
  4. 採用主色方式來設計色彩,像是 .text-primary{color:red;}
  5. 外部可以保留 .header, .footer 之類的命名,不過其他部分可以利用格線系統來撰寫排版。

BEM

Block, Element 和 Modifier 所組成的一個方法學 (Methodology),以下有個簡單範例:

BEM 搭配 SCSS,寫起來並不會太過於困難,如同以下範例:


Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • 按讚加入粉絲團

    延伸閱讀