css編碼規范 · 代碼規范

# CSS編碼規范為提高頁面代碼質量、工作效率以及網站后期的可維護性，改善用戶體驗，充分發揮團隊協作的潛能，而制定以下CSS規范，希望能通過此規范的制作，使網站前端工作從效果圖設計到靜態頁制作逐步走向產品化、模塊化的專業制作體系，也使網站更好的發揮兼容性，以增強各種瀏覽器的用戶體驗，提高頁面代碼的可讀性。更好的配合程序開發，從而節約一定的網站開發時間。 ## 目錄 * [CSS結構](#css) * [CSS文件命名](#css-1) * [CSS書寫要求](#css-2) * [CSS樣式命名](#css-3) ## CSS結構 ### base.css > 每個頁面必須加載，對頁主要是對瀏覽器的一些默認樣式進行CSS Reset。 ### common.css > 各種模型庫，主要定義各種通用樣式，如幾種不同尺寸的頭像、頁面、等常用模型，每個前端都可以根據需求進行添加新的模塊，但必須告知所有前端，確認以后方可添加，原則上不進行刪除模塊操作，為了方便之間模塊化和提高彈性，正常情況下，為避免外邊界沖突，組件不設置外邊界。 ### page.css > 每個頁面有一個或每個專題共用一個，定義當前頁面獨立的樣式，一個page.css通常一個人維護，如果多人維護，需要添加注釋。 ## CSS文件命名 > CSS文件命名要求盡量使用相對應的專題/功能的英文名稱，如個人網盤頁面的css可以命名為 netdisk.css ## CSS書寫要求 ### 1. 屬性需要寫在一行。需要在“{"和"}”前后加空格。 ```css .selector { property:value;property:value; } ``` ### 2.多個(>2)selector每個占一行： ```css .selector1, .selector2, .selector3 { property:value;property:value; } ``` ### 3.兼容多個瀏覽器時，將標準屬性寫在后面，如： ```css -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px; ``` ### 4.注釋注釋的格式: /* mod: doulist S*/ …… /* mod: doulist E*/ ### 5.注意事項 #### 5.1.盡量避免使用filter #### 5.2.不要直接修改標簽的樣式 ```css div { ... } /*不要使用*/ ``` #### 5.3.不要在標簽上直接寫樣式 ```html <div style="margin-bottom:30px;">  ``` #### 5.4.不要在CSS中使用 expression #### 5.5.不要在CSS中使用 @import #### 5.6.如非特殊格式要求，不要在CSS中使用 !important #### 5.7.如非特殊格式要求，絕對不要在CSS中使用 "*" 選擇符 #### 5.8.避免使用如下低效的選擇器 ```css body > * {...} /*不要使用*/ ul > li > a {...} /*不要使用*/ #footer > h3 {...} /*不要使用*/ ul#top_blue_nav {...} /*不要使用*/ ``` #### 5.9.盡量避免使用CSS Hack > 如需用到推薦使用下面的： > ###### IE6 : _property:value > ###### IE6/7 : *property:value > ###### IE6/7/8/9 : property:value\9 > ###### not IE6 : property//:value ## CSS樣式命名 ### 命名盡量使用相應的英文名稱或相應的英文縮寫如 > .title (標題) > .sidebar (邊欄) > .search （搜索） > 非共用模塊的css請加當前頁面的名字或縮寫以免沖突，如好友頁面： > .friend_top （好友頁面的頭部部分） > .friend_search （好友頁面的搜索部分） ### 名稱請用下劃線“_”分割，所有英文字母使用小寫。如： > .friend_l_title ### 對于表示方位、大小的形容詞可以使用縮寫，如： > 如left可寫成l，right可寫成r，big可寫成b等等。 ### 推薦CSS命名 > .container 容器 > .header 頁頭部分 > .nav 導航 > .subNav 二級導航 > .menu 菜單 > .submenu 子菜單 > .main 頁面主體 > .column 欄目 > .title 標題 > .content 內容部分 > .footer 頁腳部分 > .icon 小圖標 > .tag 標簽 > .tab 選項卡 > .list 文章列表 > .note 注釋 > .hot 熱點 > .download 下載 > .msg或 .message 提示信息 > .tips 小技巧 > .vote 投票 > .friendlink 友情連接 > .summary 摘要 > .search 搜索 > .btn 按鈕 > .copyright 版權信息 > .branding 商標 > .brandingLogo LOGO > .banner 廣告 > .siteinfo 網站信息 > .siteinfoLegal 法律聲明 > .siteinfoCredits 信譽 > .joinus 加入我們 > .partner 合作伙伴 > .service 服務 > .regsiter 注冊 > .login 登陸 > .status 狀態 ### 推薦CSS名稱簡寫索引表 > 全拼縮寫說明 > left l 左邊 > right r 右邊 > center c 中間 > big b 大的 > small s 小的