章節連結
Sass 在撰寫時,要注意一些常見的 CSS 設計方式,會讓你在撰寫的時候顯得冗長、日後也變得難以維護。
課程對應章節
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,方便日後維護。