CSS書寫規范、順序和命名規則


CSS書寫規范、順序和命名規則 寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里總結一個CSS書寫規范、CSS書寫順序供大家參考
這些是參考了國外一些文章以及我的個人經驗總結出來,我想對寫CSS的前端用戶來說是值得學習的。
一、CSS書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)


二、CSS書寫規范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。


2.去掉小數點前的“0”


3.簡寫命名
很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!


4.16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。


5連字符CSS選擇器命名規范
1).長名稱或詞組可以使用中橫線來為選擇器命名。
2).不建議使用“_”下划線來命名CSS選擇器,為什么呢?
輸入的時候少按一個shift鍵; 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的) 能良好區分JavaScript變量命名(JS變量命名是用“_”)


6.不要隨意使用id
id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復使用,另外id的優先級優先與class,所以id應該按需使用,而不能濫用。


7.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了,比如下圖是添加了“.is-”前綴。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com