如何让 CSS 代码简洁而易于编写？这恐怕是许多开发者都关心问题我想大概没有什么魔法可以保证下就把你样式表缩小到百分的多少但合理 CSS 编码和组织窍门技巧确能够帮助你更有效率地写出更清晰高效代码自然样式表大小缩减还能减少下载时间 

组织你样式表

　　尽管我们有种种 CSS 开发工具比如 TopStyle比如 StyleMaster它们可以让你对当前这个样式表里面定义了哪些规则涉及哪些 哪些 ID 目了然但这不等于说你样式表就组织清晰了随写随看随改大概是我们常用开发方式开始样式表还有点层次后面这里加点那里加点就越来越乱了所以不妨考虑规范标准下你写作方式 

　　大概有两种组织方式种是我们常用把所有描述同个元素 (和它子元素) 规则都放到起来那么如果需要查阅页面中某个元素究竟受哪些规则影响时候就不必在整个样式表中翻来翻去了
 
　　另种也值得参考即把描述某些特性规则放到处把描述另些特性放到另处比如说有关颜色定义放到 color.css 文件中描述字体定义放到 font.css 中描述布局定义放到 layout.css 中这也能让你样式表结构清晰方便理解最大优点是如果你希望换套配色方案可以只修改下 color.css完全不必担心其他规则是否会影响页面颜色

　　在传统设计中我们常常提到风格是如何重要培养良好编码风格甚至远比掌握语法和语义重要尽管 Web 设计者不定要掌握那些设计窍门技巧但培养良好 CSS 编写风格确是很有用 

使用属性缩写

　　属性缩写介绍可以参考52CSS.com上其它相关文章这里我们来小结下: 
　　首先有这么几个常用属性缩写: 

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
　　　font 
　　　background 
　　　list-style 
　　　margin 
　　　border 
　　　padding

 
　　多数是可以把几个常规属性合并到起使用也就是说可以给这些简记属性赋予好几个值每个值的间用空格分隔 
　　第 3margin, border 和 padding 都遵循中顺时针原则如果给定了 4个值从上方开始每次顺时针转 90 度 
　　如果给定了 3个值则是上侧种左右同种下侧种 
　　如果给定了两个值就是上下种左右种 
　　如果只给了个值那就是都样 
　　简记属性(属性缩写)使用见仁见智方面它确是可以大大缩短代码 (如果用得频繁话)另方面修改时候又未免带来不直观和不方便 

利用继承和默认值

　　同样参见 书写高效 CSS 中相关章节我想这也得斟酌使用首先继承和默认值在 W3C 标准中都没有严格 (must) 规定 (BTW, 就算有又如何呢？)浏览器未必真会像你预期那样去实现某些属性默认值真是 0 么？在所有浏览器里都是 0 么？需要反复尝试后整理总结经验；再者如果代码中含有过多这样“隐喻”就未免不大好读了某某元素会显示出某某特性乃是继承自它父元素……在编写样式表当天你可能还清楚过段时间忘了就会很奇怪为什么不曾定义这个规则却又显现出那个特性了
　　所以建议如果你要用到继承和默认值来简化代码话最好写下些注释予以介绍说明 

利用多个  和多元选择符

　　个 HTML 元素可以属于多个类比如这样: 

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<td =\"subtotal negative\">(-$422.72)</td>


　　你可以给“合总”那些表格栏设定个样式再给包含负数那些表格栏设定个样式把它们叠加在上面: 

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
.subtotal {font-weight: bold;}
.negative {color: red;}


　　这种特性有时能够让你很灵巧地实现些功能即缩短了 HTML 代码又清晰了 CSS 规则 
　　有关多个  详细介绍说明 (包括选择符兼容性测试..) 请参考52CSS.com相关文章介绍 

小结

　　选择种 CSS 规则组织方式并坚持使用它！
　　谨慎地使用些虽然能够简短代码但会影响可读性书写方式！
　　适时地了解些已经普遍实现 CSS2 新特性能够大大方便你设计！