一、CSS约定:
1、所有CSS都应该通过外部资源文件加载,因为这样能控制其缓存且能使HTML文件更小;
2、外部CSS文件必须通过link标签引用,link标签必须放置在HTML文档的head中,尽可能的放在前面,但必须在title之后。这样能提升性能,且对SEO没有影响。
3、禁止使用@import导入外部样式表,因为这样导入的文件无法控制缓存,且会阻塞渲染。调试文件是唯一的例外。
4、当某个特定页面需要一小段特定样式时,不应在head中直接编写CSS。这种代码无法缓存,且容易导致代码不一致。
5、所有引入的外部样式表文件必须存在(禁止使用占位符)。文件缺失会导致产生不必要的HTTP请求,从而影响性能,产生404错误,影响SEO。
6、CSS文件应该在放置在网站的CSS目录。CSS中使用的图片应该放置在与CSS同级目录下的images目录中,插入图片放在images下的insert文件下,这样可以保证CSS目录自身完整、随意移动,同时区分图片是引用还是插入。
7、生产环境中(线上)提供的CSS文件必须通过压缩工具(YUL Compressor)进行合并和压缩。调试文件必须用做CSS文件合并的配置列表,这样可以提升性能,同时便于维护。
8、适当的时候应该使用CSS背景图片合并技术。这种技术能有效提升性能,因为能较少HTTP请求,尤其针对网速较慢的设备。(项目开发前期,可以先使用单张,项目稳定后在进行合并)
9、禁止使用CSS表达式,因为只有极少浏览器支持,且性能不佳。
10、禁止使用CSS行为文件(HTC文件),因为只有极少数浏览器支持,且会让CSS产生JavaScript代码依赖。
11、不应使用data URI,因为data URI的数据尺寸比原始文件还要大,且无法进行缓存控制。
二、基本规则:
1、应该使用UTF-8字符编码。这样可以避免出现本地化错误。
2、禁止使用内联CSS。这样的样式无法缓存,且会导致代码不一致。
3、禁止使用!important。因为这回影响高级用户使用自定义的用户代理样式,也会影响其他开发者覆盖该CSS声明。
4、不应该使用通用选择器(*),使用该选择器无法达到预期效果,还会破坏继承样式,且对性能有影响。
5、在简单的class或id能满足需求的情况下,应该避免使用复杂的高级选择器或CSS3选择器。复杂选择器对性能有影响。
6、应该尽量使用特殊性低的选择器(如P),根据需要逐步增加特殊性(从右往左,如.aside p)。这样是为了在必要的时候覆盖样式,尽量保持样式简洁。
7、要用到的每个HTML标签,必须至少定义一个简单的CSS元素选择器并为其应用基本的样式;否则,必须所有人都应该知道使用浏览器为该标签定义的默认样式(如表单样式)。这样可以保证跨浏览器一致。
8、不应在零值(0)后面使用单位,此时不要单位。
9、可能的情况下应该多使用简写属性。不过注意简写属性会覆盖各个单独属性。
10、不应修改构建生成的文件(合并压缩的文件)。这会导致混乱,且你的修改会在下次构件时丢失。
11、大板块的class里应该属性ID。
三、选择器的优先级(权重):
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然,IE 6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。
备注:行内样式,指的是html文档中定义的style
Ps:<h1 style=”color: #fff;”>header</h1>
3、第三级优先的属性是由一个或多个id选择器来定义的。
Ps: #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。 Ps: .classname{margin:3px;} 会覆盖 div{margin:6px;}
5、第五级由一个或多个 类型选择器定义。
Ps: div{margin:6px;} 覆盖 *{margin:10px;} 。
6、最低一级的选择器是为一个通配选择器。
Ps:*{margin:10px;}这样的类型来定义。
权重算法:
从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1.
Ps:body #content .data img:hover,最终的权重值是0122;#content是一个id选择器加了100,.data是一个class类选择器加了10,:hover伪类选择器加了10, body和img是元素加了1。
01. *{} ====》0
02. li{} ====》1(一个元素)
03. li:first-line{} ====》2(一个元素,一个伪元素)
04. ul li {} ====》2(两个元素)
05. ul ol+li{} ====》3(三个元素)
06. h1+ *[rel=up] {} ====》11(一个属性选择器,一个元素)
07. ul ol li.red{} ====》13(一个类,三个元素)
08. li.red.level{} ====》21(两个类,一个元素)
09. style=”" ====》1000(一个行内样式)
10. p {} ====》1(一个元素)
11. div p {} ====》2(两个元素)
12. .sith {} ====》10(一个类)
13. div p.sith{} ====》12(一个类,两个元素)
14. #sith{} ====》100(一个ID选择器)
15. body #darkside .sith p {} ====》112(1+100+10+1,一个Id选择器,一个类,两个元素)
备注:更多详细参考
http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
四、注释:
1、文件注释和模块注释都应该遵循CSSDOC格式(http://cssdoc.net)。CSSDOC提供了一种标准化的注释方法。一个典型的CSSDOC注释块(DocBlock)由以下几部分组成:
/**
* short description简短描述
*
* long description详细描述
*
* @tags (optional)标签 (可选)
*/
2、一个CSS文件必须在文件头部包含注释,注释包括如下信息:文本标题、简短描述、详细描述(可选)、关联项目、作者、版权信息和颜色信息(可选)。举例如下:
/**
*3.8 theme(多麦3.8活动)
*
*本样式只适用此次3.8活动
*
*@project (项目) 多麦3.8活动
*
*@author(作者) ken
*
*@copyright (版权) http://duomai.com
*/
3、相关模块之前都应该放置模块注释,目的是便于开发者快速浏览和搜索。格式如下:
/**
*文章列表
*
*@section (段)文章列表
五、格式:
1、左大括号应该在最后一个选择器放在同一行,在选择器和左大括号之间应保留一个空格。每个属性/值对应该独占一行,并保持一个tab缩进。右大括号应该独占一行。每一行属性的冒号和属性值之间应该保留一个空格,且使用分好结束。范例如下:
#content {
color: red;
font-size: 1em;
}
2、如果一个规则中使用多个选择器(选择器分组),每个选择器声明应该占一行。如果在重置样式表中使用或选择器比较短则可以例外。
3、浏览器厂商特定属性应该放置在其他所有属性之后,以便在视觉上有明显区分。浏览器厂商特定属性之后必须放置对应的W3C的标准规则。浏览器私有写法在前,标准写法在后。(-moz-box-shadow: 1px 2px 3px #ddd;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;)
六、命名:
1、class和id名称必须是小写。class和id名称应该仅包含一个单词,且id是唯一的并是父级的。如果有必要使用多个单词,则单词之间必须使用驼峰式写法分割(因为驼峰式可以减少一个字符),如sideNav。当驼峰式写法遇到首字母缩写词时,如果首字母缩写词放在开头则应该使用小写(wwwLink),否则的话应该使用大写(linkWWW)。
2、class和id名称必须使用字母、数字或连字符。禁止使用下划线、斜线或反斜线、星号,不能以数字开头。
3、class和id名称要尽可能地语义化,不要太过抽象。比如针对警告信息样式,应该命名为warning,而不是red。应该坚持使用简单好人的命名,比如nav、aside、footer。
4、命名空间与class或id名称中的其他部分之间必须使用连字符分割。如:news-nav,命名空间是news。
七、文字排版:
1、必须仔细挑选字体栈中的字体。排在第一位的最理想的字体,紧接着是用户可能已安装的字体,紧接着是大多数用户都会安装的字体,最后是系统默认安装的字体。
2、如果想以大写方式显示文本,必须试用text-transform属性将显示转换为大写。这样便于日后对其修改。
3、文字大小应该使用em单位,也可以用%或关键词(如large、small等)。禁止试用像素,因为使用后文字可能无法缩放。
八、颜色
1、使用十六进制颜色时,必须试用小写,这样能让gzip压缩的效果更好。
2、可以以小写形式使用这些命名颜色:black、white、red、blue。命名颜色更适应阅读。
3、使用了背景图片的元素必须有一个备用的背景色。这样能保证在背景图片加载过程中页面仍然好用,且避免出现突兀的颜色变化。(png图片除外)
4、在使用RGBA颜色时5,必须在透明颜色之前声明一个备用的十六进制颜色,以保证不支持RGBA的浏览器可以显示颜色。不应在不透明颜色即可满足需求情况下使用RGBA。
5、禁止对文字使用与背景色一样的文字颜色以达到隐藏的效果。这样做会导致搜索引擎对网站搜索结果进行处罚。