免費(fèi)AI編程助手
Amaze UI HTML/CSS 規(guī)范
2018-10-30 20:11 更新
1.基本規(guī)范
2.HTML/CSS 編寫注意事項(xiàng)
2.1基本原則- 以 am 為命名空間
- 關(guān)注分離，將 HTML、CSS 解耦；模塊化編碼。
- 語義化的模塊名，通過模塊名應(yīng)該能一眼就看出模塊的是干什么的。
- 模塊內(nèi)部的類名繼承自父級(jí)。
如：
<div class="am-box">
<h2 class="am-box-hd">About the Site</h2>
<p class="am-box-bd">This is my blog where I talk about only the bestest things in the whole wide world.</p>
</div>
- 充分考慮結(jié)構(gòu)的語義化。
- 避免不必要的 CSS 選擇符嵌套。Class 已經(jīng)模塊化命名，從類名上已經(jīng)可以清晰的分辨元素的從屬，一般情況下也不會(huì)造成類名沖突，沒有必要再進(jìn)行選擇器嵌套，保持 css 結(jié)構(gòu)清晰，提高渲染效率。特殊情況可以嵌套（如提高權(quán)重、主題之間代碼隔離），但應(yīng)避免過多層級(jí)。
/* 推薦寫法 */
.am-box {
border: 1px solid #333;
}
.am-box-hd {
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #333;
background-color: #CCC;
}
.am-box-bd {
margin: 10px;
}
/* 不推薦寫法 */
.am-box .am-box-hd {}
.am-box .am-box-bd {}
- 與 JS 交互時(shí)，在模塊 HTML 結(jié)構(gòu)的最外一層添加狀態(tài)，而非給模塊每個(gè)子元素單獨(dú)添加元素。給最外層添加狀態(tài)類以后，整個(gè)模塊的樣式都能控制，減少操作，提高性能。
<div class="am-box am-box-active">
<h3 class="am-box-title"></h3>
<p class="am-box-content"></p>
</div>
<div class="am-box">
<h3 class="am-box-title am-box-title-active"></h3>
<p class="am-box-content am-box-content-active"></p>
</div>
- 語義化，望文見義
- 模塊狀態(tài)： {命名空間}-{模塊名}-{狀態(tài)描述}
- 子模塊： {命名空間}-{模塊名}-{子模塊名}
- 模塊嵌套：
<ul class="am-nav">
<li class="am-nav-item">
<a href="#">nav Triggle Link</a>
<ul class="am-subnav">
<li class="am-subnav-item">
<a href="#">subNav Triggle Link</a>
<ul class="am-list">
- 統(tǒng)一命名風(fēng)格（使用相同名詞命名不同組件的子元素）：如 am-tab-hd, am-modal-hd，便于理解。
2.4.1 不要添加瀏覽器廠商前綴
Amaze UI 2.x 開始使用 Autoprefixer 自動(dòng)添加瀏覽器廠商前綴，編寫 CSS 時(shí)不要添加瀏覽器前綴，直接使用標(biāo)準(zhǔn)的 CSS 編寫（也不要使用 mixins.less 里的前綴 mixin）。
特別說明：
Amaze UI 2.x 開始使用 Autoprefixer 自動(dòng)添加瀏覽器廠商前綴，編寫 CSS 時(shí)不要添加瀏覽器前綴，直接使用標(biāo)準(zhǔn)的 CSS 編寫（也不要使用 mixins.less 里的前綴 mixin）。
特別說明：
- 一些瀏覽器的私有屬性可以添加瀏覽器前綴： -moz-appearance, -webkit-appearance 等
2.4.2 需要特別注意的 Class
Amaze UI 中有兩個(gè)表示狀態(tài)的 class：
- .am-active - 激活
- .am-disabled - 禁用
以上內(nèi)容是否對(duì)您有幫助：
更多建議：