[筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式

章節連結

Sass 在撰寫時,要注意一些常見的 CSS 設計方式,會讓你在撰寫的時候顯得冗長、日後也變得難以維護。
sass logo


課程對應章節

Course 58 ~ Course 61 (全部一共有 72 Courses)

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

內容

1. div 上頭的 class 是具有範圍性的,所有全部的網頁通用格式,可以寫在自定義的 container 中。如此一來,在 <dlv class=”container”></div> 的所有內容,就設定好了基本樣式。
2. 不要寫死高度,而是用 padding 和 margin 去給予上下撐開或是留有適當間距。這在設計 RWD 網頁上,才能保有彈性。
3. 不要用 id=”” 綁定樣式,因為 class 就可以取代其賦予樣式的功能。另外要取得 id=”<idName>” 所用的 “#”,是網頁顯示上用來定位的功能,而且 id 的 CSS 權重比 class 高,這樣日後樣式要父改或是撰寫 JavaScript 來控制網頁 DOM 時,會遇到一些麻煩。
4. 樣式要與內容分離,你若要設定某個 class 讓你的 JavaScript 可以取得,建議另外設前綴+功能 的 class,方便日後維護。


Sass 實戰全攻略系列文章

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

    延伸閱讀

    GA瀏覽人氣:94