CSS注释书写规范
四、CSS注释书写规范
1 提示和标签信息注释
这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。
|
.search{ border:1px solid #fff; /*Border Color*/ } |
注意：注释内容和前面样式语句间有3个空格，后面1个空格
2 修改样式注释（时间和相关人员）
|
/*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour --------------------------------------------------------------------------------------------*/ |
3 文档结构
|
/*__Header --------------------------------------------------------------------------------------------*/ .search{ border:1px solid #fff; /*Border Color*/ color:#333; /*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 { padding: 1em;} .top h1 { color: #ff0; } .top p { color: red; font-weight: bold; }
|
