CSS规范
一.命名规范BEM(Block Element Modifier)
1.Block name
1） 实体名称中的单词之间用连字符分隔(-)
HTML
<div class="menu">...</div>
<div class="menu-name">...</div>
CSS
.menu { color: red; }
.menu-name { color: red; }
2.Element name
1） 元素名与块名之间用双下划线分隔(__)
2） 需要注意的是不要出现block__elem1__elem2类似的命名，因为元素总是块的一部分，而不是另一个元素的。
HTML
<div class="menu">
...
<span class="menu__item"></span>
</div>
CSS
.menu__item { color: red; }
3.Block modifier name
1） 修饰符与块或元素的名称之间用双连字符分隔(--)
2） 修饰语的值与其名称之间用双连字符分隔(--)
HTML
<div class="menu menu--hidden"> ... </div>
<div class="menu menu--theme--islands"> ... </div>
CSS
.menu--hidden { display: none; }
.menu--theme--islands { color: green; }
Example:
HTML
<header class="header">
<img class="logo">
<form class="search-form">
<input class="search-form__input search-form__input--focus">
<button class="search-form__button search-form__button--size--s"></button>
</form>
<ul class="lang-switcher">
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">en</a>
</li>
<li class="lang-switcher__item">
<a class="lang-switcher__link" href="url">ru</a>
</li>
</ul>
</header>
CSS
/* 块命名规则1：block */
/* header Block */
.header{
...
}
/* 块命名规则2：block-name */
/* search-from Block */
.header .search-form{
...
}
/* 元素命名规则：block-name__element-name */
/* lang-switcher__item Element */
.lang-switcher .lang-switcher__item{
...
}
/* 修饰符命名规则1：block-name__element-name--modifier-status */
/* search-form__input--focus Modifier */
.search-form .search-form__input--focus{
...
}
/* 修饰符命名规则2: block-name__element-name--modifier-name--modifier-value */
/* search-form__button--size--s Modifier */
.search-form__button--size--s{
...
}
二.注释规范
1.单行注释
1）注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行。
推荐
/* Comment Text */
.sd-style{}
/* Comment Text */
.sd-style{}
不推荐
/* Comment Text */
.sd-style{}
.sd-style{}/* Comment Text */
2.模块注释
1）注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与/占一行，行与行之间相隔两行*
推荐
/* Module A
---------------------------------------------------------------- */
.mod_a {}
/* Module B
---------------------------------------------------------------- */
.mod_b {}
不推荐
/* Module A
---------------------------------------------------------------- */
.mod_a {}
/* Module B
---------------------------------------------------------------- */
.mod_b {}
3.文件信息注释
@charset "UTF-8";
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
三.代码风格
1.代码格式化
1）样式书写一般有两种：一种是紧凑格式 (Compact)
.sd-style{display: block;width: 50px;}
一种是展开格式（Expanded）
.sd-style{
display: block;
width: 50px;
}
我们约定统一使用展开格式书写样式
2.代码大小写
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
3.选择器
1） 尽量少用通用选择器 *
2） 不使用 ID 选择器
3） 不使用无具体语义定义的标签选择器
/* 推荐 */
.sd-style {}
.sd-style li {}
.sd-style li p{}
/* 不推荐 */
*{}
#sd-style {}
.sd-style div{}
4.属性书写顺序
建议遵循以下顺序：
1） 布局定位属性：display / position / float / clear / visibility / overflow
2） 自身属性：width / height / margin / padding / border / background
3） 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4） 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.sd-style {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
5.CSS3浏览器私有前缀写法
CSS3 浏览器私有前缀在前，标准前缀在后
.sd-style {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
网友评论