编写高效整洁的CSS代码
时间：2011-01-29 来源：YY_Crazy
1.使用reset，但并非全局reset
全局reset是低效率的方法：
* {
margin: 0;
padding: 0;
}
参考做法：
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img /* img elements 图片元素 */{
border: medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body, button, input, select, textarea {
font: 16px/1.5em '宋体', 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: #333333； }
a:hover { text-decoration: underline; color: #FF4400; }
/** 重置图片元素 **/
img { border: 0; }
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
2.良好的命名习惯
3.代码缩写
以下代码：
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-
padding-top: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
可以缩写为：
li {
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4.使用CSS继承
如果页面中父元素多个子元素使用相同的样式，可以将这些相同的样式定义到父元素上，让子元素继承。
5.使用多重选择器
如果多个元素使用相同的样式，可以使用多重选择器以简化代码。
6.给代码适当的排序
适当的排序能方便查找代码，可以按字母顺序或按类别排序。
相关阅读 更多 +
