时间戳

首页 > 解决方案 > BEM：块的修饰符影响所有元素 - 最佳实践？

css - BEM：块的修饰符影响所有元素 - 最佳实践？

问题描述

如果修饰符影响块的所有元素，最佳实践是什么？

在我当前的项目中，我有一个标题。此标题更改为位置：如果用户滚动，则固定。

在标题中有主导航、徽标、语言切换器和电话链接：

<header class="header">
  <div class="header__logo">...</div>
  <nav class="nav nav_main">...</nav>
  <nav class="nav nav_lang-switch">...</nav>
  <div class="header__phone-link"></div>
</header>

在滚动时，标题得到修饰符header_fixed：

<header class="header header_fixed">
  <div class="header__logo">...</div>
  <nav class="nav nav_main">...</nav>
  <nav class="nav nav_lang-switch">...</nav>
  <div class="header__phone-link"></div>
</header>

如果它被固定，标题看起来完全不同：颜色改变，主导航变成汉堡图标导航，lang 开关的图标变小等等。

现在我可以在 CSS 中采用嵌套方式：

.header_fixed .nav_main {...}
.header_fixed .lang-switch__icon {...}
.header_fixed .header__phone-link {...}
...

或者每个改变的块或元素都可以获得它自己的修饰符类。

你对此有什么看法？

问候， 马库斯

标签： cssbem

解决方案

嵌套在这里很好，请参阅https://en.bem.info/methodology/css/#nested-selectors

推荐阅读