BEM- und "aktive" Klassen / Entkopplung von HTML und JS

Question

Ich habe angefangen, die BEM -Methodik zu verwenden, um mein HTML und CSS zu entkoppeln ... und es funktioniert die meiste Zeit ziemlich gut. Selbst wenn es nur Ihre persönliche Meinung ist, würde ich immer noch gerne wissen, wie andere damit umgehen:

Nehmen wir an, wir müssen eine einfache Navigation erstellen. Die HTML sieht ähnlich aus wie

<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>

Ich bin mir nicht sicher, ob ich das ".nav_ braucheArtikel "und" .nav_link "oder wenn es besser ist, dies stattdessen zu verwenden

.nav__list > li { CODE }

Aber mein eigentliches Problem ist, wie man mit "aktiven" Klassen umgeht (nicht nur für Navigationen, sondern im Allgemeinen). Ist es besser, bestimmte "aktive" Klassen wie ".nav_ zu verwendenElement-Active ", damit Sie einfach eine einzelne Klasse in Ihrer CSS-Datei verwenden können oder wenn allgemeinere Klassennamen wie" .is-aktiv "besser funktioniert? Navigation_item.is-aktiv "oder (was für mich noch schlimmer aussieht)" .nav__List> .is-active ".

Jede Methode hat ihre Nachteile. Für mich sieht der zweite Weg falsch aus, wenn Sie BEM verwenden, aber wenn Sie den ersten Weg mit Ihrem JS auf "Probleme" begegnen, weil Sie den bestimmten Klassennamen in Ihr JS "feststellen" müssen

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

Auf diese Weise stützt sich Ihr JS zu sehr auf Ihre HTML -Struktur (oder ist das nicht zu sehr wichtig?), Was sich ändern könnte ... und dies führt zur zweiten Frage. Ich habe gehört, dass es gut ist, nicht nur Ihr HTML und CSS, sondern auch Ihr HTML und JS zu entkoppeln. Sie können also beispielsweise diese ".js-" -Kleter verwenden, um Klick-Ereignisse und all diese Art von Dingen zu Elementen hinzuzufügen, anstatt Ihre "Styling" -Kurse zu verwenden, um diese Art von Ereignissen auszulösen. Also anstatt zu verwenden

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

du würdest haben

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

Ich denke, dies in Kombination mit HTML5-Datenattributen funktioniert für alles, aber ich frage mich, was mit Navigation oder Akkordeuren oder ähnlichen Dingen passiert. Ist es besser für die Wartbarkeit, diese ".js-" -Kassen zu verwenden (für jeden Artikel)

<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>

Oder sollte ich $ (". nav__Item") ... in meinem JS in diesem Fall verwenden? Aber so entkoppeln Sie Ihr HTML und JS nicht wirklich (zumindest so weit ich dieses Thema verstanden habe). Es geht nicht nur um Navigationen, sondern um all diese Art von JavaScript -Interaktionen wie Akkordeons, Schieberegler und so weiter.

Ich hoffe, ihr könnt einige Best Practices für diese Fragen teilen und mir helfen.

Vielen Dank

Answer 1

BEM -Methodik besagt, dass Sie keine globalen Selektoren wie Tag -Selektoren verwenden sollten. Verwenden Sie also NAV__Item und NAV__Link.

Die gleiche Geschichte mit aktivem Modifikator. Sie sollten keine globalen Einheiten haben (Sie können Mixe verwenden, aber das ist etwas anderes). Der beste Weg ist also, mit Nav__Item (oder Nav__item_State_active in klassischer BEM-Notation) zu gehen.

Und BEM hat eine Sollution für JS, HTML (oder Vorlagen) und tatsächlich die Technologie eines anderen Blocks.

Die Hauptidee ist das Block weiß alles über sich selbst: wie es aussieht (CSS), wie es funktioniert (JS), welche HTML es produzieren sollte (Vorlagen), eigene Tests, Dokumentation, Bilder usw.

Und da die CSS -Technologie des NAV -Blocks Regeln auf deklarative Weise anwendet (Sie definieren einen Selektor und alle Knoten, die mit dieser Selektor übereinstimmen, sind mit diesen Regeln gestaltet), wie Sie Js des NAV -Blocks beschreiben können.

Bitte schauen Sie sich an http://xslc.org/jquery-bem/ Welches ist JQuery Plugin, das Ihnen die Möglichkeit bietet, in BEM -Weg leicht mit Blöcken zu arbeiten.

Wenn Sie ein Build -System verwenden, können Sie alle diese Technologien in denselben Ordner in das Dateisystem einstellen:

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

Mit einer solchen Dateistruktur können Sie tiefer zu dem gehen, was Bem tatsächlich ist, und versuchen Sie es mit I-Bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

Tatsächlich ist JS in Bezug auf BEM oft als keine so gute Idee angesehen. Zum Beispiel ist BEM großartig, um die Beziehungen in CSS in die horizontale Skala zu lokalisieren und zu bewegen, aber in Bezug auf JS ist es in sehr komplexen Anwendungen schwierig, logisch zu abstrakt.

In react.js können Sie es für die Unterrichtsnamen verwenden, und das ist es (wir verwenden es so und es funktioniert gut!). Ich habe a geschrieben Bibliothek Für Entkopplungsproblem mit der Benennung.