由歷史緣由及我的習慣引發的 DOM 結構、命名不統一,致使不一樣成員在維護同一頁面時,效率低下,迭代、維護成本極高。因此,使用統一的命名規範很是必要。本文將詳細介紹命名規範css
一、項目文件夾:projectnamehtml
二、樣式文件夾:cssspa
三、腳本文件夾:jscode
四、樣式類圖片文件夾:imghtm
圖片命名建議以如下順序命名:blog
(m_)圖片功能類別(必選)+ 圖片模塊名稱(可選) + 圖片精度(可選)圖片
m_表示是否公共,可選scss
【圖片功能類別】it
icon:模塊類固化的圖標class
logo:LOGO類
spr:單頁面各類元素合併集合
btn:按鈕
bg:可平鋪或者大背景
pic :表示當前內容或業務的圖片
【圖片模塊名稱】
goodslist:商品列表
goodsinfo:商品信息
userportrait:用戶頭像
【圖片精度】
普清:@1x
Retina:@2x | @3x
//公共模塊:
m_btn_goodlist@2x.png
m_btn_goodlist.png
//非公共模塊:
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png
確保文件命名老是以字母開頭而不是數字,且字母一概小寫,如下劃線鏈接且不帶其餘標點符號,如
<!-- HTML -->
connect.html
connect_list.html
connect_detail.html
<!-- SASS -->
connect.scss
connect_list.scss
connect_detail.scss