一、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思想(非常赞的规范)