用于导航的 BEM 命名和 WordPress 过滤器

维护 css 很困难，尤其是在与团队合作的大型项目中。命名约定可以帮助您的 CSS 更具可读性和更易于维护。在这个快速提示中，我们将了解如何在 wordpress 中使用 BEM（块元素修饰符）命名方法。

WordPress 等内容管理系统在前端标记中输出默认类。在 WordPress 中有很多过滤器来修改这些输出的类。

如果您想直接深入研究代码，这是我的一个示例主题；过滤器可以在inc/functions-filters.php 文件中找到。

什么是 BEM？

BEM代表块元素修改器。

“BEM 是一种方法，可帮助您在前端开发中创建可重用组件和代码共享。”

我将使用导航标记作为示例：

Block是一个独立的实体，它本身就有意义。

.menu { ... }

元素是块的一部分，并且在语义上与其块相关联。

.menu__items { ... }
.menu__item { ... }
.menu__anchor { ... }

修饰符改变块或元素的外观或行为。

.menu--primary { ... }
.menu__anchor--button { ... }

完整的导航标记可能如下所示：

<nav class="menu menu--primary">
  <ul class="menu__items menu__items--primary">
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li>
  </ul>
</nav>

像 BEM 这样的命名约定使您的 SASS 和 CSS 保持扁平化，特异性低（这总是很好！）。

在 SASS 中，您可以像这样设计我们的示例：

.menu {
  ...

  &__items {
     ...
  }

  &__item {
     ...
  }

  &__anchor {
     ...
  }

  &__anchor--button {
     ...
  }
}

编译后的 CSS 如下所示：

.menu {
  ...
}

menu__items {
  …
}

menu__item {
  …
}

menu__anchor {
  …
}

menu__anchor--button {
  …
}

但是我们如何改变 WordPress 中使用的导航类呢？

使用 WordPress 过滤器更改导航类

使用 WordPress 的内置功能wp_nav_menu()，您可以指定类<nav>和<ul>元素。例如：

<nav class="menu menu--primary">

<?php
  wp_nav_menu( array(
      'theme_location' => 'primary',
      'container'          => '',
      'menu_class'      => 'menu__items menu__items--primary',
  ) );
?>

</nav>

请注意用于向元素menu_class添加自定义类的参数。<ul>WordPress 也有方便的过滤器<li>和<a>元素：

nav_menu_css_class用于将类应用于菜单项的<li>元素。
nav_menu_link_attributes用于将属性应用到菜单项的<a>元素。

使用 nav_menu_css_class 过滤器

在此示例中，我们从菜单项的<li>元素中重置所有默认类并添加我们自己的自定义类。menu__item 让我们通过将这个过滤器插入到我们的functions.php中来添加我们的示例类：

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

你注意到有四个参数了吗？让我们添加一个menu__item--primary修饰符类，其中 primary 是主题位置。为此，我们可以使用$args参数来添加主题位置。现在我们的过滤器看起来像这样：

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Get theme location, fallback for `default`.
  $theme_location = $args->theme_location ? $args->theme_location : 'default';

   // Add theme location class.
  $_classes[] = 'menu__item--' . $theme_location;

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

完整的代码示例可以在我的示例主题inc /functions-filters.php 文件中找到。

使用 nav_menu_link_attributes 过滤器

让我们将示例类添加 menu__anchor到每个菜单项的<a>元素中。

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  return $atts;
}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

通过菜单生成器添加类

有时我们会 <li>从菜单构建器 UI 向菜单项的元素添加自定义类。

为了保持 CSS 扁平化，让我们在该类所在的元素中添加一个menu__anchor--button类：<a>button

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  // Add `menu__anchor--button` when there is `button` class in `<li>` element.
  if ( in_array( 'button', $item->classes, true ) ) {

       $atts['class'] .= ' menu__anchor--button';

   }

return $atts;

}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

现在我们可以直接使用 . menu__anchor--button{ ... }. 在我的演示中，您将看到一个样式类似于按钮的菜单项，无需深入了解兔子的特殊性即可定位。