这篇规范不止用于小程序和 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
习惯命名 (已无法知道该图作者, 但仍要隔空感谢):
来源: http://www.jianshu.com/p/6efe2d229bd2