CSS代码命名规则与技巧探讨

刘 伟

(山西青年职业学院，山西 太原 030032)

CSS代码命名规则与技巧探讨

刘 伟

(山西青年职业学院，山西 太原 030032)

合理、科学地对CSS代码命名，能够精简CSS代码，提高代码的开发效率，方便网站设计师对网站进行维护与修改.通过对CSS代码命名规则分析，提出了进行语义化命名、结构化命名和惯例命名三种CSS代码命名技巧.

CSS；命名；规则；技巧

1 合理进行CSS代码命名规范的意义

对于优秀网站设计师而言，网站设计最重要的就是编写出精简、高效的CSS代码.而合理、科学地对CSS代码进行命名，可以为整个网站的设计和维护工作起到事半功倍的效果，其重要意义主要有以下两方面：1)可以缩短网站开发时间，提高网站设计效率.目前的网站设计早已由过去个人独立完成的模式转变为由多人协作开发的团队模式，随着网站设计协作分工的细化，如果每个设计师仍然还是采用自己原有的一套CSS代码命名规则，将会降低CSS代码的可读性，影响到团队其他成员对代码的解读，降低CSS的编码效率，而合理进行CSS代码命名规范，能够促进所有网站设计师采用统一的CSS命名规范，有效缩短网站开发时间，提高网站设计效率.2)可以方便日后对网站进行维护、修改与扩展.网站开发好后，需要对网站进行维护，按照客户需求对网站进行修改与扩展.如果合理进行CSS命名规范，将降低网站维护人员对网站的维护难度，方便网站其他设计师对网站进行修改与功能扩展.

2 CSS代码命名规则

没有规矩不成方圆，完全按照自己的想法行事，虽然没有什么影响，但在团队合作完成项目的时候，就会遇到麻烦，要进行修改、维护也相当困难.因此，CSS命名规则应该遵循一定规则，简单地说就要求直观、简洁、一目了然，方便后期维护和交流.

2.1 借鉴程序语言命名方法

CSS虽然不是一门编程语言，但在很多方面可以借鉴编程思想和方法.在编程开发中，软件工程师们经过多年的实践和研究积累形成了很多套比较成熟的命名方法，这些命名方法对于网页设计师定义CSS名称有着重要的指导作用.例如：匈牙利命名法、骆驼式命名法和帕斯卡命名法.

2.2 要区分大小写

网页设计师可以定义XHML属性class 和id,在利用CSS代码这两个选择符对网页元素进行精确控制.就HTML来说，对于字符大小写是不敏感的，包括标签名称和属性，但CSS对于class和id选择符名称却比较敏感.因此，书写时要特别注意，一般建议设计师在命名时全部使用小写字母，单词首字母可以除外.

2.3 要注意合法性

编程语言中变量命名必须要合法，CSS代码命名也一样，一般要求名称以字母开头，后面可以连接数字、字母、下划线、连字符和特殊字符，但建议尽量使用英文字母，需要时适当使用下划线和连接线.例如：

1)合法名称

Style.css

topMenu

2)非法名称

263_color

-my-site

2.4 要注意简明扼要，词必达意

CSS命名要词必达意，名称要反映用途和相关信息，同时也要简要，不要附带任何冗余信息.例如，myleftmenu120px就可以简写为myleftmenu.名称可以缩写，为了让名称尽量短，可以使用一些约定俗称的缩写.但要保证看的懂，如果不是大家都能够看得懂的缩写，尽量不用.名称中可以包含多个单词，为了方便识别这些词，需要逻辑区分每个词.我们可以使用骆驼式命名法、下划线(或连接线法)或帕斯卡命名法，也可以多种方法混合使用.

3 CSS代码命名技巧

Css代码命名对于网页设计和维护很重要，目前主要的CSS代码命名主要包括三种：

3.1 语义化命名

当在网页设计中需要对元素进行标识命名时，最自然的做法就是使用可以描述元素所在位置的语义词汇来对其命名，例如：

id=“left-side”

id=“center-column”

id=“right-column”

在上面代码中，这3个名称都是根据元素所在位置进行命名的，分别表示左边、中间栏和右栏，类似的还有top、bottom等.这些都是有效命名，名称简单且能够使人顾名思义，因此满足了对元素的标识以及应用CSS样式的需要.由于语义化命名方法注重元素位置的描述性，使其缺乏扩展性.例如，如果3个元素都位于页面右侧，用right、right-side或right-column来命名就显的没有区分度；使用right1、right2和right3来命名，又会弱化语义描述性，不利于后期维护和更新，因此设计师无法通过某个名称来确定该名称所对应的模板.

特别是在页面内不同地方使用时就会显得不合适甚至造成误解.例如，如果把名称为right的模块移动到页面中间区域，很显然这个名称就失去了语义的描述性，那就要重新命名，如cnter或middle等，因此对于后期维护和更新就显得非常麻烦.

同时，语义化命名法没有涉及文档的结构，使样式与结构脱节，设计师会遇到该命名定义的样式而不知所适用的对象的问题.如果能够结合结构化命名方法会扩大名称的应用范围，读者也能够定义出更多符合需要的名称.

在定义类名时，设计师常用样式语义化方法来描述名称，即根据类被定义的样式来概括描述命名，在这方面语义化命名方法就显得很有优势，例如：

1)使用颜色名称或16进制代码命名颜色类：

.blue{color:blue;}

.f00{color:#f00;}

.abc123{color:#abc123}

2)使用“font+字体大小”组合方法命名字体大小类

.font12px{font-size:12px}

.font9pt{font-size:9pt}

3)使用英文名称命名类

.left{float:left;}

.bottom{float:bottom;}

3.2 结构化命名

结构化命名方法一般根据文档结构而不是样式或位置的描述命名，这样我们就可以通过简单的更新来实现对CSS声明名称的重用，从而高效利用不同的样式，例如：

id=“main_nav”

id=“sub_nav”

id=“main-content”

在上面代码中，这3个名称都是根据文档结构进行命名的，分别表示主导航、次要导航和主要内容块，这些名称都是根据元素在页面中的结构进行描述.当看到样式时，设计师能够清楚它所对应的元素，即使该元素被调整了位置，依然不会影响名称与元素之间的对应关系.

结构化名称与语义化名称一样易懂，但它们描述了页面的结构而不是位置或外观样式.这更符合XTML结构化需要，因此设计师在不改变页面结构的情况下应使用不同的样式.使用结构化命名方法可以帮助设计师在升级和更新网站时变得更加轻松.

3.3 惯例命名

所谓惯例命名其实就是综合利用语义化命名与结构化命名后，网页设计师们设计出的广受欢迎，并被网页设计同行广泛使用的CSS名称，随着网页设计师们大力的支持，这些名称就被被逐步固定下用来描述特定的意思，最后成为一种惯例命名.例如，在CSS布局中常用的site表示站点；模块中常用的logo表示标志；类常用的title表示标题；导航常用的leftsidebar表示左导航；css文件常用的master.Css表示主要文件等.

[1] 朱印宏.CSS商业网站布局之道[M].北京：清华大学出版社，2007

[2] 百度文库[EB/OL].http://wenku.baidu.com/link?url=KYbDMsBiNbZHc5_DjB8BIwRAwBulvsLSDPz-l1WZ- jDLKvGZnqSm0BUZ1F8Jfi3yhIaEl7W__fSbFerjR69yfSlCVDUc5kRLpwAO8AYrQnRy

Explorations on the Rules and Skills for Naming CSS Code

Liu Wei

(Shanxi Youth Vocational College, Taiyuan 030032, China)

Naming CSS code reasonably and scientifically can not only simplify the code but also improve the efficiency of code development, which helps designers maintain and revise website. By analyzing the rules for naming CSS code, to put forward three naming skills such as naming according to meaning, naming according to structure, and naming according to convention.

CSS; naming; rule; skill

2014-10-21

刘 伟(1980-)，男，山西太原人，硕士，山西青年职业学院讲师,主要从事计算机应用技术研究.

1672-2027(2015)01-0058-03

TP393

A