文章内容
2017/7/24 16:00:52,作 者: 黄兵
css规范
- 1 前言
本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。
- 2 文件
2.1 文件编码
建议： CSS 文件使用无 BOM 的 UTF-8 编码。
解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。
2.2 文件名
强制：创建 CSS 文件名要语义化。
解释：好的语义化文件名，方便查找。用单词命名，多个单词用"_"下划线拼接。
示例：
index.css //首页 article.css //文章页 details.css //详情页 personal_member.css //个人会员页 business_member.css //商户会员页
- 3 代码风格
3.1 选择器命名
建议： CSS 选择器名要语义化。
解释：好的语义化选择器名，方便查找。选择器名尽量用单词、缩写语义化命名，多个单词用"-"中划线拼接。
/* 商品 */ .goods { } /* 商品列表 */ .goods-list { }3.2 缩进
强制：使用 4 个空格做为一个缩进层级，不允许使用 2 个空格。
示例：
.box { padding: 0; margin: 0; }3.3 空格
强制：选择器 与 { 之间必须包含空格。
示例：
.box { }强制： 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
示例：
padding: 0;
3.4 选择器
强制：当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
示例：
.post, .page, .comment { line-height: 1.5; }强制：当一个 >、 +、~ 选择器的两边各保留一个空格。
示例：
/* 推荐的 */ main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; } /* 不推荐的 */ main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~button { background-color: #69C; }强制：属性选择器中的值必须用双引号包围。
解释：不允许使用单引号，不允许不使用引号。
示例：
/* 推荐的 */ article[character="juliet"] { voice-family: "Vivien Leigh", victoria, female } /* 不推荐的 */ article[character='juliet'] { voice-family: "Vivien Leigh", victoria, female }3.5 属性
强制：属性定义必须另起一行。
示例：
.box { padding: 0; margin: 0; }3.6 BEM命名示例
解释：BEM 是一种前端项目开发的方法学，由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母，分别是块（Block）、元素（Element）和修饰符（Modifier）。这三个不同的组成部分称为 BEM 实体。比较下面这两种不同的方式，BEM 的优点在于所产生的 CSS 类名都只使用一个类别选择器，可以避免传统做法中由于多个类别选择器嵌套带来的复杂的属性级联问题。在 BEM 命名规则中，所有的 CSS 样式规则都只用一个类别选择器。因此所有样式规则的特异性（specificity）都是相同的，也就不存在复杂的优先级问题。这可以简化属性值的层叠规则。代码清单中的命名规则的好处在于每个 CSS 类名都很简单明了，而且类名的层次关系可以与 DOM 节点的树型结构相对应。BEM 命名规则的可能的缺点在于 CSS 类名会比较长而且复杂。乍看之下，根据 BEM 命名规则产生的 CSS 类名都会很复杂，但实际上在熟悉了命名规则之后，可以很容易理解其含义。
示例：
/* 使用 BEM 命名规则的 CSS 类的 HTML 代码 */ .menu { list-style: none; } .menu-item { font-weight: bold; } .menu-item-selected { color: red; } <ul class="menu"> <li class="menu-item menu-item-selected">Menu Item 1</li> <li class="menu-item">Menu Item 2</li> <li class="menu-item">Menu Item 3</li> </ul> /* 使用传统命名规则的 CSS 类的 HTML 代码 */ .menu { list-style: none; } .menu .item { font-weight: bold; } .menu .item.selected { color: red; } <ul class="menu"> <li class="item selected">Menu Item 1</li> <li class="item">Menu Item 2</li> <li class="item">Menu Item 3</li> </ul> /* 弹窗示例 */ /** * 首页 * @author Sea [email protected] * @date 2017-02-05 */ /*------------------------------------------------------------------ | 结算弹窗 |------------------------------------------------------------------- */ .modal { position: fixed; } .modal-dialog { position: relative; } .modal-content { position: relative; } .content-title { padding-left: 10px; } .content-body { position: relative; } /* 其他组员新添加的注释示例 */ /* @author Sea 2017-02-09 */ .test { padding: 20px; } <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- 弹窗盒子 --> <div class="modal-dialog" role="document"> <!-- 弹窗盒子-规格 --> <div class="modal-content"> <!-- 弹窗盒子-内容 --> <div class="content-header"> <!-- 内容盒子-头部 --> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="content-title" id="myModalLabel">Modal title</h4> <!-- 内容盒子-标题 --> </div> <div class="content-body"> <!-- 内容盒子-内容 --> ... </div> <div class="modal-footer"> <!-- 弹窗盒子-底部 --> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
- 4 值与文本
4.1 文本
建议： 内容必须用双引号包围。
解释：文本类型的内容可能在选择器、属性值等内容中。
/* 推荐的 */ html[lang|="zh"] q:before { font-family: "Microsoft YaHei", sans-serif; content: "“"; } html[lang|="zh"] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; } /* 不推荐的 */ html[lang|=zh] q:before { font-family: 'Microsoft YaHei', sans-serif; content: '“'; } html[lang|=zh] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; }4.2 url()
强制：函数中的路径不加引号。
示例：
body { background: url(bg.png); }建议： url() 函数中的绝对路径可省去协议名。
示例：
body { background: url(//baidu.com/img/bg.png) no-repeat 0 0; }4.3 长度
强制：0 时须省略单位。 (也只有长度单位可省)
示例：
/* 推荐的 */ body { padding: 0 5px; } /* 不推荐的 */ body { padding: 0px 5px; }4.4 颜色
强制：RGB颜色值必须使用十六进制记号形式 #rrggbb，不允许使用 rgb()。
解释：带有alpha的颜色信息可以使用rgba()，使用rgba()时每个逗号后必须保留一个空格。
示例：
/* 推荐的 */ .success { box-shadow: 0 0 2px rgba(0, 128, 0, .3); border-color: #008000; } /* 不推荐的 */ .success { box-shadow: 0 0 2px rgba(0,128,0,.3); border-color: rgb(0, 128, 0); }
评论列表