8

HTML と CSS を切り離すために BEM 手法を使い始めましたが、ほとんどの場合、うまく機能しています。あくまで個人的な意見ですが、他の人がどう対処しているか知りたいです。

簡単なナビゲーションを構築する必要があるとしましょう。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」のようなより一般的なクラス名を使用する方がうまくいくでしょうか? ただし、「.nav _item.is-active」または (私にはさらに悪いように見えます)「.nav__list > .is-active」のように、CSS ファイル内でクラスを指定する必要があります。

どの方法にも欠点があります。BEMを使用している場合、2番目の方法は間違っているように見えますが、最初の方法を使用する場合、特定のクラス名をJSに「ハードコード」する必要があるため、JSで「トラブル」に遭遇します

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

そうすれば、あなたの JS は HTML 構造に依存しすぎます (または、これはあまり重要ではありませんか?)。これは変更される可能性があります...そして、これは 2 番目の質問につながります。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 インタラクションが対象です。

皆さんがこれらの質問に対するベスト プラクティスを共有し、私を助けてくれることを願っています。

ありがとう

4

2 に答える 2

6

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/をご覧ください。これは、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 が実際に何であるかをより深く理解し、i-bem.js を試すことができます: http://bem.info/articles/bem-js-main-terms/

于 2013-11-07T01:51:17.517 に答える