携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
很多人讨厌 CSS，一个原因在于它调试起来非常麻烦，另一个原因在于我们很少花时间去学习 CSS。
当我们随着页面越来越丰富，写了很多 CSS 之后，很快能发现这个 CSS 非常难维护。
本篇主要通过 BEM 命名约定，来节省我们维护项目的 CSS 的时间。
命名约定
每个团队有不同的方法来编写 CSS 选择器，一些团队使用连字符分割，有一些人更喜欢使用更加结构化命名约定。
一般来说，CSS 的命名约定主要解决：
- 知道这个是什么选择器；
- 类名称之前的关系；
采用比较好的命名约定术来确保每个 HTML 类都是可读的，并且很容易在你的代码库中被发现。它使用的主要技术是 BEM 方法编写。
例子一：navigation
<nav class="navigation">
<a href="#" class="navigation__item">Item</a>
<a href="#" class="navigation__item">Item</a>
<a href="#" class="navigation__item navigation__item--primary">Item</a>
</nav>
例子二：伪风扇
B
B 在 BEM 中代表“块”，这种“块”可以代表一个网站导航、页眉、页脚
“风扇”是一个组件，根据我们上面的说法和例子，这个组件比较合适的类名是 fake-fan
所以组件的命名风格：
.fake-fan{}
E
E 代表元素，例如，这个“风扇”的“头”、“身体”、“脚”。
这几个元素在组件中，它们被视为子组件。
根据 BEM 的命名约定，元素类名称派生通过添加 两个下划线, 然后是元素名称。
.fake-fan__head {}
.fake-fan__content {}
.fake-fan__footer {}
M
M 代表修饰符，我们可以有不同颜色的风扇
在我们网页开发的时候，这通常是一个不同的颜色的按钮，这些是修改组件的问题。
根据 BEM 的命名约定，修饰符的类名是通过连字符，然后是修饰符名称。
.fake-fan--black{}
.fake-fan--blue{}
风扇的“头”有可能大或者小
.fake-fan__head--small {}
.fake-fan__head--big {}
请注意: 在上面的例子中, "small" 用来表示一个修饰词。
为什么要使用命名约定
再谈谈为什么要使用命名约定，命名的事情是很难的，命名正确的 CSS 会使得你的代码更容易阅读和维护。
如果你选择使用 BEM 命名约定，会更容易看到你的设计组件-模块之间的关系。
CSS 和 Javascript
在网上看到的优化中可能发生的问题
<div class="fakeFan"></div>
<!-- 被改成了 -->
<div class="fake-fan"></div>
那么这就获取不到元素了
const oFakeFan = document.querySelector('.fakeFan')
为了防止这种情况发生
使用 js- 类目
<div class="fake-fan js-fake-fan"></div>
const oFakeFan = document.querySelector('.js-fake-fan')
使用 Rel 属性
<div class="fake-fan" rel="js-fake-fan"></div>
const oFakeFan = document.querySelector("[rel='js-fake-fan']")
最后
不太明显的 CSS 样式代码写上注释。。
