BEMおよび「アクティブ」クラス /デカップリングHTMLとJS

Question

私はBEM Methodologyを使用して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 "and" .nav_link "または代わりにこれを使用する方が良い場合は

.nav__list > li { CODE }

しかし、私の本当の問題は、「アクティブな」クラスに対処する方法です（ナビゲーションだけでなく、一般的に）。 "のような特定の「アクティブな」クラスを使用する方がいいですか。nav_アイテム - アクティブ」であるため、CSSファイル内の単一のクラスを使用するか、「.is-active」のような一般的なクラス名を使用する場合は、CSSファイルのようにクラスを指定する必要があります。 nav_item.is-active "or（これは私にとってさらに悪く見える）" .nav__list> .is-active "。

すべての方法には欠点があります。私にとって2番目の方法は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 Data-Attributesと組み合わせて、ほとんど何のためにも機能すると思いますが、ナビゲーションやアコーディオンなどに何が起こるかを自問しています。保守性がそれらを「.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 Methodologyによると、タグセレクターなどのグローバルセレクターを使用してはならないため、nav__itemとnav__linkを使用します。

Active Modifierを使用した同じストーリー。グローバルエンティティはありません（ミックスを使用できますが、それは少し違うものです）。したがって、最良の方法は、nav__item-active（またはnav__item_state_active in classic bem Notation）を使用することです。

また、BEMはJS、HTML（またはテンプレート）、および実際には他のブロックのテクノロジーに対してソリューションを行っています。

主なアイデアはそれです ブロック それ自体についてすべてを知っています：それがどのように見えるか（CSS）、それがどのように機能するか（JS）、それが生成すべきHTML（テンプレート）、独自のテスト、ドキュメント、画像など。

また、NAVブロックのCSSテクノロジーが宣言的な方法でルールを適用しているため（一部のセレクターを定義し、このセレクターに一致するすべてのノードはこれらのルールでスタイリングされています）。

見てください http://xslc.org/jquery-bem/ これは、BEMの方法で簡単にブロックを使用する可能性を提供するjQueryプラグインです。

また、いくつかのビルドシステムを使用した場合に備えて、これらすべてのテクノロジーをファイルシステム上の同じフォルダーに配置できます。

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 eartyの存在にもっと深くなり、i-bem.jsを試してみることができます。 http://bem.info/articles/bem-js-main-terms/

Answer 2

実際、BEMの観点からJSは、しばしばそれほど良い考えではないと考えられています。たとえば、BEMはCSSの関係を水平スケールにローカライズして移動するのに最適ですが、JSの観点からは、非常に複雑なアプリケーションでロジックを抽象化することは困難です。

React.jsでは、クラスの命名に使用できます。私は書いた 図書館 命名の問題を分離するため。