CSS规范

一.命名规范BEM(Block Element Modifier)

1.Block name

-- 实体名称中的单词之间用连字符分隔(-)

HTML

<div class="menu">...</div>
<div class="menu-name">...</div>

CSS

.menu { color: red; }
.menu-name { color: red; }

2.Element name

***-- 元素名与块名之间用双下划线分隔(__)***

***-- 需要注意的是不要出现block__elem1__elem2类似的命名，因为元素总是块的一部分，而不是另一个元素的。***

HTML

<div class="menu">...<span class="menu__item"></span>
</div>

CSS

.menu__item { color: red; }

3.Block modifier name

-- 修饰符与块或元素的名称之间用双连字符分隔(--)

-- 修饰语的值与其名称之间用双连字符分隔(--)

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.单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行。

推荐

/* Comment Text */
.sd-style{}/* Comment Text */
.sd-style{}

不推荐

/* Comment Text */
.sd-style{}.sd-style{}/* Comment Text */

2.模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与/占一行，行与行之间相隔两行*

推荐

/* 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.代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.sd-style{display: block;width: 50px;}

一种是展开格式（Expanded）

.sd-style{display: block;width: 50px;
}

我们约定统一使用展开格式书写样式

2.代码大小写

/* 推荐 */
.jdc{display:block;
}/* 不推荐 */
.JDC{DISPLAY:BLOCK;
}

3.选择器

• 尽量少用通用选择器 *
• 不使用 ID 选择器
• 不使用无具体语义定义的标签选择器

/* 推荐 */
.sd-style {}
.sd-style li {}
.sd-style li p{}/* 不推荐 */
*{}
#sd-style {}
.sd-style div{}

4.属性书写顺序

建议遵循以下顺序：

• 布局定位属性：display / position / float / clear / visibility / overflow
• 自身属性：width / height / margin / padding / border / background
• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
• 其他属性（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;
}