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

Step1:redefineHTMLelements
　　Ithinkit'sagoodruletoredefineHTMLelements(body,a,form,input...)inthefirstrowsofyourCSSfiles.
第一步：重定義HTML標簽
　　我認為在CSS文件前面幾行重新定義HTML標簽（body,a,form,input...）是一個好規(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):
第二步：重定義頁面標簽
　　為了改善代碼可讀性，我建議縮進所有標簽是比較有遠見的：如果一個標簽只有兩三個屬性（如#navbar），你可以在一行內聲明所有屬性，否則在一行內最好只聲明一個屬性（如下所示的#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.
　　就如我所說，這些只是我的個人建議，并不是本質規(guī)律，但我想如果你要部署一個更具可讀性的CSS文件，你還是會發(fā)現(xiàn)這些規(guī)則是很有用的。

最新評論