#container{..}#sidebar{..}CSS不难学，但在大型项目中管理起来就变难了，尤其是不同人的CSS书写风格略有不同，更难在项目中交流team，总结一下如何实现高效整洁的CSS代码的一些原则：1.使用Reset而不是全局Reset。不同浏览器元素的默认属性是不同的。使用Reset可以重置浏览器元素的一些默认属性，以实现浏览器设备的兼容性。但需要注意的是，请不要使用globalReset:*{margin:0;padding:0;}这不仅是因为它是一种缓慢且低效的方法，而且还会导致一些不必要的元素在spacing和padding之外被重置.推荐参考YUIReset和EricMeyer的做法。我与EricMeyer的观点相同。Reset不是一成不变的，需要根据项目的不同需求适当修改，以达到浏览器兼容和操作方便。我使用的Reset如下：/**Clearinnerandoutermargins**/body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,/*structuralelements*/dl,dt,dd,ul,ol,li,/*listelements列表元素*/pre,/*textformattingelements文本格式化元素*/form,fieldset,legend,button,input,textarea,/*formelements表单元素*/th,td,/*tableelements表格elements*/img/*imgelements图像元素*/{border:mediumnone;margin:0;padding:0;}/**设置默认字体**/body,button,input,select,textarea{font:12px/1.5'Arial',tahoma,Srial,helvetica,sans-serif;}h1,h2,h3,h4,h5,h6{font-size:100%;}em{font-style:normal;}/**重置列表元素**/ul,ol{list-style:none;}/**重置超链接元素**/a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#F40;}/**重置图片元素**/img{border:0px;}/**重置表格元素**/table{border-collapse:collapse;border-spacing:0;}2.好毫无疑问命名习惯乱七八糟或者没有语义名称的代码，谁看了都会抓狂。代码是这样的：.aaabb{margin:2px;color:red;}我想在实际项目中即使是初学者也不会这样命名一个类，但是你有没有想过这样的代码也很有用？问题：MynameisWiky
问题是如果需要把原来的红色字体全部改成蓝色，样式就会变成：.red{color:Bule;}这样一个命名会很混乱，同一个侧边栏名为.leftBar，如果要改成右侧边栏会很麻烦。因此，请不要使用元素的特性（颜色、位置、大小等）来命名class或id，可以选择有意义的命名如：#navigation{…}、.sidebar{…}、.postwrap{…}，无论你如何修改定义这些类或id的样式，都不会影响它们与HTML元素的关系。另外，还有一种情况，有些固定的样式在定义之后是不会被修改的，所以在命名的时候就不用担心刚才提到的情况，比如.alignleft{float:left;margin-right:20px;}.alignright{float:right;text-align:right;margin-left:20px;}.clear{clear:both;text-indent:-9999px;}那么对于这样一段我是一段!
如果你需要把这个段落从原来的左对齐改为右对齐，那么只需要修改它的className为alignright即可。3.代码缩写CSS代码缩写可以提高你的代码编写速度，简化你的代码量。在CSS中有很多属性可以缩写，包括边距、填充、边框、字体、背景和颜色值。如果学习代码缩写，原代码如下：li{font-family:Arial,Helvetica,sans-serif;font-size:1.2em;line-height:1.4em;padding-top:5px;padding-bottom:10px;padding-left:5px;}可以简写为：li{font:1.2em/1.4emArial,Helvetica,sans-serif;padding:5px010px5px;}如果你想知道更多关于如何简写这些属性，你可以参考《常用CSS缩写语法总结》或下载CSS-Shorthand-Cheat-Sheet.pdf。4、使用CSS继承如果页面中父元素的多个子元素使用相同的样式，最好在它们的父元素上定义它们相同的样式，让它们继承这些CSS样式。这样既可以很好的维护自己的代码，又可以减少代码量。所以原代码：#containerli{font-family:Georgia,serif;}#containerp{font-family:Georgia,serif;}#containerh1{font-family:Georgia,serif;}可以简写为：#container{font-family:Georgia,serif;}5.使用多个选择器，如果它们具有共同的样式，您可以将多个CSS选择器合并为一个。这样做不仅代码简洁，而且节省了时间和空间。如：h1{font-family:Arial,Helvetica,sans-serif;font-weight:normal;}h2{font-family:Arial,Helvetica,sans-serif;font-weight:normal;}h3{font-family:Arial,Helvetica,sans-serif;font-weight:normal;}可以合并成h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:normal;}6.适当的代码注释代码注释可以让别人更容易理解你的代码，合理组织代码注释可以让结构更加清晰。您可以选择在样式表的开头添加一个目录：/*--------------------------------------1.Reset2.Header3.Content4.SideBar5.Footer--------------------------------*/让你的代码结构一目了然，你可以很容易地找到和修改代码。至于代码的主要内容，要适当划分，甚至在必要的地方对代码进行注释，这也有利于团队开发：/***Header***/#header{height:145px;position:relative;}#headerh1{width:324px;margin:45px0020px;float:left;height:72px;}/***Content***/#content{background:#fff;width:650px;float:left;min-height:600px;overflow:hidden;}#content1{color:#F00}/*设置字体颜色*/#content.posts{overflow:hidden;}#content.recent{margin-bottom:20px;border-bottom:1pxsolid#f3f3f3;position:relative;overflow:hidden;}/***Footer***/#footer{clear:both;padding:50px5px0;overflow:hidden;}#footerh4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font-size:1.1em;}7.对你的CSS代码进行排序如果代码中的属性可以按字母顺序排序，查找和修改会更快：/***样式属性按字母顺序排序***/div{background-color:#3399cc;color:#666;font:1.2em/1.4emArial,Helvetica,sans-serif;height:300px;margin:10px5px;padding:5px010px5px;width:30%;z-index:10;}8.保持CSS的可读性编写可读的CSS就可以做到更容易找到和修改样式。我想这是不言自明的，以下两种情况中的哪一种更具可读性。/***每个样式属性写一行***/div{background-color:#3399cc;color:#666;font:1.2em/1.4emArial,Helvetica,sans-serif;height:300px;margin:10px5px;padding:5px010px5px;width:30%;z-index:10;}/***所有样式属性写在同一行***/div{background-color:#3399cc;color:#666;font:1.2em/1.4emArial,Helvetica,sans-serif;height:300px;margin:10px5px;padding:5px010px5px;width:30%;z-index:10;}对于一些样式属性较少的选择器，我会写一行：/***选择器属性写在同一行***/div{background-color:#3399cc;color:#666;}这个规则不是硬性规定，但是不管你怎么写，我的建议是始终保持代码一致。如果属性很多，就写成一行，如果属性少于3个，就写成一行。9.选择一个更好的样式属性值。CSS中的某些属性使用不同的属性值。虽然效果差不多，但是性能上还是有区别的。比如区别在于border:0。没看到，但是根据border的默认值，浏览器还是渲染了border-width/border-color，也就是内存值已经被占用了。而border:none将边框设置为“none”，即浏览器解析“none”时没有渲染动作，即不消耗内存值。所以推荐使用border:none；同样，display:none隐藏对象浏览器不渲染也不占用内存。可见性：隐藏的意志。10.使用而不是@import首先，@import不是XHTML标签，也不是Web标准的一部分，不兼容早期的浏览器，对网站的性能有一定的负面影响。详情请参考《高性能网站设计：不要使用@import》。所以，请避免使用@import11。使用外部样式表的原则始终是一个很好的设计实践。不仅可以更容易维护和修改，更重要的是，使用外部文件可以提高页面速度，因为CSS文件可以缓存在浏览器中。HTML文档中内置的CSS会在每次请求时随HTML文档一起重新下载。因此，在实际应用中，无需在HTML文档中嵌入CSS代码：
#container{..}#sidebar{..}或改为使用导入外部样式表：
