一、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书写顺序!

  1. 位置(position, top, right, z-index, display, float等)
  2. 大小(width, height, padding, margin)
  3. 文字(font, line-height, letter-spacing, color- text-align等)
  4. 背景(background, border等)
  5. 其他(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思想(非常赞的规范)

最后修改:2021 年 03 月 31 日 11 : 10 AM
如果觉得我的文章对你有用,请随意赞赏