前端规范

命名规范

样式命名

1. class、id都需小写
2. 命名使用英文，禁止使用特殊字符
3. 名称间隔使用-符号
4. 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
5. 类名命名需要语义化

 .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{}             //更多

图片命名

1. 图片名称必须小写，禁止使用特殊字符、中文
2. 使用英文或拼音缩写，禁止特殊字符
3. 名称间隔使用-符号
4. 命名需要能体现图片的大概用途
5. 禁止文件名和实际图片内容不符

 bg.jpg          //背景图片
 mod-bg.jpg      //模块背景
 sprites.png     //精灵图
 btn-start.png   //开始按钮
 ico-play.png    //修饰性图片

文件命名

组件命名采用PascalCase，其他非组件采用kebab-case

页面规范

1. 禁止使用层级过深的选择器，最多3级
2. 禁止随意使用id来定义元素样式
3. 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染
   错误示范

//会导致页面所有的a标签都被加上背景
 a{background:url(xxx);}

 //后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
 div span{display:block}

参考地址：https://tgideas.qq.com/doc/frontend/