命名禁止縮寫
- 精簡扼要地對
class命名，請勿使用自定義縮寫。 -
class name的命名必須是行爲、有語意的。
禁止在非特殊情況下寫！important
- CSS本身有權重設計，任意地使用
!important會造成權重混亂而無法維護。
不可輕易限定寬高
- 用戶可以自行設定自己的瀏覽器，例如
Android手機可以設定顯示字體大小，寫死的高度會讓字體相互重疊。
RWD失效
- 移動設備的高度是無限的，寬度是有限的。
- 請不要把寬寫死。
img請讓它自動縮放
- 請不要替
img的容器設定寬或高，讓它根據設備自行縮放。 - 請使用
bootstrap的img-responsive。 -
如果確實要用：
width: 100%; height: auto; - 如果要給
img border-radius設定樣式，請使用父元素控制行爲，保持img只載入圖片，沒有樣式。
優先使用grid排版
- 請不要花很多時間在寫
media query，設定一堆breakpoint，自己寫組件樣式，自己控制每種設備上的容器寬度。 - 請使用
grid system，這些都是已經成熟的框架，而且有些也已經幫你處理了瀏覽器相容問題。
不可直接over write或在原本框架的class增加內容
- 直接寫一個新的
class，不要覆蓋原有的設計。 - 不要再已有的
class上添加樣式，請額外單獨寫一個。
設計RWD網站，請遵循移動設備優先原則
- 設計師的設計順序，以桌面版優先，再設計手機版。
- 前端工程師拿到視覺圖，開始寫
HTML/CSS時以手機版爲第一優先。
手機開啓網頁很吃手機效能和網絡狀況，前端工程師一開始就以手機版爲優先，可以讓HTML一開始載入，使用最少的效能快速載入網頁。當開始製作桌面版時，只會少許跑版，做適當微調即可。
相反，如果先製作桌面版，當手機版畫面被切掉或是跑版，需要花更多時間去調整。再來是iPhone手機的
retina，會將圖片放到手機上時自動做兩倍縮小，在一開始製作時即可發現圖片載入是否吃效能。爲了讓圖片能在iPhone上有更好的體驗，建議移動版優先。
不可使用html tag selector
- 請直接定義
class的樣式，不需要指定html tag。
層級不可以超過三層
- 超過三層表示耦合度太高，不具有彈性、可維護性。
用一樣的element時不要把一堆東西全部寫在裏面，請把排版相關的獨立出來
- 把
border-radius寫在img上面，請把img保持乾淨。定位，例如position: absolute;
不要隨意none掉畫面上的tag或行爲
- 請注意如果要
none掉一些樣式，請依照使用程度決定。 - 使用程度遍佈整個網站，請直接使用
reset.css - 使用程度中等以下，請定義一個
class
reset.css
- 常見的
a tag不要有underline -
list消除原有樣式 - 請在
reset.css上定義，並且設爲第一載入次序
有JavaScript行爲的class可以爲命名加入name space
#js-project-show {}請勿任意使用br hr tag
-
br是換行，請使用在p tag裏面，當p裏面文字過多時可以使用。 -
hr是快速劃線，但是即將被淘汰，請直接使用border寫在class裏面。 -
br必須去思考父區塊是不是display: block;，如果要換行，應該思考是不是下一段文字。 - 線條請都是用
border去寫。