如何写出优雅的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;
}