命名规范
样式命名
- class、id都需小写
- 命名使用英文，禁止使用特殊字符
- 名称间隔使用-符号
- 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
- 类名命名需要语义化
.wrap{} //外层容器
.mod-box{} //模块容器
.btn-start{} //开始
.btn-download-ios{} //ios下载
.btn-download-andriod{} //安卓下载
.btn-head-nav1{} //头部导航链接1
.btn-news-more{} //更多新闻
.btn-play{} //播放视频
.btn-ico{} //按钮ico
.btn-lottery{} //开始抽奖
.side-nav{} //侧栏导航
.side-nav-btn1{} //侧栏导航-链接1
.btn-more{} //更多
图片命名
- 图片名称必须小写，禁止使用特殊字符、中文
- 使用英文或拼音缩写，禁止特殊字符
- 名称间隔使用
-符号 - 命名需要能体现图片的大概用途
- 禁止文件名和实际图片内容不符
bg.jpg //背景图片
mod-bg.jpg //模块背景
sprites.png //精灵图
btn-start.png //开始按钮
ico-play.png //修饰性图片
文件命名
组件命名采用PascalCase，其他非组件采用kebab-case
页面规范
- 禁止使用层级过深的选择器，最多3级
- 禁止随意使用id来定义元素样式
- 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染
错误示范
//会导致页面所有的a标签都被加上背景
a{background:url(xxx);}
//后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
div span{display:block}
