前端技術棧的日益豐富,各位媛兄更多的是把技術專注點放在了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
去寫。