<li id="d3whw"><noframes id="d3whw"></noframes></li>

CSS技巧：改善代碼可讀性并簡化代碼管理

2024-07-11 08:42:59

字體：大中小

供稿：網(wǎng)友

SomereadershaveaskedtomewhatisthebetterwaytoorganizeaCSSfiletooptimizecodereadabilityandsimplifycodemanagement.Generally,Iadoptjustsomesimplerulesand,it'smyopinion,theyareusefulinordernottobecomecrazyifyouhavetomanageaCSSfileforapage/sitewithacomplexdesign.Inthispost,Idiscussforsimplicityatypicaltwocolumnsfixedlayoutlikethis:
一些讀者曾問我如何以更好的方式組織CSS文件來改善代碼的可讀性并簡化代碼的管理。一般情況下，我只采用幾個(gè)簡單的規(guī)則，但我認(rèn)為很有用，因?yàn)楫?dāng)你不得不去管理一個(gè)有著復(fù)雜設(shè)計(jì)的頁面/站點(diǎn)的CSS文件時(shí)，它可以避免讓你抓狂。在這里，我將簡單探討如下所示的典型的兩列固定寬度布局：

Step1:redefineHTMLelements
　　Ithinkit'sagoodruletoredefineHTMLelements(body,a,form,input...)inthefirstrowsofyourCSSfiles.
第一步：重定義HTML標(biāo)簽
　　我認(rèn)為在CSS文件前面幾行重新定義HTML標(biāo)簽（body,a,form,input...）是一個(gè)好規(guī)則。
/*-------------------------------*/
/*HTMLElements
/*-------------------------------*/
html{font-family:arial,verdana,sansserif;font-size:13px;}
a:link,a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1,h2,h3,h4,h5,h6,
form,input,text-area{
border:0;padding:0;margin:0;
font-family:arial,verdana,sansserif;}
h1{font-size:24px;color:#000000;}
h2{font-size:18px;color:#666666;}
...
Step2:definepageelements
　　Inordertoimprovecodereadability,Isuggesttoindentallelementsbutwithsomesagacities:ifanelementhavejusttwo-threeattributes(forexample#navbar),youcanuseasinglelinetodeclareallproperties,otherwiseit'sbettertodeclareeverysinglepropertyinanewline(forexamplesee#navbarlia:link,#navbarlia:visited):
第二步：重定義頁面標(biāo)簽
　　為了改善代碼可讀性，我建議縮進(jìn)所有標(biāo)簽是比較有遠(yuǎn)見的：如果一個(gè)標(biāo)簽只有兩三個(gè)屬性（如#navbar），你可以在一行內(nèi)聲明所有屬性，否則在一行內(nèi)最好只聲明一個(gè)屬性（如下所示的#navbarlia:link,#navbarlia:visited）
/*-------------------------------*/
/*PAGEElements
/*-------------------------------*/
#container{width:780px;margin:0auto;}
#topbar{width:auto;display:block;height:80px;}
#navbar{width:auto;display:block;height:24px;}
#navbarul,#navbarulli{padding:0;margin:0;list-style:none;float:left;}
#navbara{color:#FFFFFF;font-weight:bold;}
#navbara:hover{background:#777777;}
#navbarlia:link,
#navbarlia:visited{
background:#444444;
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px10px;}
#main{width:auto;display:block;}
#column_left{width:560px;margin-right:20px;float:left;}
#column_right{width:200px;float:left;}
div.spacer{clear:both;height:10px;display:block;}
#footer{width:auto;display:block;height:24px;}
#footera{color:#666666;text-decoration:underline;}
Step3:definecustomclass
　　InthefinalsectionofyourCSSfiles,youcandefineallothercustomclasseswiththesamerulesIspecifiedabove:
第三步：定義自定義類
　　在CSS文件的末尾，你可以用我上面提出的規(guī)則定義所有其他的自定義類
/*-------------------------------*/
/*OTHERClass
/*-------------------------------*/
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}
div.small-sectiona{color:#333333;font-weight:bold;}
...
　　HowIsaid,theseareonlymypersonalsuggestionsandnottruerules,butIthinkyoucanfindthemusefulinordertodeployamorereadableCSSfile.
　　就如我所說，這些只是我的個(gè)人建議，并不是本質(zhì)規(guī)律，但我想如果你要部署一個(gè)更具可讀性的CSS文件，你還是會發(fā)現(xiàn)這些規(guī)則是很有用的。

上一篇：雅黑字體對IE中的網(wǎng)頁布局的影響

下一篇：css對于顏色和文本屬性的控制