编写出色css代码的13个建议

编写出色CSS代码的13个建议—总结至《前端大全》公众号 一：使用Reset但不用全局Reset 如*{margin：0；padding：0；}

这不仅仅因为它缓慢和效率低，而且会导致一些不必要的元素也重置了外边距和内边距。Reset不是一成不变的，具体还是要根据项目的不同需求做适当的修改，已达到浏览器的兼容和操作上的便利性。我使用的Reset如下： structural elements结构元素：body,h1,h2,h3,h4,h5,h6,hr,p ，blockquote list elements列表元素：dl,dt,dd,ul,ol,li text formatting elements 文本格式元素：PRe form elements表单元素：form，fieldset，legend，button，input，textarea table elements 表格元素：th , td img elements 图片元素：img img{ border：medium none； padding：0； margin：0； } body，button，input，select，textarea{ font：12px/1.5 ‘宋体’,tahoma,Srial,helvetica,sans-serif; } h1,h2,h3,h4,h5,h6{font-size:100%;} em{font-size:normal;} ul,ol{list-style:normal;} a{text-decoration:none;color:} a:hover{text-decoration:underline:color:#f40;} img{border:0px;} table{border-collapse:collapse;border-spacing:0}

二：良好的命名习惯 请不要使用元素的特征（颜色、位置、大小等）来命名一个class或ID，您可以选择意义的命名如： .navigation{}，.sidebar{}, .postwrap{} 另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你 命名时就不用担忧刚刚说的那种情况，如： .alignleft{float:left;margin-right:20px;} .alignright{float:right;text-align:right;margin-left:20px}; .clear{clear:both;text-indent:-9999px;}

三：代码缩写 li{font-:1.2em/1.4em Arial,Helvetica,sans-serif; padding:5px 0 10px 5px; } 更多属性缩写，参考《常用css缩写语法总结》或者下载css-shorthand-Cheat-Sheat.pdf。

四：利用继承性 如果父元素中的多个字元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些css样式。 .container li{font-family:Georgia,serif；} .container p{font-family:Georgia,serif；} .container h1{font-family:Georgia,serif；} 就可简写为： .container{font-family:Georgia,serif；}

五：使用多重选择器 如果多个选择器有共同的样式的话，可以合并，这样做代码不但简洁，还能为你节省空间。如： h1,h2,h3{font-family:Georgia,serif；}

六：适当的代码注释 /1、Reset 2、Header 3、Content 4、SiderBar 5、Footer/ 如此你的代码结构一目了然

七：给你的Css代码排序

八：保持CSS的可读性

九：选择更优的样式属性值 CSS中有些属性采用不同的属性值，虽然达到的效果差不多，性能上query存在着差异，如： border：0虽然在页面上看不见，但按照border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。 而border：none，none即没有，浏览器解析“none”时将不会做出渲染动作，即不会消耗内存值。所以建议使用border：none； 同样的，display：none隐藏对象浏览器不做渲染，不占用内存。而visibility：hidden则会。

十：使用代替@import @import不属于XHTML标签，也不是WEB标准的一部分，它对于早期的浏览器兼容也不高，并对网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》

十一：使用外部样式表

十二：避免使用CSS表达式

十三：代码压缩