开发规范 —— css命名规范

作者：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

习惯命名（已无法知道该图作者，但仍要隔空感谢）：