CSS規(guī)范
一.命名規(guī)范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） 需要注意的是不要出現(xiàn)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
/* 塊命名規(guī)則1：block */
/* header Block */
.header{
...
}
/* 塊命名規(guī)則2：block-name */
/* search-from Block */
.header .search-form{
...
}
/* 元素命名規(guī)則：block-name__element-name */
/* lang-switcher__item Element */
.lang-switcher .lang-switcher__item{
...
}
/* 修飾符命名規(guī)則1：block-name__element-name--modifier-status */
/* search-form__input--focus Modifier */
.search-form .search-form__input--focus{
...
}
/* 修飾符命名規(guī)則2: block-name__element-name--modifier-name--modifier-value */
/* search-form__button--size--s Modifier */
.search-form__button--size--s{
...
}
二.注釋規(guī)范
1.單行注釋
1）注釋內(nèi)容第一個字符和最后一個字符都是一個空格字符蛀缝，單獨占一行刘莹，行與行之間相隔一行阎毅。
推薦
/* Comment Text */
.sd-style{}
/* Comment Text */
.sd-style{}
不推薦
/* Comment Text */
.sd-style{}
.sd-style{}/* Comment Text */
2.模塊注釋
1）注釋內(nèi)容第一個字符和最后一個字符都是一個空格字符，/* 與 模塊信息描述占一行点弯，多個橫線分隔符-與/占一行扇调，行與行之間相隔兩行*
推薦
/* 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
*/
三.代碼風(fēng)格
1.代碼格式化
1）樣式書寫一般有兩種：一種是緊湊格式 (Compact)
.sd-style{display: block;width: 50px;}
一種是展開格式（Expanded）
.sd-style{
display: block;
width: 50px;
}
我們約定統(tǒng)一使用展開格式書寫樣式
2.代碼大小寫
/* 推薦 */
.jdc{
display:block;
}
/* 不推薦 */
.JDC{
DISPLAY:BLOCK;
}
3.選擇器
1） 盡量少用通用選擇器 *
2） 不使用 ID 選擇器
3） 不使用無具體語義定義的標(biāo)簽選擇器
/* 推薦 */
.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 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后
.sd-style {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
