主页 / 问题 / 918241
Accepted
Виталик Черный
Asked:2020-12-11 04:24:36 +0000 UTC2020-12-11 04:24:36 +0000 UTC

html 元素的名称。边界元法

  • 772

混合

允许您在同一个 DOM 节点上使用不同 BEM 实体的技巧。

混合允许：

  • 结合多个实体的行为和样式，无需重复代码；
  • 项目清单

<!-- Блок `header` -->
<div class="header">
  <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
  <div class="search-form header__search-form"></div>
</div>

资料来源： 快速入门 - 混合。

我有一个块header。它里面是一个菜单nav和子元素nav__item，nav__link。我需要更改导航的样式，为此我添加了类：header__nav、header__item、header__link。问题是headerblock里面可能还有其他的link，但是会有不同的style，header__link不适合命名，而且通过主父类写style也是不好的，因为会在不同的地方重复，但会有不同的风格。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="nav header__nav">
      <li class="nav__item header__item">
        <a href="#home" class="nav__link header__link">Home</a>
      </li>
      <li class="nav__item header__item">
        <a href="#about" class="nav__link header__link">About</a>
      </li>
      <li class="nav__item header__item">
        <a href="#works" class="nav__link header__link">Works</a>
      </li>
    </nav>
  </header>
</body>

之前，我只是根据父类的类写了一个类：header-nav，但这使得块重用变得困难。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="header-nav header__nav">
      <li class="header-nav__item">
        <a href="#home" class="header-nav__link header-nav__link_active">Home</a>
      </li>
      <li class="header-nav__item">
        <a href="#about" class="header-nav__link">About</a>
      </li>
      <li class="header-nav__item">
        <a href="#works" class="header-nav__link">Works</a>
      </li>
    </nav>
  </header>
</body>

PS：我可以选择提供第二堂课 - 一个街区，但我不知道它有多合适。

<body class="page">
  <header id="home" class="header page__header">
    <nav class="nav header-nav">
      <li class="nav__item header-nav__item">
        <a href="#home" class="nav__link header-nav__link">Home</a>
      </li>
      <li class="nav__item header-nav__item">
        <a href="#about" class="nav__link header-nav__link">About</a>
      </li>
      <li class="nav__item header-nav__item">
        <a href="#works" class="nav__link header-nav__link">Works</a>
      </li>
    </nav>
  </header>
</body>

html

1 个回答

  1. Best Answer

    在我看来，在这种情况下，更灵活的解决方案是键值修饰符

    <body class="page">
  <header id="home" class="header page__header">
    <nav class="nav nav_theme_ligth">
      <li class="nav__item nav__item_theme_ligth">
        <a href="#home" class="nav__link nav__link_theme_ligth">Home</a>
      </li>
      <li class="nav__item nav__item_theme_ligth">
        <a href="#about" class="nav__link nav__link_theme_ligth">About</a>
      </li>
      <li class="nav__item nav__item_theme_ligth">
        <a href="#works" class="nav__link nav__link_theme_ligth">Works</a>
      </li>
    </nav>
  </header>
</body>

    这不仅可以让你重用你的代码，而且不会被绑定到上下文中。请注意，可以使用任意数量的此类修饰符，例如：“ nav__item nav__item_theme_ligth nav__item_direction_right nav__item_active ”

    • 1

相关问题