JS 对 BEM CSS 结构的操作

Question

我很难得到这个： BEM 结构说我应该这样做：

.header
   .header__nav
      .header__icon
         .header__icon-text
      .header__menu
         .header__menu-list

但是如果我想切换 header__nav 的一些 CSS class 来修改其余的 class 怎么办？说吧，像这样：

.header
   .header__nav .header__nav--active
      .header__icon
         .header__icon-text
      .header__menu
         .header__menu-list

很明显，我不想仅仅操纵父级 (.header__nav)，还想操纵其子级，仅出于性能原因使用 CSS。但是在 BEM 结构中，似乎我必须为每个子元素切换 classes - 这是胡说八道！或者我需要为每个子元素使用特定的状态（elem--active）并且我还需要确保它在 CSS 顺序中的正确结构 - 再次胡说八道！

我真的希望我没有做对，实际上有一种以性能明智的方式做到这一点的方法 - 使用 JS 切换一个 class 以使用 CSS 修改其余部分。

Answer 1

您可以为此使用嵌套选择器。有关详细信息，请参阅 https://en.bem.info/methodology/css/#nested-selectors。

JS 对 BEM CSS 结构的操作

JS manipulation over BEM CSS structure

html

javascript

css

bem