(原创)
从事前端行业数十年了 (2007~2018), 一直在寻找一种无意招胜有招的 CSS 命名法则, 并且能够快速的运用到项目中去, 所以这么多年来, css 命名一直在变化, 以下是最近的心得:
遵循 3 无原则
此 "三无原则" 就是: 无 ID, 无层级, 无标签
无 id
id 一般在网页里面只允许出现一次, 有悖于样式的通用性原则, 所以我们把 id 命名留给 JS, 而把 class 命名留给样式.
无层级
我们不允许有层级的出现, 层级关系让 CSS 优先级变得复杂, 这样有悖于简单, 直接的命名, 我们需要直捣黄龙.
无标签
标签命名降低了渲染效率, 我们要知道, CSS 渲染元素和 JavaScript 获取页面元素是完全不一样的 (或者说是相反的), 如果是 JS 获取 DOM,#test ul 是最快的, 因为 JS 会先找到 #test 然后在 #test 下面找到 ul,js 的底层是这样写的. 如果是 css 那则是相反的, 先渲染所有的 ul 元素, 然后在去渲染 id 为 test 的元素.
是不是很恐怖?
正确命名法则
- .header{}
- .header-logo{}
- .header-nav{}
- .login-wrap{}
- .login-form{}
- .login-form-input{}
- .login-form-submit{}
最新命名法
如何规范的命名, 并且容易传授, 是我一直在思考的, 最近频繁的在国外网站看到了这样的命名:
- .slider-nav_item{}
- .slider-arrow_left{}
- .slider-arrow_right{}
我的理解
用 "-" 去定义一个模块, 用 "_" 去定义模块里面的细节, 比如我们通过. main-register 去定义了主体部分的注册表单的整体部分, 但是注册表单又分为了头部, 身体部分, 尾巴部分, 那么我们就这么命名:
- .main-register{}
- .main-register_head{}
- .main-register_body{}
- .main-register_foot{}
目前最新命名法已经在切图网项目里面小规模使用.
来源: http://www.qdfuns.com/article/49671/e35c580adbcd3506b71f685caf33c2b8.html