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文件，你还是会发现这些规则是很有用的。

　　推荐阅读

　　网页制作之学习CSS的理由

　　作为一个热门技术，CSS的发展的确有些缓慢。CSS最早被提议在1994年，最早被浏览器支持在1996年，CSS一直被力捧为传统的以HTML为基础的web代码的继承者。CSS使用样式表来控制整个站点字体和布局的能力,使它看>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/CSS/17347.html

 1/2    1