命名規範

前面的話

  由歷史緣由及我的習慣引發的 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
相關文章
相關標籤/搜索