问题标签 [bem]

可以说我正在创建一个组件“组件”及其子级或修饰符。BEM 风格将是

在 CSS 中，我会严格在 Component 范围内编写 _child 类，因此没有任何全局 _child 类。

我想知道我的风格指南会带来哪些潜在风险或弊端？

给定一个具有某种样式的元素和一个用作BEM 修饰符的附加类（ mywidget_button--disabled），作为实践，使用!important子句是否有意义？

第一个类更具体并且在第二个类中获胜，但是作为禁用类的修饰符（理论上）应该比“通用”样式具有更高的优先级，依赖!important子句是否正确？

还是它会让代码容易让人头疼？

I have the following BEM style Css to define a simple box:

I also need to be able to show the box in error mode so have defined the following modifier:

The problem I'm having is finding a good way to define the styles for the nested elements such as box__heading when the box is in error mode.

Do I also define modifiers on the heading as well as on the parent:

or do I just do this in the css:

我正在尝试使用 BEM 命名约定，并且在决定在何处包含特定页面的修饰符时遇到了一些困难。

例如，假设我有一个橙色按钮：

我的项目有 3 个不同的页面：

按钮上pageB.html应该有一个margin-top:30px. 以这种方式编写修饰符是否正确：

仅针对特定页面包含这样的修饰符的最佳方法是什么？在这种情况下，这将是pageB.html. pageB.scss我应该在or中包含那个修饰符.buttons.scss吗？

我有一种情况，设计师提出了一个设计，其中有一个具有 2 种颜色组合的主按钮。

我正在按照 BEM 的原则编写我的 CSS，我发现很难为这个按钮命名修饰符。

目前，我有一个名为的修饰符类.button--primary，它具有两种颜色组合之一，但是第二种颜色组合也应该适用于主按钮。

通常我只会制作两个不同的修饰符（例如.button--midnight, .button--moss），但目前有很多 javascript 将功能附加到带有 class 的按钮上.button--primary。

我是否应该改为将 更改.button--primary为一个元素（例如button__primary），然后添加我给出的 ealier 示例的两个修饰符？或者我应该在修饰符（例如, ）
上创建 2 个带有修饰符的类？.button--primary--midnight.button--primary--moss

我正在做我的第三个项目，我需要帮助。我需要在添加的图片上对齐文本和图片。所以这是我的 HTML：

可编辑在这里：https ://jsfiddle.net/qpgtvqba/ 也许你可以帮助我并告诉我我的错误在哪里？

我知道 sass 为我们提供了 @extend 方法，它允许我这样做：

但是我宁愿根本不定义抽象类%knob，是否可以__knob从其修饰符中引用/包含在（在这种情况下为宽度和高度）中定义的属性--red和--blue？

我在这里包括 sassmeister 片段以提供帮助：http: //sassmeister.com/gist/58b5b4673a18ecadbba7

此处的示例可能看起来不是问题，但是如果具有长类名的元素具有 2 个或更多不同的修饰符组，并且我不会创建抽象类，我有时会得到看起来像这样的 html 标签<p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p>，我觉得这不是很理想.

我想实现的目标：

引用父元素将允许我将此字符串减少到<p class="some other classes some-house__some-door__some-knob--red"></p>无需声明抽象%knob类

为什么我对在这里使用抽象类犹豫不决：

__door在元素内声明一个抽象类（ http://sassmeister.com/gist/bc49e0885342e96a8fbd）给了我这个结果：

而不是想要的

并在将要使用的范围之外声明一个抽象类会使代码的可读性降低

或者我可以使用不同的方法来使我的代码更具可读性/可维护性？

使用 BEM 命名约定时，显示和隐藏类是否应该将块作为名称的一部分？

所以如果我有 div.block-class 并且我想隐藏它，它应该是 div.block-class.hide 还是 div.block-class.block-class--hide ？

对于那些使用 BEM 方法来编写 CSS 的人。我正在尝试学习 BEM，我从一个简单的例子开始，我有这个：

HTML

CSS

如您所见，这应该是一个简单的水平导航菜单，但是，我想让它垂直。根据 BEM（据我所知），我应该使用Modifier，在这种情况下类似于.menu_vertical，并添加样式以使其垂直，问题是，如果不使用嵌套，我找不到方法选择器（这种方法也不推荐），并遇到一些冲突，我应该在这里做什么？

HTML 布局

布局只是一个示例，我们将social类添加到每个社交列表中。

每个社交块都有不同的样式，我们不能只social在 css 文件中使用类。

所以我不需要将块类添加到社交并且只使用元素类site-header__social，但是如果我希望它成为一个块类怎么办？任何建议按块类命名它？谢谢。