CSS开发规范，养成良好编码习惯，避免踩坑犯低级错误

前言

很多初学者在写CSS时都忽视了开发规范的重要性，前期没有按照规范书写，任由自己的想法随意去写，结果导致后期代码一团糟，难易维护，为之后编写业务代码（JavaScript）埋雷挖坑，经常容易犯低级错误，比如单词没有写对等。

前端代码跟后端不同，如果没有规范，毫无章法可言，会让其他小伙伴很痛苦，甚至自己都需要浪费很多时间去回忆，当初写这个的作用是什么？

命名的原则就是使用简单易懂的英文单词，小写，从简，可以打开在线翻译，在写代码的过程中还可以学习一些单词，何乐不为呢。

文件命名

外部资源更利于浏览器缓存，减少干扰，便于维护。
文件名称小写，多个单词用_（下划线）分割。

例如：

• common.css（公共样式）
• theme.css（主题色调切换）
• goods_list.css（商品列表）

class类样式

小写，中横线（—）分割

例如：

.header{ ... }/* 头部 */.footer{ ... }/* 底部 */.list-wrap{ ... }/* 列表块 */.js-action{ ... }/* 用于处理JavaScript业务 */

不建议把样式拆分的太细，避免臃肿，看似职责单一，可以直接引用，但是在实际开发过程中，危险很大，动一处则影响全身，很难维护，一般都是按照功能块定义的。

ID选择器

ID选择器是唯一的，一般在JavaScript中处理业务时会调用，使用驼峰式命名

例如：

#goodsList{ ... }/* 商品列表块 */#copyRight{ ... }/* 版权 */