CSS 命名简则
一、頁面結構
容器:container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
二、導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題:title
摘要:summary
三、功能
標志:logo
廣告:banner
登錄:login
登錄條:loginbar
注冊:register
搜索:search
功能區(qū):shop
標題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動:scroll
標簽頁:tab
文章列表:list
提示信息:msg
當前的:current
小技巧:tips
圖標:icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:friendlink
版權:copyright
商標:label
四、顏色
推薦使用顏色的名稱或16進制命名:
.red{color:red;}
.f0f0f0{color:#f0f0f0;}
五、字體大小
推薦使用“font+字體大小”命名:
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}
六、對齊樣式
推薦使用對齊目標的英文名稱命名:
.left{float:left;}
.bottom{float:bottom;}
七、標題欄樣式
使用“類別+功能”的方式命名:
.barnews{}
.barproduct{}
八、樣式文件命名
主要的? master.css
模塊? module.css
基本共用? base.css
框架、版面? layout.css
主題? themes.css
專欄? columns.css
文字? font.css
表單? forms.css
補丁? mend.css
打印? print.css
轉載于:https://www.cnblogs.com/zhouwanqiu/p/8890353.html
總結
- 上一篇: chromedriver与chrome版
- 下一篇: CSS 基本样式