CSS代码规范
书写格式，按照bootstrap规范：
-
[建议]为选择器分组时，将单独的选择器单独放在一行。
-
[强制]为了代码的易读性，在每个声明块的左花括号前添加一个空格。
-
[建议]声明块的右花括号应当单独成行。
-
[建议]每条声明语句的 : 后应该插入一个空格。
-
[强制]为了获得更准确的错误报告，每条声明都应该独占一行。
-
[强制]所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
-
[建议]对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如, box-shadow）。
不要在rgb()、rgba()、hsl()、hsla()或rect()值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加 逗号，不加空格）。 -
[建议]对于属性值或颜色参数，省略小于 1 的小数前面的 0
例如，
.5代替0.5; ``-.5px代替-0.5px。 -
[建议]十六进制值应该全部小写，例如，
#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* bad */
.success {
background-color: #ACA;
color: #90EE90;
}
-
[强制]尽量使用简写形式的十六进制值，
例如，用
#fff代替#ffffff。 -
[强制]为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。
-
[强制]避免为 0 值指定单位。
例如，用
margin: 0;代替margin: 0px;。
/* 推荐 */
.selector {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
声明顺序
- [建议]声明顺序
- Positioning
- Box model
- Typographic
- Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。
只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性，如果属性间存在关联性，则不要隔开写
| 显示属性 | 自身属性 | 文本属性和其他修饰｜ |
|---|---|---|
| display | width | font |
| visibility | height | text-align |
| position | margin | text-decoration |
| float | padding | vertical-align |
| clear | border | white-space |
| list-style | overflow | color |
| top | min-width | background |
/* 这里的height和line-height有关联性 */
.m-box {
position: relative;
width: 600px;
height: 200px;
line-height:20px;
margin: 0 auto 10px;
text-align: center;
color: #000;
}
- [强制] ad和banner不要用来作为class名，否则容易被一些浏览器作为弹出广告禁掉
选择器
- [强制]不得为
id、class选择器添加类型选择器进行限定。
在性能和维护性上，都有一定的影响。
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
- [强制]在可以使用缩写的情况下，使用属性缩写。
/* good */
.post {
font: 12px/1.5 arial, sans-serif;
}
- [建议]选择器的嵌套层级应
不大于 3级，位置靠后的限定条件应尽可能精确。
通用
- [强制]清除浮动
当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。不使用增加空标签的方式。
触发 BFC 的方式很多，常见的有：
float 非 none
position 非 static
overflow 非 visible
如希望使用更小副作用的清除浮动方法，参见 A new micro clearfix hack 一文。
另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。
- [强制]不使用
!important声明
当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和
!important定义样式
必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式时，才使用内联的!important样式。通常在第三方环境的应用中使用这种方案。
颜色
- [建议]RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
带有alpha的颜色信息可以使用 rgba()。
- [建议]颜色值可以缩写时，必须使用缩写形式。
/* good */
.success {
background-color: #aca;
}
- [强制]颜色值不允许使用命名色值。
/* good */
.success {
color: #90ee90;
}
/* bad */
.success {
color: lightgreen;
}
字体
- [强制]
font-family属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中.
所谓英文 Family Name，为字体文件的一个元数据.
h1 {
font-family: "Microsoft YaHei";
}
- [建议]字体的字号不小于
12px。
在chrome浏览器中支持的最小字体为12px。以及在windows系统中小于12px的字体渲染就会模糊。
- [建议]
font-weight属性必须使用数值方式描述。
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。
浏览器本身使用一系列 启发式规则 来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 ，故使用数值描述增加了灵活性，也更简短。
| 数值 | 字重 |
|---|---|
| 400 | normal |
| 700 | bold |
/* good */
h1 {
font-weight: 700;
}
/* bad */
h1 {
font-weight: bold;
}
- [建议]
line-height在定义文本段落时，应使用数值 - [建议]
font-family按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。（苹果字体在前，微软字体在后）
优化
- [强制]需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。
如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。
- [强制]禁止使用 Expression。
- [强制]
CSS Sprite
CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取；
CSS Sprite可以减少http请求，提高页面访问速度。
常见不可分割的场景为URL超长。
[建议]语义，统一语义理解和命名，简写时省略元音a、e、i、o、u
| 语义 | 命名 | 简写 |
|---|---|---|
| 文档 | doc | doc |
| 头部 | head | hd |
| 主体 | body | bd |
| 尾部 | foot | ft |
| 主栏 | main | mn |
| 主栏子容器 | mainc | mnc |
| 侧栏 | side | sd |
| 侧栏子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
| 导航 | nav | nav |
| 子导航 | subnav | snav |
| 面包屑 | crumb | crm |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题区 | head/title | hd/tt |
| 内容区 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表单 | form | fm |
| 热点 | hot | hot |
| 排行 | top | top |
| 登录 | login | log |
| 标志 | logo | logo |
广告会被某些浏览器屏蔽掉 |
advertise |
ad |
| 搜索 | search | sch |
| 幻灯 | slide | sld |
| 提示 | tips | tips |
| 帮助 | help | help |
| 新闻 | news | news |
| 下载 | download | dld |
| 注册 | regist | reg |
| 投票 | vote | vote |
| 版权 | copyright | cprt |
| 结果 | result | rst |
| 标题 | title | tt |
| 按钮 | button | btn |
| 输入 | input | ipt |
覆盖规则(CSS 特殊性)
- [建议]模块化分，将某一段具有完整功能的代码划分为
模块 - [建议]全局层面不许出现
通用性过强的选择器。在各模块节点上加强功能性选择器，在模块内部用通用性选择器搭框架，多个模块共用的选择器用带有语义化的名字标出
将模块节点上的
强功能性选择器作为命名空间使用，这种方法在sass的帮助下很容易实现：
性能的问题，以下为总结stackoverfolw上关于css不同写法对浏览器渲染性能的影响问题的回答：
虽然老的浏览器算法中样式匹配是从右到左，但是现代浏览器性能不断提升，内核算法也一直在升级，css的渲染性能越来越强，而且过分考虑选择器、嵌套优化规则，牺牲了代码结构优雅性和可维护性，是得不偿失的。
<!-- 推荐 -->
-- html --
<div class="form-comp login-form-comp">
<form action="">
<div class="item">
<span class="label">用户名</span>
<input class="ipt-lg" name="user_name" type="text">
</div>
<div class="item">
<span class="label">密码</span>
<input name="user_pwd" type="password">
</div>
<input class="submit" id="submitBtn" type="submit">
</form>
</div>
<div class="form-comp regist-form-comp">
<form action="">
<div class="item">
<span class="label">用户名</span>
<input name="user_name" type="text">
</div>
<div class="item">
<span class="label">密码</span>
<input name="user_pwd" type="password">
</div>
<div class="item">
<span class="label">确认密码</span>
<input class="heighlight" name="re_user_pwd" type="password">
</div>
<input class="submit" id="registSubmitBtn" type="submit">
</form>
</div>
其它
参考
- bootstrap代码规范
- fex-team百度代码规范
- 常见字体名称参考表
| 字体 | 操作系统 | Family Name |
|---|---|---|
| 宋体(中易宋体) | Windows | SimSun |
| 黑体(中易黑体) | Windows | SimHei |
| 微软雅黑 | Windows | Microsoft YaHei |
| 微软正黑 | Windows | Microsoft JhengHei |
| 华文黑体 | Mac/iOS | STHeiti |
| 冬青黑体 | Mac/iOS | Hiragino Sans GB |
| 文泉驿正黑 | Linux | WenQuanYi Zen Hei |
| 文泉驿微米黑 | Linux | WenQuanYi Micro Hei |
网友评论