class選擇器命名基本規則app
-
以字母開頭，所有字母小寫ide
-
儘可能簡短、明確工具
-
單個名字若是由多個詞組成，單詞間如下劃線_鏈接
...
設計 -
層級關係以中劃線-鏈接
...
code<text class="notice-title"> ... </text>
繼承式命名orm
爲了保證咱們設計的class樣式既能重複利用，又能避免衝突。咱們採用繼承式來給class樣式命名。視頻
每一個頁面通常均可以分紅幾個模塊，咱們把每一個模塊最外層的class名做爲祖先，模塊內部的class樣式名用祖先名做爲前綴，它們以中劃線-鏈接。（經過這種方式來表示class樣式的做用域）排序
// home是祖先模塊，user和event是home的直接子模塊
<view class="home">
<view class="home-user">
// 用戶信息
</view>
<view class="home-event">
// 動態詳情
</view>
</view>
在頁面結構裏，模塊內部能夠有子模塊，子模塊下面能夠有孫子模塊，以此類推。class樣式命名也按這個層級。繼承
// home是祖先模塊，user和event是home的直接子模塊
// user下面又有兩個子模塊name和signature
<view class="home">
<view class="home-user">
<view class="home-user-name">
// 用戶信息
</view>
<view class="home-user-signature">
// 個性簽名
</view>
</view>
<view class="home-event">
// 動態詳情
</view>
</view>
縮寫圖片
當頁面結構複雜，層級過多，樣式名的前綴就會太多太長，咱們須要對前綴進行縮寫。
當樣式名的前綴太多(通常超過2個)或太長，咱們把每兩個前綴做爲一組，取每一個前綴的第一個字母合在一塊兒組成新的前綴，前綴與前綴或class樣式之間以中劃線-鏈接。縮寫時要保證新的前綴具備惟一性和可辨識性。
// home是祖先模塊，user和event是home的直接子模塊
// user下面又有兩個子模塊name和signature
<view class="home">
<view class="home-user">
// hu就home-user的縮寫
<view class="hu-name">
// 用戶信息
</view>
<view class="hu-signature">
// 個性簽名
</view>
</view>
<view class="photos-desc">
// he 是photos-desc縮寫
<view class="he-photos">
<image class="he-photos-image" src="..."></image>
<view class="he-photos-desc">
// pd 是photos-desc的縮寫
<text class="he-pd-text">...</text>
</view>
</view>
<view class="he-video">
...
</view>
</view>
</view>
經常使用命名推薦
ClassName 含義 about 關於 account 帳戶 arrow 箭頭圖標 article 文章 aside 邊欄 audio 音頻 avatar 頭像 bg,background 背景 bar 欄（工具類） branding 品牌化 crumb,breadcrumbs 麪包屑 btn,button 按鈕 caption 標題，說明 category 分類 chart 圖表 clearfix 清除浮動 close 關閉 col,column 列 comment 評論 community 社區 container 容器 content 內容 copyright 版權 current 當前態，選中態 default 默認 description 描述 details 細節 disabled 不可用 entry 文章，博文 error 錯誤 even 偶數，經常使用於多行列表或表格中 fail 失敗（提示） feature 專題 fewer 收起 field 用於表單的輸入區域 figure 圖 filter 篩選 first 第一個，經常使用於列表中 footer 頁腳 forum 論壇 gallery 畫廊 group 模塊，清除浮動 header 頁頭 help 幫助 hide 隱藏 hightlight 高亮 home 主頁 icon 圖標 info,information 信息 last 最後一個，經常使用於列表中 links 連接 login 登陸 logout 退出 logo 標誌 main 主體 menu 菜單 meta 做者、更新時間等信息欄，通常位於標題之下 module 模塊 more 更多（展開） msg,message 消息 nav,navigation 導航 next 下一頁 nub 小塊 odd 奇數，經常使用於多行列表或表格中 off 鼠標離開 on 鼠標移過 output 輸出 pagination 分頁 pop,popup 彈窗 preview 預覽 previous 上一頁 primary 主要 progress 進度條 promotion 促銷 rcommd,recommendations 推薦 reg,register 註冊 save 保存 search 搜索 secondary 次要 section 區塊 selected 已選 share 分享 show 顯示 sidebar 邊欄，側欄 slide 幻燈片，圖片切換 sort 排序 sub 次級的，子級的 submit 提交 subscribe 訂閱 subtitle 副標題 success 成功（提示） summary 摘要 tab 標籤頁 table 表格 txt,text 文本 thumbnail 縮略圖 time 時間 tips 提示 title 標題 video 視頻 wrap 容器，包，通常用於最外層 wrapper 容器，包，通常用於最外層