学习 CSS 的 BEM

Question

我正在寻找和学习 BEM 并将其实施到使用 SASS 的公司前端框架中。

您需要一段时间来学习和实施其方法吗？

在构建大型应用程序时，我可以看到它的好处。

Answer 1

我最近开始在一个工作项目中使用 BEM，到目前为止，这是一次极好的学习体验。我强烈建议在新项目中开始使用它，它很容易上手，它极大地提高了代码质量，并遵守了一些关于如何为应用程序的新组件或模块设置样式的标准。

为什么要使用 BEM（块元素修饰符）？

BEM 代表 Block、Element 和 Modifier。 BEM 是 创建为一种前端开发方法 考虑到灵活性和易于修改。 BEM的主要思想 方法是加快开发过程并简化团队合作 的开发商。这是一种思考设计的抽象方式 不依赖 HTML 结构。 BEM 捕捉目的和意义 通过它的 CSS 类名语法。

阻止

块是您页面上的一个组件，可以重复使用，并且可以容纳 里面的元素。块的示例是标题、菜单或 一个图像。块可以包含元素和其他块。

元素

元素是永远只存在于块中的东西。它 取决于存在的块。元素的示例是 标题子标题、菜单项或图像标题。一个元素可以包含 其他元素和修饰符。

修饰符

修饰符定义了块或块的外观和行为 元素。修饰符表示与默认值的状态差异。 例如主题、活动/非活动状态或对齐。

例子：

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

.nav {}
.nav__item {}
.nav--footer {}
.nav__item--active{}

BEM 有助于轻松分解设计并在设计中找到块的“元素”和“修饰符”。 BEM 也可以应用于任何大小的项目。避免嵌套还可以更轻松地调整模块，而不会破坏其他内部功能。代码质量也得到了提高，因为开发人员在添加 hack css 选择器之前会三思而后行。

我的团队还使用 SMACSS“CSS 的可扩展和模块化架构”以及 BEM 将我们的 SASS 拆分为多个模块。这允许轻松找到组件样式，而无需搜索大量长样式表。它使新开发人员更容易找到样式和阅读代码。同样，它适用于所有项目规模。

您可以在此处阅读有关结合 BEM 和 SMACSS 的更多信息 - Combining BEM and SMACSS。

一旦你做出改变，你会想知道你过去是如何构建项目的。使用干净和模块化的代码，它使项目的样式设计更加直接且压力更小。