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_ item"和".nav _link",或者如果使用它代替它是更好的实践

.nav__list > li { CODE }

但我真正的问题是如何处理"主动"类(不仅仅是导航,而是一般).是否更好地使用特定的"活动"类,如".nav_ item - active",因此您可以在CSS文件中使用单个类,或者使用更多通用类名如".is-active"更好？但是你需要在你的CSS文件中指定你的类,比如".nav _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>

或者我应该在我的JS中使用$(".nav__item")...在这种情况下？但是这样你并没有真正解耦你的HTML和JS(至少就我理解这个话题而言).这不仅仅是关于导航,而是关于所有那些javascript交互,如手风琴,滑块等.

我希望你们能分享这些问题的最佳实践并帮助我.

谢谢

Answer 1

BEM方法说你不应该使用任何全局选择器,如标签选择器,所以使用nav__item和nav__link.

与活动修饰符相同的故事.你不应该有任何全局实体(你可以使用混合,但这有点不同).因此,最好的方法是使用nav__item - active(或经典BEM表示法中的nav__item_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实际上是什么并尝试i-bem.js:http://bem.info/articles/bem-js-main-terms/