在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。
第一节 CSS样式文件的命名
建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：
| 主要 | main.css | 文字样式 | font.css |
| 表格 | table.css | 主题 | themes.css |
| 打印 | print.css | 补丁 | mend.css |
第二节 CSS选择符的命名
所有选择符必须有小写英文字母或“_”下划线组成；样式名必须是表示该样式的大概含义；参考后面的“样式命名参考”。
当定义的样式名比较复杂时用下划线把层次分开；
比如：dcrm_logo{ …} dcrm_logo_ico{…}
第三节 图片的命名与书写
图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。
| 广告 | banner | 标志 | logo |
| 链接的小图片 | button | 装饰图 | pic |
| 标题的图片 | title |
|
|
| banner_sohu.gif 、banner_sina.gif、 menu_about_us.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg | |||
第四节 CSS注释书写规范 4.1 提示和标签信息注释
这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。
| .search{ border:1px solid #fff; /*Border Color*/ } |
注意：注释内容和前面样式语句间有3个空格，后面1个空格
4.2 修改样式注释（时间和相关人员）
| /*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour --------------------------------------------------------------------------------------------*/ |
4.3 文档结构
| /*__Header --------------------------------------------------------------------------------------------*/ .search{ border:1px solid #fff; /*Border Color*/ }
/*__Menu --------------------------------------------------------------------------------------------*/ .menul_ul{ border:1px solid #fff; /*Border Color*/ } |
注意：相对独立的2段内容之间空1行
第五节 CSS布局编码标准和建议 5.1 建立样式表索引
样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）
| /*--------------------------------------------------------------------------------------------- *Filename: main.css *Description: Global CSS *Version: 1.0.0(2009-12-28)YYYY-MM-DD *Website: http://www.testsoft.com ==STRUCTURE:=================================== == ==== ===== *Page width: 980px *Number of columns: 2 --------------------------------------------------------------------------------------------*/ |
5.2 命名锚点 的使用
命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。
| *==STRUCTURE:=============================================== $__header Header Definitions $__menu Global Site $__content Everything within the content -----------------------------------------------------------------------------------------------*/ /*__header -----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} /*__menu ----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} |
5.3 建立良好的CSS编码顺序
最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式，比如下面这个例子：
| p { color: red; background: yellow;} p { color: green;} |
以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的 color:green 将之前定义的 red 覆盖掉了，至于黄色背景为何没有消失，那是因为第二个 p 的定义中并没有与之冲突的定义，因此它还是有效的。
5.4 合适的缩写
在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁；缩写语法参考相关章节。
5.5 CSS图像拼合(即CSS Sprites技术)
CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
5.6 CSS组合和嵌套
CSS组合
你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。
| h2 { color: red; } .w3cbbs { color: red; } .w3cbbs_52css { color: red; } 则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: red; } |
CSS嵌套
CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。
| #top { background-color: #ccc; padding: 1em;} #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } |
第六节 常用CSS选择符命名参考
| 导航 | nav | 页头 | header |
| 主导航 | mainnav | 页面主体 | main |
| 顶导航 | topnav | 内容 | content |
| 子导航 | subnav | 页脚 | footer |
| 菜单 | menu | 版权 | copyright |
| 子菜单 | submenu | 登陆 | login |
| 标志 | logo | 侧栏 | sidebar |
| 广告 | banner | 搜索 | search |
| 滚动 | scroll | 标签页 | tab |
| 小技巧 | tips | 合作伙伴 | partner |
| 加入 | joinus | 标题 | title |
| 注册 | regsiter | 指南 | guild |
| 新闻 | news | 下载 | download |
| 按钮 | button | 状态 | status |
| 服务 | service | 投票 | vote |
| 注释 | note | 友情链接 | friendlink |
| 提示信息 | msg |
|
|
注意：命名方式使用“类别_功能”的方式（.bar_news{} .bar_product{}）。
