17.1.7 CSS的编码规范
CSS的编码规范是指,在书写CSS编码时所遵循的规范。虽然以不同的书写方式对CSS的样式本身并没有什么影响,但是按照标准格式书写的代码会更加便于阅读,有利于程序的维护和调试。本节将介绍CSS样式的书写规范知识。
1.书写规范
在网页设计过程中,标准的CSS书写规范主要包括如下两个方面。
(1)书写顺序
在使用CSS时,最好将CSS文件单独书写并保存为独立文件,而不是把其书写在HTML页面中。这样做的好处是,便于CSS样式的统一管理,便于代码的维护。
在编码时,建议读者先书写类型选择符和重复使用的样式,然后再书写伪类代码,最后书写自定义选择符。这样做的好处是,便于在程序维护时的样式查找,提高工作效率。
(2)书写方式
在CSS中,虽然在不违反语法格式的前提下使用任何的书写方式都能正确执行。但还是建议读者在书写每一个属性时,使用换行和缩进来书写。这样做的好处是,使编写的程序一目了然,便于程序的后续维护。例如如下代码:
注意:
在书写CSS代码时,应该注意如下3点。
■CSS属性中的所有长度单位都要注明单位,“0”除外。
■所有使用的十六进制颜色单位的颜色值前面要加上“#”字符。
■充分使用注释。使用注释后,不但使页面代码变的更加清晰易懂,而且有助于开发人
员的维护和修改。
2.命名规范
命名规范是指,CSS元素在命名时所要遵循的规范。在制作网页过程中,经常需要定义大量的选择符。如果没有很好的命名规范,会导致页面的混乱或名称的重复,造成不必要的麻烦。所以,CSS在命名时应遵循一定的规范,使页面结构最优化。
在CSS开发中,通常使用的命名方式是结构化命名方法。它相对于传统的表现效果命名方式来说要优秀得多。例如,当文字颜色为蓝色时,使用“blue”来命名;当某页面元素位于页面中间时,使用“center”来命名。这种传统的方式表面看来比较直观和方便,但是这种方法不能达到标准布局所要求的页面结构和效果相分离的要求。而结构化命名方式结合了表现效果的命名方式,实现样式命名所以,用户应选择结构化的方法来书写编码。
例如,如下命名方式就是遵循了结构化命名方式:
■体育新闻:sports-news。
■后台样式:admin-css。
■左侧导航:left-daohang。
使用结构化命名方法后,不管页面内容放在什么位置,其命名都有同样的含义。同时它可以方便页面中相同的结构,重复使用样式,节省其它样式的编写时间。表17-3中列出了常用页面元素的命名方法。
表17-3 常用CSS命名方法
因为具体页面的使用目的不同,所以并没有适合所有页面的国际命名规范。在开发过程中,只要遵循Web标准所规定的“结构和表现相分离”这一原则,做到命名合理即可。