推薦大家使用的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書寫規范
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名
很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!
16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。
連字符CSS選擇器命名規范
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器,為什么呢?
- 輸入的時候少按一個shift鍵;
- 瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的)
- 能良好區分JavaScript變量命名(JS變量命名是用“_”)
這里有一篇破折號與下劃線的詳細討論,英文:點擊查看?中文篇:點擊查看
不要隨意使用id
id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復使用,另外id的優先級優先與class,所以id應該按需使用,而不能濫用。
為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了,比如下圖是添加了“.is-”前綴。
CSS命名規范(規則)
常用的CSS命名規則
頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
內容:content
標簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guide
服務:service
注冊:regsiter
狀態:status
投票:vote
合作伙伴:partner
注釋的寫法:
/* Header */
內容區
/* End Header */
id的命名:
1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫,除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。
就 CSS 命名規范,個人喜歡加 -,例如:btn-primary
17年第一踩,收藏這么久,終于拿出來看看了!寫的超贊~
贊一個,長見識了!
逼死強迫癥的節奏
1
不錯
受用了
真是好人啊~~
好?。。。?!
唉。。??戳诉@個才知道,平時自以為是的CSS書寫原來都是錯誤的。只是在得意實現了效果卻不知道規范自己的書寫方法。。。轉走了。
對我來說相當有用,收下了。
css樣式規范
受教咯
CSS樣式規范
CSS樣式規范
謝樓主分享
學習一下
好!
怒轉
書寫css的一些規范. 主要是下面的命名實在太贊. = =. 解決我多年被困擾的問題啊.
轉了,
轉
蠻有用
這是什么軟件里的截圖 啊
麻煩告訴我一下吧
謝謝
下劃線做選擇符名稱有兼容問題能舉個例子么,真沒遇到過。而且在很多編輯器下,劃線支持雙擊,中杠不支持雙擊。
精品?。?!學習了??!
這個要慢慢研究
容器名加中杠沒問題吧?我以前也用過下劃線,現在容易重疊的喜歡用中杠。
恩,好的。非常感謝。呵呵,平時有時候為了效率就沒注意這些。。
非常有用,我發現我自己平時就沒注意這些。。
。。
CSS書寫規范、順序
有很多沒有注意到,很有幫助。
很不錯的文章,規范很重要,無疑節約了一定的學習成本。
“一些瀏覽器已經不允許使用下劃線來命名CSS選擇器(就是不兼容)”想請教下是哪些瀏覽器不允許?另外與js變量會有什么樣的沖突?
很不錯,但是有部分內容不敢茍同。1,書寫順序按照個人習慣就好,如果強制按照一個順序,在添加新屬性的時候,無疑會增加一定的思考。此外,SCSS 等工具的時候,已經不需要編寫很具體的 CSS 了。2,為什么要去掉前面那個 0 ?
幾個拼寫錯誤:指南: guide主導航: mainnav注冊: register