CSS编写和命名规范.docVIP

在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于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: ==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 Defi