CSS命名规范(BEM思想)及书写规范

2020 年 08 月 24 日

2655 次浏览

1596字数

一、BEM思想

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

当然，我使用的并不是最原始的BEM思想，甚至也不是引用的那篇文章中的写法。

规范的命名可以增加css的可读性，便于后期的维护。而为了更方便的开发及维护css代码，我抛弃了原文中使用的“-”符号。为什么呢？因为 ~~(懒)~~ 这个符号会导致不能双击选中整个命名。

所以，开发过程中，我一般都使用 “_” 代替 “-” 。

例如：

.search_box{}
.search_icon_box{}
.search_icon_item{}

这样可以让我一次选中整个命名，并不会降低命名的可读性！~~当然如果你的代码要兼容IE6就不能用“_”了，但是现在谁还用IE6呢？~~

所以，大家就不要用拼音，单字母，单字母+数字来命名了。

ok，命名的规则定了之后呢，就是一些在使用中的问题了。咳咳，重点来了！

对元素做样式修改，请勿使用id，统一使用class。id仅在dom操作中使用！
除清除默认样式外，请勿使用元素名来做样式修改！不然打开css文件一堆ul,li,div???~~请问你修改的是谁?~~
如无必要，请勿进行css嵌套！！！~~请公平对待每个元素！~~为了提高渲染效率。如果非要嵌套，请不要超过两级。请不要写什么.search .search_item div{}
Emmm等我想想还有啥

二、CSS书写顺序！

位置(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

例如：

.search_box {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    width: 200px;
    height: 50px;
    font-size: 12px;
    color: #AFA;
    background-color: #FFA;
    transition: .2s;
}

为什么要建议大家这么写呢？说到底，还是为了页面更快的加载。当然，这里涉及到了浏览器的渲染流程，如果想了解浏览器的渲染流程的话，可以参考这篇文章：浏览器渲染过程

谢谢浏览！如有前端/后端问题与我讨论，可发邮件至：l@lingmx.com

参考文章： CSS命名规范——BEM思想（非常赞的规范）

CSS命名规范(BEM思想)及书写规范