前端代碼規範-CSS

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;
}