在 HTML、CSS 和 JS 之间实现真正的关注点分离？

Question

使用以下 HTML 结构，如何最好地实现 HTML、CSS 和 JS 之间的关注点分离？

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

演示： http://codepen.io/achisholm/pen/wGVGxj

首先，这个例子似乎并没有真正解耦。我发现类命名系统不适合分开。在尝试定位链接时，我仍然需要在 JS 中的某处使用 .site-nav__link 选择器。

在每个链接上使用 JS 钩子类似乎是向右移动 方向。在每个链接上添加 .js-site-nav__link 类是 改进？

<nav role="navigation" class="site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item js-site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

这对我没有太大吸引力，因为虽然与演示类没有本质上的联系，但使用整个 BEM 名称仍然很难进行任何结构更改，而且我认为仅使用 .site-nav__link 并没有什么好处.

我可能会考虑像js-link 这样的类名，但泛化会导致其他问题。定位 .js-site-nav .js-link 是否会给我最好的一切？

<nav role="navigation" class="site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item js-link"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item js-link"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

我觉得这真的是解耦了，但它是否达到预期效果？

感谢@claudios 提供了一个简单的例子，它有一个很好的 JS 钩子，js-add 其中包括一个有帮助的动词。像这样的东西效果很好，但在我的例子中不合适。感觉像js-toggle-link 这样的 JS 钩子可能会开始变得结构良好。

来源：HTML 摘自以下演讲（在 17 分钟后跳转到相关部分）... https://vimeo.com/album/3953264/video/166790749#t=17m0s

Answer 1

据我了解，您想要一种解耦 html、css 和 javascript 的好方法。根据我的经验，我建议对所有 js 使用前缀。

例如：js-*

想象一下，如果你有一个像<button class="add">Add</button> 这样的按钮，然后你想在上面放一个js，那么可以重写为。

<button class="js-add add">Add</button>

现在，如果这个按钮更特别，并且需要与具有add 类的所有按钮不同，那么您可以编写

<button class="js-add add-special">Add</button>

希望这会有所帮助。

Answer 2

在我看来，使用这样的命名只会使事情变得复杂，而现在您可以使用CSS 中的SASS 和JS 中的OOP 编码并在正确的层次结构中选择元素，从而轻松地组织您的元素和事件。

您必须尽可能简单地命名您的元素和事件。

让我详细说明：

假设我们想要实现一个像你给出的例子一样的结构：

<nav role="navigation" class="site-nav js-site-nav">
  <ul class="site-nav__list">
    <li class="site-nav__item"><a href="#" class="site-nav__link">Menu Item 1</a></li>
    <li class="site-nav__item"><a href="#" class="site-nav__link is-active">Menu Item 2</a></li>
  </ul>
</nav>

虽然在这个层次结构中命名你的元素真的很整洁，但一段时间后它会变得有点混乱，而且如果有人新加入项目并看到命名，好吧，让我们说它会接受他们有一段时间自己记住这些名字（而不是从其他代码中作弊）。

如果我要实现这个结构，它会是这样的：

HTML

<nav role="navigation" class="site-nav js">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#" class="active">Menu Item 2</a></li>
  </ul>
</nav>

SCSS

.site-nav{
    //styling here

    &.js{
    //styling here
    }

    ul{
        //styling here

        li{
            //styling here

            a{
               //styling here
            }
        }
    }
}

现在假设我想为以前称为a.site-nav__link 的a 写一个事件：

JS

document.querySelector('.site-nav ul li a').addEventListener(eventName, function() {});

层次结构让您尽可能轻松地找到元素，并且您永远不会忘记这些元素的名称。

现在让我们来看看.js，我们为什么要使用它？

一般来说，您不需要为js 中使用的每个元素都使用“js 类”，那么我们为什么要使用它呢？让我用一个例子来解释一下。

假设我们有一个名为 .button 的按钮，其中包含一些样式。

SCSS

.button{
    //Some styles
}

我们希望这些按钮中的一些（具有相同的样式）在被点击后变大，因此我们为它们添加了一个.js 类以知道它们正在被@987654336 操作@ 并更轻松地处理它们。

document.querySelector('.button.js').addEventListener('click', function() {
    this.className+=' clicked';
});

在CSS 中我们写道：

.button{
    //Some styles
    &.js{
        .clicked{
            transform:scale(1.1);
        }
    }
}

就是这么简单！

另一方面，如果我们不想使用 .js 类（它也可以用于其他元素，因为我们从不单独使用它，而且它总是带有另一个类或 id作为.active) 我们必须为这些按钮编写另一个类，但是通过一点层次结构，我们可以编写更少的代码并保持井井有条而且我们永远不必作弊来自其他脚本，因为元素和事件的名称太难记住了！

Answer 3

实际上 BEM 是相反的想法。

从了解自身一切的块（组件）的角度来思考：标记 (HTML)、视图 (CSS) 和行为 (JS)。

因此，BEM 认为应该将它们放在一起，而不是将这三者分开。

回到site-nav 的示例，您可能会将所有 JS 委托给块本身，并像使用块的内部 API 一样使用其元素进行操作（is-active 应该成为 site-nav__link 的修饰符）。

请查看 bem.info 上的文档以了解更多信息：https://en.bem.info/methodology/js/