BEM:如何确保一个块中的 CSS 值覆盖另一个块中定义的属性?

科菲

我正在使用 BEM 并且在从一个块获取属性以覆盖另一个块中的样式时遇到问题。我知道有些人可能会建议为 .button 添加一个修饰符,但在某些情况下,某些属性需要应用于单个页面,因此不值得添加一个完整的其他修饰符。

这是一个例子,只是为了说明我的问题:

.button {
  padding-left: 0;
}

现在,当我添加一个 padding-left 时,它得到的padding-left: 0;不是我想要使用的值而是在.my-block.

.my-block {
  &__button {
    padding-left: 5px;
  }
}

确保padding-left: 5px;应用而不是应用的最佳方法是什么padding-left: 0;

达图

我假设您使用混合,以便标记如下所示:

<button class="button my-block__button">

如果是这种情况,您需要确保捆绑包中的顺序(.button 的样式应该总是在之前.my-block__button)。

BEM 平台中,我们使用deps 系统为我们提供保证。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何确保一个元素不被另一个(CSS)覆盖?

CSS网格-一个块与另一个块不同

如何在纯CSS中将定义的属性值用作另一个属性?

如何覆盖css并使用react js中的另一个组件导入

CSS Grid 在一个块中的不同布局

CSS 自定义属性作为另一个属性的后备值而不是固定(预定义)值

当另一个元素纯粹悬停在 css 中时,如何更改一个元素的样式属性?

在另一个块中执行块

更改位于另一个页面中的另一个 div 的 CSS 属性

用另一个类覆盖CSS类中的第一个孩子

如何防止一个组件中的 css 影响 React 中另一个组件中的 css?

在另一个块中的 IF 语句的前一个块中调用变量

如何解析文本块并获取取决于该块中另一个值的值

是否可以在另一个XAML块中包含一个XAML块?

如何使用布局xml将我的自定义块放置在Magento的另一个块中?

CSS nth类在另一个类中

CSS-另一个类中的类

如何在PHP的另一个开关案例块中检索分配给一个开关案例块中变量的值?

变量在另一个块中也可见

从另一个CSS文件扩展属性

继承另一个父CSS属性

表属性与另一个的重叠CSS

检查一个元素在CSS中是否还有另一个元素

在另一个组件中修改一个组件模板的 CSS

从另一个移动块添加一个节点作为属性并删除块

如何使用CSS根据页面中另一个元素的状态选择一个元素?

当一个元素悬停并影响CSS中的另一个元素/类时,如何添加悬停效果?

如何在CSS中向右定位并让项目低于一个和另一个

将自定义注册块导入到Gutenberg中的另一个自定义块