css命名和書寫規範

喔喔牛在路上發表於2019-02-16
CSS

前言

在專案開發中對於css名字的命名和書寫老是感覺很混亂，這對於程式碼的可讀性以及維護提出了挑戰，所以在閒暇之餘看了一些這方面的內容，現總結如下…

1.命名規則說明

  1. 所有的命名最好都小寫
  2. 屬性的值一定要用雙引號(“”)括起來，且一定要有值如class=”divcss5″,id=”divcss5″
  3. 每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
  4. 空元素要有結束的tag或於開始的tag後加上”/”
  5. 表現與結構完全分離，程式碼中不涉及任何的表現元素，如style、font、bgColor、border等
  6. 給每一個表格和表單加上一個唯一的、結構標記id
  7. 給圖片加上alt標籤
  8. 儘量不縮寫，除非一看就明白的單詞，不知道的用翻譯軟體翻譯一下
  9. 無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名
  10. 如果名字過長可以用中橫線但是拒絕使用下劃線（IE6以可能出現解析錯誤，為了區分JavaScript變數名）

bad

  .miantitle {
    color: #e3c;
  }
  .mian_title {
    color: #e3c;
  }

good

  .mian-title {
    color: #e3c;
  }

11.屬性簡寫需要你非常清楚屬性值的正確順序，而且在大多數情況下並不需要設定屬性簡寫中包含的所有值，所以建議儘量分開宣告會更加清晰；margin 和 padding 相反，需要使用簡寫。更多詳細規則請參考此文章
bad

  .list-box {
    border-top-style: none;
    font-family: aerif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

good

  .list-box {
    border-top: 0;
    font: 100%/1.6 aerif;
    padding: 0 1em 2em;
  }

12.去掉小數點後面的0
bad

font-size: 0.8em;

good

font-size: .8em;

13.十六進位制顏色程式碼縮寫，並儘量用小寫
bad

color: #eebbcc;

good

color: #ebc;

14.不要隨意用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重複使用，另外id的優先順序優先與class，所以id應該按需使用，而不能濫用
15.可以為選擇器加狀態字首
bad

  .withdrawal {
    background-color: #ccc;
  }

good

  .is-withdrawal {
    background-color: #ccc;
  }

16.專案命名的時候採用這種方式my_project_name
17.媒體查詢規則靠近與他們相關的規則，不要將他們一起放到獨立的樣式檔案中，具體可參考此文章
18.更多詳細css書寫規範可參考此文章1和此文章2
19.scss書寫時應注意的問題可以參考此文章

2.命名參考表

網頁外層

最外層：wrapper (頁面外圍控制整體佈局寬度)
頭部：header
主體內容（中部）：main
左側佈局：main-left
右側佈局：main-right
導航條：nav
網頁中部主體：content
底部：footer
選單：menu

頁面結構

#wrapper 頁面外圍控制整體佈局寬度
#container或#content 容器,用於最外層
#head, #header 頁頭部分
#foot, #footer 頁尾部分
#sidebar 側邊欄
#column 欄目
#left,#right,#center 左右中

導航

#nav 導航
#miannav 主導航
#subnav 子導航
#topnav 頂導航
#sidenar 邊導航
#leftsidenav 左導航
#rightsidenav 右導航
#menu 選單
#submenu 子選單
#title 標題
#summary 摘要

功能

#logo 標誌
#banner 廣告
#login 登入
#loginbar 登入條
#regsiter 註冊
#search 搜尋
#shop 功能區
#title 標題
#joinus 加入
#status 狀態
#btn 按鈕
#s 滾動
#tab 標籤頁
#list 文章列表
#msg 提示資訊
#current 當前的
#tips 小技巧
#icon 圖示
#note 註釋
#guild 指南
#service 服務
#hot 熱點熱門
#news 新聞
#download 下載
#vote 投票
#partner 合作伙伴
#friendlink 友情連結
#copyright 版權
#searchInput 搜尋輸入框
#search-output 搜尋輸出
#search-results 搜尋結果
#branding 商標
#siteinfo 網站資訊
#siteinfoLegal 法律宣告
#siteinfoCredits 信譽
#arrow 箭頭
#sitemap 網站地圖
#homepage 首頁
#subpage 二級頁面子頁面
#toolbar 工具條
#drop 下拉
#dropmenu 下拉選單
需要用 class的命名
.tab 標籤頁
.left .right .center 居左、中、右
.news 新聞
.download 下載
.banner 廣告條
.products 產品
.products_prices 產品價格
.products-description 產品描述
.products_review 產品評論
.editor_review 編輯評論
.news_release 最新產品
.publisher 生產商
.screenshot 縮圖
.faqs 常見問題
.keyword 關鍵詞
..blog 部落格
.forum 論壇

3.css檔案命名

global.css 全域性
全域性樣式為全站公用，為頁面樣式基礎，頁面中必須包含
master.css style.css 主要的
module.css 模組
產品類頁面應用，將可複用類模組進行剝離後，可與其它樣式配合使用
base.css 基本共用
layout.css 佈局，版面
頁面結構型別複雜，並且公用型別較多時使用。多用在首頁級頁面和產品類頁面中
themes.css 主題
實現換膚功能時應用
columns.css 專欄
font.css 文字，字型
forms.css 表單
mend.css 補丁
基於以上樣式進行的私有化修補
print.css 列印
style.css 私有
獨立頁面所使用的樣式檔案，頁面中必須包含

4.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等)

bad

  .example {
    color: red;
    z-index: -1;
    background-color: #9e0;
    display: inline-block;
    font-size: 1.5em;
  }

good

  .example {
    z-index: -1;
    display: inline-block;
    font-size: 1.5em;
    color: red;
    background-color: #9e0;
  }

感謝

此文我參考瞭如下作者寫的文章，在此特別提出感謝，如果你在閱讀我寫的文章中有任何問題可以查閱如下連結：

相關文章