一. 规范概述
规范是明文规定或约定俗成的标准,规范的制定,表明我们选择一种标准来完成某些事情,这个标准可能更好、更快、更简单等等。而CSS规范的制定,目的在于:
- 形成固定的代码风格
- 选择合适的CSS解决方案
- 提高协同开发的便捷性
二. CSS书写规范
格式与排版
缩进
使用4个空格代替
tab
来进行缩进,类似Atom
的编辑器可以设置。以保证在所有环境下获得一致展现。小写
所有的样式及规则必须小写。统一使用小写易于识别。
空格
- 删除行尾空格
- 选择器与大括号
{
之间保留一个空格 - 声明语句的
:
后保留一个空格 - 逗号
,
之后保留一个空格
- 删除行尾空格
换行
- 所有规则需要换行
- 多组选择器之间需要换行
分号
每条规则结束后都必须加上分号
;
。
/* bad css */
.selector, .selector-secondary, .selector[type=text]{
padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5)
}
/* good css */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
}
格式与编排的规范主要是统一代码风格,提高代码易读性。
属性与值
属性顺序
相关的属性声明应该归组,并按照合适的顺序排列。完整顺序参考:Recess
- Positioning
位置,position, top, right, z-index等。 - Box-model
盒模型,display,float,width,height等。 - Typography & Visual
排版与视效,font,line-height,text-align等。 - Misc
其他,opacity,animation, transition等。
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography & Visual*/ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }
- Positioning
私有属性
私有属性在前标准属性在后。 带私有前缀的属性由长到短排列。
- -webkit-
- -moz-
- -ms-
- -o-
- -khtml-
基本都没有用了,被-webkit-取代。
/* Prefixed properties */ .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15); -ms-box-shadow: 0 1px 2px rgba(0,0,0,.15); -o-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
如何快速添加 Vendor prefixes
使用 Emmet 可以简写上诉代码为-wmso-bxsd
。- w: webkit
- m: moz
- s: ms
- o: o
- 属性简写
在需要显示地设置所有值的情况下,应当尽量使用简写形式的属性声明。
CSS简写属性有:background
/* example */ .selector { background: #f00 url(example.jpg) no-repeat center top; }
font
/* example */ .selector { font: italic bold .8em/1.2 Arial, sans-serif; }
margin
/* example */ .selector { margin: 0 auto; }
padding
/* example */ .selector { padding: 10px 20px 5px; }
- border
- border-top
- border-right
- border-bottom
- border-left
- border-width
- border-color
- border-style
/* example */ .selector { border: 1px solid #000; }
border-radius
/* example */ .selector { border-radius: 3px 3px 0 0; }
- transition
- transform
list-style
参考文档:Shorthand properties
属性值分组
对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组。
/* example */ .selector { background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)) ); }
数字
0
如果属性值为0,则不需要为0加单位。/* bad css */ .selector { padding: 0px 20px; } /* good css */ .selector { padding: 0 20px; }
小数
如果是0开始的小数,前面的0可以省略不写。/* bad css */ .selector { width: 0.4rem; margin-top: -0.1rem; } /* good css */ .selector { width:.4rem; margin-top: -.1rem; }
引用
不要在url()里对引用资源加引号。
/* bad css */ .selector { background:url("example.jpg") ; } /* good css */ .selector { background:url(example.jpg) ; }
文本
文本内容必须用双引号包围。文本类型的内容可能在选择器、属性值等内容中。
/* bad css */ html[lang|=zh] q:before { font-family: 'Microsoft YaHei', sans-serif; content: '“'; } /* good css */ html[lang|="zh"] q:before { font-family: "Microsoft YaHei", sans-serif; content: "“"; }
颜色
RGB颜色值必须使用十六进制记号形式。将所有的颜色值小写。可以缩写的缩写至3位。
/* bad css */ .selector { background: rgb(255, 0, 0) ; color: #00FF00; } /* good css */ .selector { background: #f00 ; color: #0f0; }
三. CSS命名规范
组成
单词组合
避免使用拼音。
不依据表现形式来命名。
根据内容来命名。
根据功能来命名。
使用业界熟知的或者约定俗成的。
避免选择器命名过长时可选择使用缩写,保证缩写后还能较为清晰保持原单词所能表述的意思。
常用命名:/* bad css name */ .left, .right, .center, .red, .black /* good css name */ .nav, .aside, .news, .type, .search
- 结构
- 外壳:wrapper (wrap)
- 头:header (hd)
- 内容:content / container (cont)
- 尾:footer (ft)
- 导航:navigation (nav)
- 侧栏:sidebar
- 栏目:column
- 页面主体:main
- 子导航:subnav
- 菜单:menu
- 子菜单:submenu
- 列表:list
- 功能
- 登录条:loginbar (login)
- 热点:hot
- 下载:download
- 搜索:search
- 滚动:scroll
- 加入:joinus
- 指南:guide
- 服务:service
- 注册:regsiter
- 状态:status
- 投票:vote
- 合作伙伴:partner
- 内容
- 标志:logo
- 广告:banner
- 新闻:news
- 友情链接:friendlink
- 版权:copyright
- 标签:tags
- 小技巧:tips
- 提示信息:msg
- 栏目标题:title
- 结构
中划线
输入的时候少按一个shift键。
浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)。
能良好区分JavaScript变量命名(JS变量命名是用_
)。数字
前缀
CSS选择器使用前缀能够较好的控制样式在项目间的影响。
g-
全局通用样式命名,前缀g全称为global,一旦修改将影响全站样式。
m-
模块命名方式。
ui-
组件命名方式。
js-
所有用于纯交互的命名,不涉及任何样式规则。JSer拥有全部定义权限。
四. CSS其他规范
目录
styles
- lib
基础库- core
Reset、全局设置、全局方法、全局函数、全局变量。 - element
元素样式。 - widget
公用组件。 - layout
全局布局。 - ani
公用动效。 - font
公用字体。
- core
- usage
具体实现。- project
项目名- core
桥接lib中的core,进行项目级扩展,制定项目样式默认尺寸、颜色等。 - widget
项目组件,扩展于lib中widget。 - module
项目模块。 - page
页面特殊样式。 - theme
主题。 - mend
补丁。 - export
样式打包输出。
- core
- project
- lib
文件
命名
- 模块样式的文件名应与模块名保持一致
- 页面样式的文件名应与页面名保持一致
协议
省略图像、媒体文件、样式表和脚本等URL协议头部声明(
http:
,https:
)。如果不是这两个声明的URL则不省略。引用
一般情况下,在页面中只允许使用
<link />
标签来引用CSS文件。
避免在页面中使用<style>
块。
避免在<style>
块中使用@import
。
避免使用style
属性写行内样式。
编码
以UTF-8
无BOM编码作为文件格式。
HTML中文档中用 <meta charset="utf-8" />
来指定编码。
CSS文档显示的定义编码,在文档首行定义 @charset "utf-8"
。
统一编码,避免编译错误。
模块化
每个模块对应同名文件,模块样式以模块名开头,子节点继承模块名开头,孙节点无需再带模块名。
.m-detail {
background: #fff;
color: #333;
}
.m-detail-hd {
padding: 5px 10px;
background: #eee;
}
.m-detail-hd .title {
background: #eee;
}
选择器
重构工程师只允许使用class
。
择器的嵌套层级尽量不大于3级。
避免使用低效率选择器。具体详见:CSS选择器。
注释
尽可能的为代码添加注释,CSS注释可以区分样式模块、解释作用、问题描述。
文件注释
/** * @Description: 中文说明 * @Author: name * @Update: name (2013-04-13 18:32) */
普通注释
/* 普通注释 */
模块注释
/** * Module: m-detail * Description: 中文说明 */
特殊注释
/* TODO: xxxx by name 2013-04-13 18:32 */ /* BUGFIX: xxxx by name 2012-04-13 18:32 */
区块注释
/* Header */ /* Footer */ /* Gallery */
Hack
尽避免使用Hack,如果一定要使用,可以使用以下方式:
属性与值
\9
For all IE\0
For IE8 and later, Opera without Webkit\9\0
For IE8 and later\0/
For IE8 and later*
For IE7 and earlier_
For IE6 and earlier
.test { color: #000; color: #111\9; color: #222\0; color: #333\9\0; color: #444\0/; *color: #666; _color: #777; }
条件注释
<!--[if <keywords>? IE <version>?]> <link rel="stylesheet" href="*.css" /> <![endif]-->
- 空:指定是否IE或IE某个版本
- gt(greater than): 大于IE某个版本
- gte(greater than or equal to): 大于等于IE某个版本
- lt(less than): 小于IE某个版本
- gt(less than or equal to): 小于IE某个版本
图像
压缩
所有图片必须经过一定的压缩和优化才能发布。
在线压缩:online image optimizer格式
不透明图像使用JPEG。
透明图像使用PNG。
需要兼容IE6时,使用PNG8。合成
使用CSS Sprite减少http请求。
五.总结
附
参考文档
- [1].https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax
- [2].https://github.com/doyoe/html-css-guide
- [3].http://www.cnblogs.com/whitewolf/p/4491707.html
- [4].http://www.jb51.net/css/141575.html
- [5].https://segmentfault.com/a/1190000002460968#articleHeader12