CSS技巧：改善代码可读性并简化代码管理

前端  /  管理员 发布于 7年前   221

SomereadershaveaskedtomewhatisthebetterwaytoorganizeaCSSfiletooptimizecodereadabilityandsimplifycodemanagement.Generally,Iadoptjustsomesimplerulesand,it'smyopinion,theyareusefulinordernottobecomecrazyifyouhavetomanageaCSSfileforapage/sitewithacomplexdesign.Inthispost,Idiscussforsimplicityatypicaltwocolumnsfixedlayoutlikethis:
一些读者曾问我如何以更好的方式组织CSS文件来改善代码的可读性并简化代码的管理。一般情况下，我只采用几个简单的规则，但我认为很有用，因为当你不得不去管理一个有着复杂设计的页面/站点的CSS文件时，它可以避免让你抓狂。在这里，我将简单探讨如下所示的典型的两列固定宽度布局：

Step1:redefineHTMLelements
　　Ithinkit'sagoodruletoredefineHTMLelements(body,a,form,input...)inthefirstrowsofyourCSSfiles.
第一步：重定义HTML标签
　　我认为在CSS文件前面几行重新定义HTML标签（body,a,form,input...）是一个好规则。
/*-------------------------------*/
/*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文件的末尾，你可以用我上面提出的规则定义所有其他的自定义类
/*-------------------------------*/
/*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.
　　就如我所说，这些只是我的个人建议，并不是本质规律，但我想如果你要部署一个更具可读性的CSS文件，你还是会发现这些规则是很有用的。