由历史缘由及我的习惯引发的 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