# css 命名弊端
你是否有见过这样的代码？
.top--left .left1-block_nav-liItem > li a{
}
.gy-theme .bar-header .hy-nav .order-search .pull-down.active .select-drop {
display: block
}
上面的代码风格各异的使用了 - , _，驼峰等风格而且嵌套深，CSS 引擎查找样式从右到左进行匹配，遍历页面上每个 li a 元素并确定其父元素。
每个人的代码都有自己的风格在，对于个人来说作者本人也会对自己写的代码会比较熟悉，但是放在多人开发上就显得另类了。协同开发的小伙伴可能根本不知道你写的是什么，甚至跟你写的代码冲突覆盖。或者会反感你写的代码，因为他会为此多敲几次键盘，为了少敲几次键盘，他可能会“友好的问候”你。
为了让你不被小伙伴孤立，那么这次的讲解可能会对你有大好之处。这次也是为了让你少敲几次键盘。:)
我们先了解一下 css 中命名规范中的 BEM。
# 什么叫BEM？
BEM 是 BlockElementModifier 的简称，其实是块（block）、元素（element）、修饰符（modifier）的简称，是 CSS 中的一种命名规范。这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。
BEM 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素，还有一些是组件的其他形态或者是修饰符。
可能你还是不太理解什么是BEM，没关系，我们看一下下面这个大家比较熟悉的哆啦A梦吧，看看这之间有什么相似之处。
上面的哆啦A梦如果用进行分块，可以分为头部（脸部），手部，脚部这三大块。其中我们把脸部拿出来细分：眼睛、嘴巴、鼻子，用关系图表示：
我们用 BEM 规范来表达一下哆啦A梦的结构：
<template>
<view>
<view class="doraemon">
<view class="doraemon__face">
<view class="doraemon__face-eye "></view>
<view class="doraemon__face-mouth"></view>
<view class="doraemon__face-nose"></view>
</view>
<view class="doraemon__hand">
<view class="doraemon__hand-finger"></view>
</view>
<view class="doraemon__footer">
<view class="doraemon__footer-toe"></view>
</view>
</view>
</view>
</template>
<style lang="scss">
.doraemon{
.doraemon-face{
.doraemon-face_eye{}
.doraemon-face_mouth{}
.doraemon-face_nose{}
}
/* 或者使用 @root */
@at-root #{&}-face {
@at-root #{&}_eye{}
}
.doraemon-hand{
.doraemon-hand_finger{}
}
.doraemon-footer{
.doraemon-footer_toe{}
}
}
</style>
上面使用 BEM 规范块和元素之间用 – 连接，元素和修饰符之间用 _ 连接 （b–e_m），来命名 CSS（用代码组织哆啦A梦），组织 HTML 元素结构，一一对应 CSS 代码，使得代码结构更清晰。
看起来是不是好像有些少了点意思，为什么？因为名字还是长呀。
接着看下一步吧！
# 页面布局 + BEM + scss
使用 BEM 的方式，还是混淆使用 -，_，而且命名方式长，就命名这一个会让你举手投降。平常利用 BEM 的规范思想，我自己有一套命名规范。比如上面的代码我们已经在外层指定了 doraemon ，那 doraemon 包含的元素就是属于 doraemon 的了，没有必要再加上 doraemon 了，因此我们可以这么去做：
<template>
<view>
<view class="doraemon">
<view class="face">
<view class="eye"></view>
<view class="mouth"></view>
<view class="nose"></view>
</view>
<view class="hand">
<view class="finger"></view>
</view>
<view class="footer">
<view class="toe"></view>
</view>
</view>
</view>
</template>
<style lang="scss">
.doraemon{
.face{
.eye{}
.mouth{}
.nose{}
}
.hand{
.finger{}
}
.footer{
.toe{}
}
}
</style>
