通过BEM命名和SASS嵌套增强CSS

我们所有人都在努力使CSS类保持有序，可维护和更具体。 SASS嵌套和BEM（块-元素-修饰符）结构将帮助我们摆脱这种担忧。

长期以来，我想知道什么是实现有序，可读性和足够具体的CSS代码的最佳方法。 事实证明，已经存在解决方案，我们只需要组合两个我认为非常有用的工具即可。

阅读本文之后，您将了解如何结合使用两种出色的工具（SASS和BEM），从而提高工作效率。 如果您已经了解一些基本的CSS，并且至少听说过SASS，那么这很容易理解。

什么是BEM？

块元素修饰符结构。 这是一种根据CSS类在HTML中扮演的角色来命名它们的方法。 让我们快速查看此结构的每个组件：

• 块：我们可以将块视为在其中要设置样式的嵌套元素的容器。 例如， menu类为无序列表<ul> 。
• 元素： menu类中包含在menu类中的列表项目<li>是我们的元素，我们可以为他们提供一个menu__item类。
• 修饰符：现在，让我们想象一下列表项之一（或菜单中的链接）被禁用或处于“活动”状态，因为我们在该页面上。 这些将是我们的修饰符， .disabled和.active 。 没有修饰符的任何内容只是该元素的默认设置。 修饰符的类可以是.menu__item--active 。

要选择块，我们给它一个类名。 要选择孩子，我们用双下划线__将其分开。 如果我们有一个修正，我们有双破折号添加它--在它的前面： block__element--modifier 。

什么是 SASS ？

最广泛使用的CSS预处理器之一。 它为表带来了变量，函数，mixin，映射以及对本文最重要的嵌套。

例：

让我们看一下带有普通CSS级联选择器的菜单场景的代码（假设我们要为.active项设置样式）：

现在让我们用BEM来看一下：

最后但并非最不重要的一点，让我们一起使用SASS和BEM可以看到：

注意区别吗？ 是的，看起来还有很多东西要写，但是让我们分解一下正在发生的事情，以便您了解这将如何使您的CSS编写更加高效。

步骤1：

我们首先针对Block .menu ，我们可以对其应用任何样式。

第2步：

从那里我们可以定位元素，即.menu__item 。 我们可以使用&定位它&它告诉SASS用__item连接用于父.menu的选择器。

我们可以在此处添加此元素所需的样式，而不必在我们的SASS文件中创建单独的选择器.menu__item 。 我们还可以嵌套该项目的所有变体（修饰符）。

第三步：

在此级别上，我们可以将修改器的样式定位为活动和禁用。 在普通CSS中，分别.menu__item--disabled .menu__item--active或.menu__item--disabled 。 但这并不意味着这就是嵌套的结束。 我们可以遵循相同的模式，并将&与子选择器__xyz嵌套在一起。

这样，我们可以嵌套更多，而不会引起深层CSS层叠。 我们甚至可以在混合中添加:hover ，并说我们希望活动元素具有不同的颜色，大小或文本修饰。 只需在嵌套的__active {...} CSS块中添加&:hover即可实现此目的。 ::after和::before以及任何其他选择器也是如此。

还有更多好处？

这种方法不仅允许我们通过嵌套子类的选择器来快速便捷地设置容器及其子元素的样式。 它还有助于将所有内容保持在同一位置，从而使查找和阅读这些样式变得更加容易。

编译后的CSS文件如下所示：

如您所见，即使它们嵌套在我们的SASS文件中，结果也不会是一团糟，而是结构合理的特定规则集。

BEM是命名类时要遵循的非常强大的结构。 它使我们能够使所有内容保持清晰，特定，可重用并在需要时易于调整。 但是，我们不要否认一遍又一遍地输入长类名会很累。 您想要做的就是使样式起作用，并防止样式表中的其他规则覆盖它们。

这种简单的嵌套和命名模式不仅可以节省时间，还可以节省您的头痛。

假设您必须更改HTML结构，用div替换部分或进行类似的更改。 现在，您必须返回并找到为该div及其子元素所做的每个选择，然后将其替换。 不酷吧？ 使用此方法，您可以将正确的类添加到新元素，仅此而已，无需担心。

如果您发现要为一个元素与其他几个元素重复样式，并且它们位于不同的容器或不同的HTML标签中，该怎么办？ 使用这种方法，您要做的就是将您已有的类放入这些元素中。 尽管它们位于完全不同的位置，但它们仍将正确设置样式。

接下来是什么？

如果您走到了这一步，则意味着您关心的是高效地制作事物，并牢记最佳实践，并渴望尝试新事物以实现这些目标。 以下是官方网站的链接，您可以在其中获得有关BEM和SASS的更多详细文档。

BEM（块-元素-修饰符）

SASS（CSS预处理器）

您可以尝试使用的替代预处理器是PostCSS 。

希望今天是与CSS建立更富有成效的关系的开始！

From: https://hackernoon.com/boost-your-css-with-bem-naming-and-sass-nesting-3x5d3ywo