如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题。我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间。
组织你的样式表
尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你的样式表就组织清晰了,随写,随看,随改大概是我们常用的开发方式,一开始样式表还有点层次,后面这里加一点,那里加一点,就越来越乱了。所以不妨考虑规范一下你的写作方式。
大概有两种组织方式,一种是我们常用的,把所有的描述同一个元素 (和它的子元素) 的规则都放到一起来,那么如果需要查阅页面中某个元素究竟受哪些规则影响的时候,就不必在整个样式表中翻来翻去了。
另一种也值得参考,即,把描述某些特性的规则放到一处,把描述另一些特性的放到另一处,比如说关于颜色的定义,放到 color.css 文件中,描述字体的定义,放到 font.css 中,描述布局的定义,放到 layout.css 中,这也能让你的样式表结构清晰,方便理解。最大的优点是,如果你希望换一套配色方案,可以只修改一下 color.css,完全不必担心其他的规则是否会影响页面的颜色。
在传统的程序设计中,我们常常提到程序的风格是如何重要,培养良好的编码风格甚至远比掌握程序的语法和语义重要,尽管 Web 设计者不一定要掌握那些程序设计的技巧,但培养良好的 CSS 编写风格的确是很有用的。
使用属性缩写
属性缩写的介绍可以参考上的其它相关文章,这里我们来小结一下:
首先,有这么几个常用的属性缩写:
font
background
list-style
margin
border
padding
多数是可以把几个常规属性合并到一起使用的,也就是说,可以给这些简记属性赋予好几个值,每个值之间用空格分隔。
第三,margin, border 和 padding 都遵循中顺时针原则,如果给定了四个值,从上方开始每次顺时针转 90 度。