命名技巧
- 語義化標簽優(yōu)先
- 基于功能命名、基于內(nèi)容命名、基于表現(xiàn)命名
- 簡潔、明了险绘、無后患
范例一
<!-- 不好 -->
<div class="article">
<div class="article_title">編碼規(guī)范</div>
<div class="the_content">今天講的內(nèi)容是編碼規(guī)范，講師
<div class="darkbold">若愚</div> @饑人谷</div>
</div
<!-- 好 -->
<article>
<h1>編碼規(guī)范</h1>
<p>今天講的內(nèi)容是編碼規(guī)范，講師
<b>若愚</b> @饑人谷</p>
</article>
范例二
<!-- 不好 -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>
范例三
<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>
<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>
命名范例
1.所有命名都使用英文小寫
推薦：`<div class="main"></div> `
不推薦： `<div class="Main"></div> `
2.命名用引號包裹
推薦：`<div id="header"></div> `
不推薦： `<div id=header></div> `
3.用中橫線連接
推薦：`<div class="mod-modal"></div> `
不推薦： `<div class="modModal"></div> `
4.命名體現(xiàn)功能宦棺，不涉及表現(xiàn)樣式(顏色瓣距、字體、邊框渺氧、背景等)
推薦：`<div class="text-lesser"></div>`
不推薦： `<div class="light-grey"></div>`
CSS規(guī)范
書寫規(guī)范
-
tab用兩個空格表示 - css的
:后加個空格旨涝，{前加個空格 - 每條聲明后都加上分號
- 換行蹬屹，而不是放到一行
- 顏色用小寫侣背，用縮寫,
#fff - 小數(shù)不用寫前綴,
0.5s->.5s；0不用加單位 - 盡量縮寫慨默，
margin: 5px 10px 5px 10px->margin: 5px 10px
范例
/* 不推薦 */
.test {
display: block;
height: 100px
}
/* 推薦 */
.test {
display: block;
height: 100px;
}
/* 不推薦 */
h3 {
font-weight:bold;
}
/* 推薦 */
h3 {
font-weight: bold;
}
/* 不推薦: 選擇器后沒空格 */
#video{
margin-top: 1em;
}
/* 不推薦: 不必要的換行 */
#video
{
margin-top: 1em;
}
/* 推薦 */
#video {
margin-top: 1em;
}
/* 不推薦 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
/* 保持一個空行. */
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
/* 不推薦 */
@import url("http://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
參考網(wǎng)站
google html css編碼規(guī)范
bootstrap 編碼規(guī)范
命名這貨真難
