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

最新推荐文章于 2023-12-20 22:51:05 发布

翻译最新推荐文章于 2023-12-20 22:51:05 发布 · 448 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://hackernoon.com/boost-your-css-with-bem-naming-and-sass-nesting-3x5d3ywo

文章标签：

#java #css #python #人工智能 #linux

本文介绍如何结合使用BEM（块-元素-修饰符）命名规范和SASS预处理器，以提高CSS代码的可维护性、可读性和效率。通过具体的代码示例，展示了如何利用SASS的嵌套功能和BEM的命名结构，使得样式表更加有序、易于管理和扩展。

css命名bem

我们所有人都在努力使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--active或.menu__item--disabled 。但这并不意味着这就是嵌套的结束。我们可以遵循相同的模式，并将&与嵌套的子选择器__xyz一起__xyz 。

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