持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
今天让我们一起来了解如何让你的前端代码在不失严谨的情况下，更容易阅读和理解，更容易协作与控制。这就使用到一种命名方法论：Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论，能很好的帮助我们实现这样的目标～
块、元素、修饰符方法（通常称为 BEM）是 HTML 和 CSS 中类的流行命名约定。 由 Yandex 团队开发，其目标是帮助开发人员更好地理解给定项目中 HTML 和 CSS 之间的关系
命名模式
block {}，block 代表了更高级别的抽象或组件。block__element {}，代表 .block 的后代，用于形成一个完整的 .block 的整体。block–modifier {}，代表 .block 的不同状态或不同版本
有没有发现，这样做的优势是：可以获得更多的描述与清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。
例如：
<div class="article">
<div class="article__body">
<div class="tag"></div>
<button class="article__button--primary"></button>
<button class="article__button--success"></button>
</div>
</div>
//举例参考大佬例子：https://blog.csdn.net/dong_chl/article/details/103508537?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166498466316800180648824%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166498466316800180648824&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-103508537-null-null.142^v51^new_blog_pos_by_title,201^v3^control_2&utm_term=BEM%20%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83&spm=1018.2226.3001.4187）
那什么时候使用呢？
答案是：当需要明确关联性的模块关系时。如果只是简单单独的样式，就有些不必要了。也并不是说，用的地方越多越好，也不应都使用 BEM 命名方式，按需使用即可。
大佬们建议：尝试使用搭配CSS预处理器进行配合
我们发现，刻意使用一个命名方式，其实也是在无形中增加了一些工作量（例如BEM命名方式长而难看，有些使用成本），可以考虑通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多
大佬们的使用小建议
- 避免
.block__el1__el2的格式 - 在深层次嵌套的
DOM结构下，应避免过长的样式名称
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
