前言
现在的互联网大环境，想要找到一个自己很满意且高薪的工作是很难的，而且是大家有目共睹的难，究其原因可能就是互联网作为非传统行业，作为兴起的巨头产业它其中一个很诱惑title->高薪,这无疑吸引了大量人群的涌入，人人都想从互联网行业分一杯羹，希望进入大公司能做到像网络上的电视剧一样，坐在空调全天开放的办公室，免费的健身房和下午茶，再加上各种补贴，所以导致现在的情况就是互联网赛道愈发地拥挤，有些人没有多年的工作经验可能简历海投给许多的公司，但是却得不到面试的机会。在这种艰难情况下，hr也变的难做，因为简历实在太多了，并且在很短的时间内判断一个面试者是否有很强的代码素养和项目能力是很困难的，所以我们在以后的面试中要做到让面试官在短时间内只通过一些项目的demo筛选出自己的简历应该怎么做呢？今天我们就来聊聊这最基本的代码命名素养..
BEM
在国内的各大互联网大厂中，在前端开发的模块中，有一种前端开发的命名规范叫做BEM，全称分别为这三个单词Block、Element、Modefier，这种命名规范由Yandex团队提出，它存在的目的是为了代码的可读性、可维护性和代码的复用性，尤其适用于大型项目的开发和团队协作，以及项目结构比较复杂的环境下。因此，BEM以其独特的魅力占据着不可或缺的地位，成为了大型项目开发和团队协作的首选方案。
下面通过一个简单的例子来具体介绍BEM的命名规范
Example
如下图是WeUI项目的默认样式的组件页面，都是些我们平时使用微信时经常看到的按钮组件。
想请问大家在看到这张效果图时，如果让你编写代码实现这个效果，你的代码思路是怎样的？
三秒钟的时间思考...
3
2
1
time over...
接下来我给大家展示以BEM命名的方法论该如何实现(为简化操作，只设置三个按钮组件，效果图如下)
①设置最大父级盒子page(所有子元素都装里面，作为整体框架)
②向page盒子中加入page__hd和page__bd两个子模块(‘Button’和‘按钮’字体作为head，下面的按钮作为body)
③细化head和body-->在page__hd中分别加入class名为page__title和page__desc的两个div
④在page__bd中加入一个class="button-sp-area"的div，作为所有按钮的父级
⑤细化button-sp-area，在其中分别加入三个子按钮的div，class名分别为weui-btn weui-btn_primary、weui-btn weui-btn_default、weui-btn weui-btn_warn。
⑥finished
以这样的代码规范来对代码命名是不是就很方便，不容易找错组件，而且方便调用且不容易引起歧义，通过上面的例子我们引出BEM的具体代码规范
BEM 命名国际规范（前端开发的命名方法论）
- Block Element 隶属关系__ --块和元素之间用两个下滑线
-比如 __hd 、__bd、 __title、 __desc --Element
- Modifier 修饰符--用一个横杠表示
比如-primary、-default
总体格式为例如，.block__element--modifier这样的格式。
附上demo源码
小结
通过遵循BEM原则，开发者能够编写出结构清晰、易于理解的代码，同时也降低了样式之间的耦合度，减少了CSS中的命名冲突，提高了项目的可维护性，希望jym能在将以后的代码命名规范化，更早地进入大厂赚大米，共同努力共同进步，加油！！
