##CSS规范 #####1、代码编写排列规则

• 横向方便SVN的代码变更对比，示例如下：

.demo_01{
    width:100px;
    height:100px;
}

#####2、Class与ID命名规则

• 命名简洁表意清晰，不建议使用缩写。尽量使用英文代替拼音
• 所有字母小写，使用下划线（“_”）作为连字符。
• ID为JS使用，不建议CSS中使用ID选择器

#####3、 属性书写格式

• 书写顺序，建议为position > display/width/height/margin/padding > others，这里不做强制要求。
• Border、font、background等可缩写属性应缩写。 fufu有问题，待确认。
• 公用代码需提取，如公用雪碧图。
• 基础（全局）属性尽量不简写，layout。

#####4、 文件编码

• CSS文件使用UTF-8编码
• 字体属性应使用英文字体如：simsun代替 “宋体“，如无对应英文需结果转码处理，如宋体为“\5b8b\4f53;”

#####5、 CSS Reset

• 每个项目有适合自己项目的reset文件，新项目使用统一reset.css，旧的先不动。
• 项目内组件库依赖此reset.css文件。

#####6、 CSS Hack

• IE6_property:value
• IE6/7/IE8兼容模式*property:value
• IE6/7/8/9property:value\9
• IE8标准模式property:value\0
• firefox@-moz-document url-prefix(){.class {property:value;}}
• chrome以最近版本chrome为标准，不做hack
• 尽量不写（*建议）

#####7、 注释

• 单行注释，注释号“/*” 与注释内容之间有一个空格，示例如下:

.demo_01{
    width:100px; /* 注释内容 */
}

• 模块注释，有头有尾，示例如下:

/* 注释内容 - start */
css内容
/* 注释内容 - end */

• 页面注释，包括项目信息、文件表述、作者信息，示例如下:

/*
 * Project: 企业云项目
 * Comments: 云平台的弹出框
 * @author: penghe
 */

• 团队协作时：修改时要有对应注释。
• 其他：模块间代码有明显空行进行分割。

#####8、 高级选择器、属性

• 使用高级选择器如“+ 、~、 [type=”xxx”]”要了解其工作的向下兼容性，保证能正常工作。
• 如无特殊要求，a标签只定义a{}和a:hover即可
• 使用a:hover来实现ie6下的hover效果
• :hover以外的其他伪类，暂只做增强效果使用。
• Base64图片，建议图片先转化为png8@透明，代码量节省很多

#####9、 图片

• 每份雪碧图保留psd源文件，并更新至SVN。
• 雪碧图上建议为合并当前页面加载的图片，而不是相同类型的图片。
• PNG24图片建议使用CSSGaga的图片压缩功能压缩为8位alpha透明图片。 组件：btn_、bg_、icon_、模块、页面：nav_、footer_），图片结尾可以图片格式结尾（如：btn_all_8a.png）
• Base64图片的使用：不支持Base64的浏览器要有其替代效果（IE8以下浏览器不支持）

#####10、CSS3、CSS动画的使用原则

• CSS3的使用旨在改善交互体验，做到体验的提升，而不是干扰。在产品上做渐近增强，不能因为CSS3效果而影响产品基础体验。
• 已设计出的效果，在审核设计稿的时候与设计师和产品经理沟通：哪些可以用CSS3来实现，明确可以支持哪些浏览器，抛出风险。
• 未设计出的效果，自己审查时觉得可以优化的，可与设计师沟通想法，或者通过Demo演示，最终确定是否执行，已经怎样执行。

#####11、z-index规范