作者：Philip大魔王
这篇规范不止用于小程序和vue开发，其他开发均适用。
项目开始时除了端口、架构等规范，命名规范也非常重要，css虽然很少有人会回头详细阅读（更多人是在前辈的遗产下覆盖上去，而不是大量修改），但规范的命名非常有利于查找和理解，特别是层级问题。
我个人书写喜好是，布局名-功能名-元素，比如 .nav-search-btn 但有时候页面会很复杂，而且某些还不能复用，那我建议是不要省，名字写长点，这样下次看到你会非常清晰对应位置，比如 .main-left-nav-search-btn-top-icon （主界面 => 左侧 => 导航栏 => 搜索栏 => 按钮 => 上面 => 图标标签）这个名字很长，但你很轻易地从外到里知道它描述什么位置，什么功能，而越长的名字，也说明复用性越差，越需要知道具体位置。
1）First of all：
搞清楚html布局构成，有利于html书写和css命名
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
当然，也可以有其他的布局命名，比如（nav、aside、section等），可根据页面布局来定义。比如上中下三个模块，那你可能只需用到header、main（或者叫content）、footer。
2）Secondly：
如果结构非常清晰，你看到这里可能已经能命名了，但有些情况会很难过，内容是你中有我，我中有你，这时候就可以引入一些特征名称，比如male、female，这样在对应模块，就能轻易分开，特别是在js内应用css名称时，会好受一点。
比如，一个div内多个text分别写入男人和女人的信息
<div class="main">
<div class="main-male main-person-hardware">男人的身高</div>
<div class="main-female main-person-hardware">女人的体重</div>
<div class="main-male main-person-software">男人的财产</div>
<div class="main-female main-person-software">女人的美颜相机</div>
<div class="main-house">大房子</div>
</div>
作者：Philip大魔王
之所以会出现 .main-person-hardware ，因为用person区分人和物，为后续使用提供更多便利，当然，如果没有更多信息，名字就可以写为 .main-figure （体型）。
3）Then：
还有一些小规范：
1）css中一般都用英文小写
2）不要用拼音，不懂的可以查翻译
3）别过度使用缩写，除非一看就懂的，另可长，也不要让人看不懂
4）一般使用 “-” ，但也有情况使用“_”的
5）命名很长是可以接受的，看不懂命名是要挨批的
这里有一个google首页的css命名给大家感受一下
id="gws-output-pages-elements-homepage_additional_languages__als"
4）Finally：
最后，留一些常见的命名
文件命名：
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
习惯命名（已无法知道该图作者，但仍要隔空感谢）：
网友评论