BEM和“活动”类 /解耦HTML和JS

Question

我已经开始使用BEM方法来使我的HTML和CSS脱离...并且在大多数情况下都可以很好地工作。即使是您的个人意见，我仍然想知道其他人如何处理：

假设我们需要构建一个简单的导航。 HTML看起来与

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
    </ul>
</nav>

我不确定我是否需要“ .nav_项目“和” .nav_link”，或者如果是更好的pratice

.nav__list > li { CODE }

但是我真正的问题是如何处理“活跃”的课程（不仅是用于导航，而且总的来说）。使用特定的“活动”类，例如“ .nav_项目 - 活动性”，因此您可以在CSS文件中使用单个类，或者如果使用更常见的类名称“ .is-Active”效果更好？但是您需要在CSS文件中指定类，例如”。导航_item.is-Active“或（对我来说看起来更糟）” .nav__list> .is-active”。

每种方法都有其缺点。对我来说，如果使用BEM，第二种方式看起来不错，但是如果您要使用JS遇到“麻烦”的第一种方式，因为您需要将特定的类名称“硬代码”到JS中

someElement.addClass(".nav__item--active");

这样，您的JS过于依赖您的HTML结构（或者这不太重要？），这可能会改变……这导致了第二个问题。我听说不仅可以使您的HTML和CSS，还可以使您的HTML和JS解脱出来。因此，例如，您可以使用这些“ .js-”类添加点击事件以及所有这些内容到元素中，而不是使用“样式”类触发此类事件。因此，而不是使用

<button class="btn btn--large"></button> // $(".btn--large") in jQuery

你将会拥有

<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery

我认为这与HTML5数据属性结合使用，几乎可以适合任何事物，但是我问自己，导航，手风琴或类似的东西会发生什么。使用这些“ .js-”类也更好（对于每个项目）

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item js-open-subnav">
            <a class="nav__link" href=""></a>
            <ul class="nav__sub">
                <!-- ... -->
            </ul>
        </li>
    </ul>
</nav>

还是我应该在这种情况下使用$（“。nav__iTem”）...在我的JS中？但是，这样您就不会真正使您的HTML和JS解除（至少我已经理解了这个话题）。这不仅与导航有关，还与所有这些JavaScript交互有关，例如手风琴，滑块等。

我希望你们可以为这些问题分享一些最佳实践，并帮助我。

谢谢

Answer 1

BEM Methodology说，您不应该使用任何全局选择器，例如标签选择器，因此请使用NAV__ITEM和NAV__LINK。

带有主动修饰符的同一故事。您不应该拥有任何全球实体（您可以使用混音，但这有点不同）。因此，最好的方法是与Active（或经典BEM符号中的NAV______STATE_ACTIVE）一起使用。

BEM对JS，HTML（或模板）以及实际上任何其他块的技术都有税收。

主要想法是 堵塞 了解自己的一切：它的外观（CSS），其工作原理（JS），它应该产生的HTML（模板），其自身测试，文档，图像等。

而且，随着NAV块的CSS技术以声明的方式应用规则（您定义了一些选择器和与此选择器符合这些规则的所有节点），就像可以描述NAV块的JS相同的方式。

请看一下 http://xslc.org/jquery-bem/ 这是jQuery插件，可让您轻松地以BEM处理块。

如果您使用某些构建系统，则可以将所有这些技术放在文件系统上的同一文件夹中：

blocks/
    nav/
        __list/
            nav__list.css
            nav__list.js
        __item/
            nav__item.css
        nav.css
        nav.js
        nav.test.js
        nav.png
        nav.md

拥有这样的文件结构，您可能会更深入地了解Bem eactery是什么，然后尝试i-bem.js： http://bem.info/articles/bem-js-main-terms/

Answer 2

实际上，就BEM而言，JS通常认为不是那么好主意。例如，BEM非常适合本地化和将CSS的关系移至水平尺度，但是就JS而言，很难在非常复杂的应用程序中抽象逻辑。

在React.js中，您可以将其用于类命名，仅此而已（我们以这种方式使用它，并且可以正常工作！）。我写了一个 图书馆 对于命名的解耦问题。