样式命名:使用标准、通用的英文单词进行命名,全部使用小写,遵循BEM规则,如:
.wrap{} //外层容器 .mod-box{} //模块容器 .btn-start{} //开始按钮 .btn-download-ios //IOS下载按钮 .btn-download-andriod //安卓下载按钮 .btn-head-nav1 //头部导航链接按钮 .btn-news-more //更多新闻按钮 .btn-play //播放视频按钮 .side-nav{} //侧栏导航
选择器层级:禁止使用层级过深的选择器,最多3级,如:
正确示范:
.hot-game .hot-game-user-name{}
错误示范:
.page-lol .hot-game .hot-game-hd .hot-game-user-box .hot-game-user-name{}
使用Class进行定义:除非有特定的功能、组件要求等,禁止使用id来定义元素样式
禁止对纯元素选择器设置特定样式:错误示范:
a{background: url("xxx");}