国产午夜男女爽爽爽爽爽_亚洲A∨无码一区二区一二区毛片_蜜桃tv在线二三区_天天摸一摸视频寡妇_国产欧美国产精品第二区_亚洲老司机在线凹凸福利网站_大痉挛中文字幕色视频_欧美日韩性爱第一页_亚洲高清无码在线一区二区_亚洲黄片视频免费看

網(wǎng)站建設頁面制作:教你如何規(guī)范命名css

2012-01-07 15:01:59

css3已經(jīng)發(fā)布了,許多WEB前端工程師都開始嘗試使用該技術了。我們怎樣來評價編寫css的能力呢?不會用對與錯來判斷,我們可能會用“好”、“一般”、“很爛”等字眼來形容。CSS最難的是什么呢?是各大瀏覽器的兼容?是代碼的簡潔高效性?前端工程師五指曾說過:css不是什么難的技術,難點在于怎樣規(guī)范的命名。項目由個人完成,工程師可以依據(jù)自己的習慣來命名css。在團隊合作中,不規(guī)范的命名側(cè)可能會引發(fā)起沖突,從而影響到整個項目的進度。下面嶺南網(wǎng)絡手把手教大家如何規(guī)范的命名css。

  劃分css可以有多種角度,如按功能劃分:將字體的css存放在font.css;將控制顏色的css存放在color.css;將控制布局的css存放在layout.css;或者按區(qū)塊劃分:將頭部的css存放在header.css;將底部的css存放在footer.css;將側(cè)邊欄存放在sidebar.css;將主題存放在main.css。不同的角度有劃分都有自己的利與弊。

  嶺南網(wǎng)絡給大家推薦一種css的劃分方法:base.css+common.css+page.css。將一個網(wǎng)站所有的樣式,按職能分成三大類:base、common、page,在任何一個網(wǎng)頁最終樣式表現(xiàn)都由這三者完成的。

  base層是網(wǎng)站頁面樣式所需依賴的最底層,相對穩(wěn)定基本不用維護。我們一般會在base.css存放以下內(nèi)容。

  /*css reset 因為每個瀏覽器都會對一些標簽屬性有默認預設值,所以要要把一些標簽屬性統(tǒng)一設置*/

body,div,dl,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol ul{list-style:none;}
 
/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
 
/*定位*/
.tl{text-algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right;}
 
/*長度高度*/
.w10{width:10px;}
.h10{height:10px;}
 
/*邊距*/
.m10{margin:10px;}
.ml10px{margin-left:10px;}
.p10{padding:10px;}
.pr10{padding-right:10px;}

  common層是位于中間層,提供組件級的CSS。我們可以將頁面內(nèi)的元素拆分為一小塊一小塊的功能和樣式相對獨立的“模板”,這些模板有些是很少重復的,有些會是大量重復的,我們可以將大量重復的樣式提取出來存放在common.css樣式中。如一個網(wǎng)站要用到很多重復的標題,我們就可以這樣來編寫:

  .h2{font-size:14px;font-weight:bold;}

  page層是頁面級的,建議將所有page層的css都存放在page.css里,可根據(jù)頁面配上注釋,分塊書寫,便于維護。如:

/*關于我們*/
.about-text{font-size:12px;}
 
/*聯(lián)系方式*/
.contact-text{font-size:14px;}

  base層基本上是不用維護的,common層修改的幅度不會很大,page層代碼可能有多個工程師開共同開發(fā),那要如何避免沖突呢?我們可以通過命名來避免沖突。可以將css命名規(guī)范為:駱駝命名法和劃線命名法。駱駝命名法:從第二個單詞開始,將每個單詞的首字母大寫。如dropMenu、subNavMenu.劃線命名法:用中劃線-,或者下劃線_分隔,如drop-menu、sub_nav_menu。

  如果項目是由多個工程師來完成的,我們可以給每一個人分配一個獨立的命名ID。如嶺南網(wǎng)絡叫l(wèi)inknan,我們可以把名字開頭的2個字母分配為獨立命名id,如:.ln-artice li。這樣就可以避免重復命名而產(chǎn)生沖突。

  以上心得只是給大家一些啟發(fā),希望各位活學活用。