語義化

1. 語義化標(biāo)簽優(yōu)先
2. 基于功能命名续崖、基于內(nèi)容命名、基于表現(xiàn)命名宪睹。
3. 簡略、明了蚕钦、無后患

范例

<!-- 不好  -->
<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="blue">...</article>
<article class="redBg mt30 bigText">...</article>

<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>

命名規(guī)范

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>

常見命名

.wrap或.wrapper -- 用于外側(cè)包裹
.container或 .ct -- 包裹容器
.header -- 用于頭部
.body -- 頁面 body
.footer -- 頁面尾部
aside整袁、sidebar -- 用于側(cè)邊欄
.content -- 和header footer 對應(yīng)，用于主要內(nèi)容
.navigation -- 導(dǎo)航元素
.pagination -- 分頁
.tabs > .tab -- tab 切換
.breadcrumbs -- 導(dǎo)航列表樱报、面包屑
.dropdown -- 下拉菜單
.article -- 文章
.main -- 用于主體
.thumbnail -- 頭像葬项，小圖像
.media -- 媒體資源
.panel -- 面板
.tooltip -- 鼠標(biāo)放置上去的提示
.popup -- 鼠標(biāo)點(diǎn)擊彈出的提示
.button泞当、.btn -- 按鈕
.ad -- 廣告
.subnav -- 二級導(dǎo)航
.menu -- 菜單
.tag -- 標(biāo)簽
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登錄
.register -- 注冊
.username -- 用戶名
.password -- 密碼
.banner -- 廣告條
.copyright -- 版權(quán)
.modal或者 .dialog -- 彈窗

CSS規(guī)范

書寫規(guī)范

• tab 用兩個空格表示
• css的 :后加個空格迹蛤， {前加個空格
• 每條聲明后都加上分號
• 換行，而不是放到一行
• 顏色用小寫襟士，用縮寫, #fff
• 小數(shù)不用寫前綴, 0.5s -> .5s盗飒；0不用加單位
• 盡量縮寫， margin: 5px 10px 5px 10px -> margin: 5px 10px

范例

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}


/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}


/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}


/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}


/* Always put a blank line (two line breaks) between rules. */
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}


/* Not recommended */
@import url("http://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

參考
google CSS編碼規(guī)范
bootstrap編碼規(guī)范
命名這貨真難