前端技術棧的日益豐富，各位媛兄更多的是把技術專注點放在了JavaScript與框架上，對CSS有深入探究的少之又少，不知道別的公司什麼樣，我們部門關於寫HTML+CSS的，直接就會丟給公司的實習生來完成，寫的說不上好，但也不算差，沒有什麼亮點，而且CSS寫的也不是那麼規範，很不利於後期的維護與修改，今天我們就來聊一聊CSS程式碼上的一些規範，你可以不親自去寫CSS，但是在指導新人的時候還能裝一把大牛不是。
對樣式命名的時候不要縮寫
-
精簡扼要地對
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去寫。
關注更多高質量精彩技術文章，請關注公眾號：前端社
