在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。基于目前广东人才网新改版方案已全面启动，为了更好的使新改版项目能够顺利有效的进行，特制定以下CSS命名规范文档作。
一. 文件夹命名规范
文件夹命名采用英文，长度一般不超过20个字符，命名采用小写字母。除特殊情况才使用中文拼音，文件夹命名如：
Images(存放图形文件)
flash（存放Flash文件）
style/css(存放CSS文件)
scripts（存放Javascript脚本）
link（存放友情链接）
media(存放多媒体文件)等。
文件夹结构说明：黑色-代表根目录 红色－代表根目的下一级 蓝色－代表该目录的一下级
web root文件夹-网站根目录
company文件夹－存放企业管理页面
css文件夹－存放样式的根目录
base.css－整站页面的公共样式
company文件夹－存放企业管理页面的样式
search文件夹－存放搜索结果页面的样式
user文件夹－存放个人简历管理页面的样式
images文件夹－存放图片的根目录
company文件夹－存放企业管理页面的图片
user文件夹－意义同上
flash文件夹－存放flash动画的目录
js文件夹－存放js的根目录
company文件夹－存放企业管理页面的js
user文件夹－意义同上
dpax文件夹－存放处理ajax请求的jsp
inc文件夹－存放包含通用文件
search文件夹－存放搜索结果页面
user文件夹－存放个人简历管理页面
tm plate文件夹－存放模板
二.文件名命名规范
文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想
一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，
二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作 。
（一）图片的命名与书写规范
图片的命名原则名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名： banner
标志性的图片取名为： logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu
装饰用的照片我们取名： pic
不带链接表示标题的图片我们取名： title
下面是几个范例： banner_sohu.gif 、banner_sina.gif、 menu_aboutus.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg 。
（二） css的命名与书写规范
1、所有的css的尽量采用外部调用
<link href= "style/style.css " rel= "stylesheet " type= "text/css ">
书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。
为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12pt 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
2、css推荐模板:
<style type= "text/css ">
<!—
body{ font-size:9pt;font-family:arial, helvetica, sans-serif; color:#333333; text-align:center; margin:0px;}
ul { margin:auto; }
img { border:0px; }
a { font-size:9pt; text-decoration:none;color:#ffffff; }
a:hover {font-size:9pt; text-decoration:underline; color:#990000; }
a.1 {font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover {font-size: 9pt; color: #ff9900; text-decoration: none}
.colorblue,colorblue:hover {color:#003366 ;}
.blue{font-family: "宋体 "; font-size: 9pt; line-height: 20px; color: #0099ff; letter-spacing: 5em}
.colorred,a.colorred:hover{color: #ff0000; }
.colorlime,a.colorlime:hover{color: #00ff00; }
.colorgreen,a.colorgreen:hover{ color: #008000; }
.colorblue,a.colorblue:hover{color: #0000ff; }
.colororange,a.colororange:hover{color: #ffa500; }
-->
</style>
为了保证浏览器的兼容性，必须设置页面背景 <body bgcolor= "#ffffff ">
3、注释书写规范
a、行间注释：
直接写于属性值后面，如：
.search{border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}
b、整段注释：
分别在开始及结束地方加入注释，如：
/*=====搜索条=====*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*=====搜索条结束=====*/
c．协助注释
非作者维护时所加入的表示修改时间、修改人等标识信息。
在区域注释或单行注释的基础上加上修改人和修改时间等信息。
例(区域注释)：
<!--==S 注释内容[修改人和修改时间]-->
<div>...</div>
<!--==E 注释内容[修改人和修改时间]-->
/*=S 注释内容[修改人和修改时间]*/
.class{...}
.class{...}
/*=E 注释内容[修改人和修改时间]*/
例(单行注释)：
<div>
<!-- 注释内容[修改人和修改时间]-->
...
</div>
.class{
/*注释内容[修改人和修改时间]*/
...
}
（二）css命名参考
1、常用的css命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
……….
2、直观命名
当在设计web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：
自上而下小组：top-panel
横向：horizontal-nav
左面：left-side
中心-栏目：center-column
右面：right-col
这些是css以及xhtml类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的css样式的需要。
但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对css类以及id命名更好的方法。
3、结构化命名
结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。
有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变css的方式来对不同外观格式下的内容（content）以及标记（markup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。
可以按照如下所示的结构化方式来对类以及id名称命名：
顶部抢眼部分：branding
导航部分：main-nav
主要内容部分：main-content
这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structural markup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。
即使你不打算在其他的媒体上对web页面进行格式修改，使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如，结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对本项目人员来说直观易懂。
4、自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
三、css样式书写顺序
1、显示属性
* display * list-style * position * float * clear
2、自身属性
* width * height * margin * padding * border * background
3、文本属性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
以上CSS命名规范其尽可能的按3c（css 2.1 XHTML1.0 Transitional）标准来执行操作，在一定的程度上加强了团队的协作水平，提升了项目的开发效率和质量，同时也助于大家良好书写规范代码的习惯。
4050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
