良好的css書寫規范可以提高代碼的閱讀體驗(藍色表常用)
一.css書寫順序
(1)位置屬性position,top,left,rigt,z-index,display,float等
(2)大小width,height,padding,margin等
(3)文字系列font ,line-height,letter-spacing,color-text-align等
(4)背景background,border等
(5)其他animation,transition等
二.字符的命名規范
1長名稱或詞組可以使用中橫線來為選擇器命名
2不能用'_'下划線來命名css選擇器
原因
(1)一些瀏覽器已經不允許使用下划線來命名css選擇器(不兼容)
(2)能良好區分javascript變量命名
三.不要隨意使用id
id是js唯一的,不能多次使用,而是用class類選擇器可以重復使用,另外id的優先級先於calss,所以id不能濫用。
四.常用的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
指南:guild
服務:service
注冊:regsiter
狀態:status
投票:vote
合作伙伴:partner
五.常見的id命名
<1>頁面結構
容器:container
頁頭:header
頁面主題:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
<2>導航
導航:nav
主導航:mainbar
子導航:subnav
項導航:topnav
邊導航:sidebar
左邊導航:leftsidebar
右邊導航:rightsidebar
菜單:menu
子菜單:submenu
標題:title
摘要:summary
<3>功能
標志:logo
廣告:banner
登錄:login
登陸條:loginbar
注冊:regsiter
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標簽頁:tab
文章列表:list
提示信息:msg
當前的:current
小技巧:tips
圖標:icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright