- 相關(guān)推薦
關(guān)于網(wǎng)站制作css書寫規(guī)范
寫了這么久的CSS,但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼,這樣會影響代碼的閱讀體驗,這里小編總結(jié)一個CSS書寫規(guī)范、CSS書寫順序,供大家參考習(xí)的。
1. 代碼縮進(jìn)與格式: 建議網(wǎng)站制作單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化i會統(tǒng)一處理;
2. 協(xié)作開發(fā)及分工: i會根據(jù)各個模塊, 同時根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為; 共用css文件base.css由i書寫, 協(xié)作開發(fā)過程中, 每個頁面請務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
3. class與id的使用: id是唯一的并是父級的, class是可以重復(fù)的并是子級的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級中; id原則上都是由我分發(fā)框架文件時命名的, 為JavaScript預(yù)留鉤子的除外;
4. 編碼統(tǒng)一為utf-8;
5. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由 小寫英文 & 數(shù)字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
6. 規(guī)避class與id命名(此條重要, 若有不明白請及時與i溝通):
a) 通過從屬寫法規(guī)避, 示例見d;
b)取父級元素id/class命名部分命名, 示例見d;
c)重復(fù)使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;
d)a,b兩條, 適用于在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼
中加入新的div元素,
按a命名法則:
...
,
樣式寫法: #mainnav .firstnav{.......}
按b命名法則:
...
,
樣式寫法: .main_firstnav{.......}
7. 為JavaScript預(yù)留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show;
8. 網(wǎng)站制作書寫代碼前, 考慮并提高樣式重復(fù)使用率;
9. 充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:
這兒是標(biāo)題列表2010-09- 15
定義
ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可實現(xiàn)日期居右顯示
10. 樣式表中中文字體名, 請務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯誤時亂碼;
11. 背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;
12. 使用table標(biāo)簽時(盡量避免使用table標(biāo)簽), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn) , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;}, base.css文件中我會初始化表格樣式)
13. 杜絕使用 兼容 ie8;
14. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果, 請為ie6單獨定義背景:
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);
15. 避免兼容性屬性的使用, 比如text-shadow || css3的相關(guān)屬性;
16. 減少使用影響性能的屬性, 比如position:absolute || float ;
17. 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
18. 網(wǎng)站制作css屬性書寫順序, 建議遵循: 布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: display & list-style & position(相應(yīng)的 top,right,bottom,left) & float & clear & visibility & overflow; 自身屬性主要包括: width & height & margin & padding & border & background; 文本屬性主要包括:color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的這些屬性只是最常用到的, 并不代表全部;
常用的CSS命名規(guī)則
頭:header
內(nèi)容:content/container
尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
登錄條:loginbar
標(biāo)志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導(dǎo)航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權(quán):copyright
滾動:scroll
內(nèi)容:content
標(biāo)簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
加入:joinus
指南:guide
服務(wù):service
注冊:regsiter
狀態(tài):status
投票:vote
合作伙伴:partner
注釋的寫法:
/* Header */
內(nèi)容區(qū)
/* End Header */
id的命名:
1)頁面結(jié)構(gòu)
容器: container
頁頭:header
內(nèi)容:content/container
頁面主體:main
頁尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
(2)導(dǎo)航
導(dǎo)航:nav
主導(dǎo)航:mainnav
子導(dǎo)航:subnav
頂導(dǎo)航:topnav
邊導(dǎo)航:sidebar
左導(dǎo)航:leftsidebar
右導(dǎo)航:rightsidebar
菜單:menu
子菜單:submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區(qū):shop
標(biāo)題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動:scroll
標(biāo)籤頁:tab
文章列表:list
提示信息:msg
當(dāng)前的: current
小技巧:tips
圖標(biāo): icon
注釋:note
指南:guild
服務(wù):service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權(quán):copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫,除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
【網(wǎng)站制作css書寫規(guī)范】相關(guān)文章:
谷歌HTML/CSS規(guī)范06-22
CSS最核心的概念03-10
CSS入門教程06-24
2017最新css樣式大全08-31
CSS之入門篇08-23
Html/Css新手入門攻略06-22