Ich habe angefangen, die BEM-Methode zu verwenden, um mein HTML und CSS zu entkoppeln ... und es funktioniert die meiste Zeit ziemlich gut. Auch wenn es nur Ihre persönliche Meinung ist, würde ich gerne wissen, wie andere damit umgehen:
Nehmen wir an, wir müssen eine einfache Navigation erstellen. Das HTML sieht ähnlich wie
aus %Vor%Ich bin mir nicht sicher, ob ich die Elemente ".nav_ " und ".nav _link" brauche oder ob es besser ist, diese stattdessen zu verwenden
%Vor%Aber mein wirkliches Problem ist, wie man mit "aktiven" Klassen umgeht (nicht nur für die Navigation, sondern generell). Ist es besser, spezifische "aktive" Klassen wie ".nav_ item - active" zu verwenden, so können Sie einfach eine einzelne Klasse in Ihrer CSS-Datei verwenden oder wenn allgemeinere Klassennamen wie ".is-active" verwendet werden besser? Aber dann müssen Sie Ihre Klassen innerhalb Ihrer CSS-Datei wie ".nav _item.is-active" oder (was noch schlimmer aussieht) ".nav__list & gt; .is-active".
Jede Methode hat ihre Schattenseiten. Für mich sieht der zweite Weg falsch aus, wenn Sie BEM verwenden, aber wenn Sie den ersten Weg gehen, stoßen Sie auf "Probleme" mit Ihrem JS, weil Sie den spezifischen Klassennamen in Ihren JS "fest codieren" müssen %Vor%
Auf diese Weise verlässt sich Ihr JS zu sehr auf Ihre HTML-Struktur (oder ist das nicht zu wichtig?), was sich ändern könnte ... Und das führt zu der zweiten Frage. Ich habe gehört, dass es gut ist, nicht nur HTML und CSS, sondern auch HTML und JS zu entkoppeln. So könnten Sie zum Beispiel diese ".js-" -Klassen verwenden, um Click-Events und all diese Dinge zu Elementen hinzuzufügen, anstatt Ihre "Styling" -Klassen zu verwenden, um diese Art von Events auszulösen. Also anstatt
zu verwenden %Vor%hättest du
%Vor%Ich denke, dass dies in Kombination mit HTML5-Datenattributen für so ziemlich alles funktioniert, aber ich frage mich, was mit Navigation oder Akkordeons oder sowas passiert. Ist es besser für die Wartbarkeit, diese ".js-" Klassen (für jedes Element) auch zu verwenden
%Vor%oder sollte ich $ (". nav__item") ... in meinem JS in diesem Fall verwenden? Aber so entkoppeln Sie Ihren HTML und JS nicht wirklich (zumindest soweit ich das Thema verstanden habe). Es geht nicht nur um Navigationen, sondern um all diese Arten 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.
Danke
Nach der BEM-Methode sollten Sie keine globalen Selektoren wie Tag-Selektoren verwenden, sondern nav__item und nav__link verwenden.
Die gleiche Geschichte mit aktivem Modifikator. Sie sollten keine globalen Entitäten haben (Sie können Mixe verwenden, aber das ist etwas anderes). Am besten gehen Sie mit nav__item - active (oder nav__item_state_active in klassischer BEM-Notation).
Und BEM hat eine Lösung für JS, HTML (oder Templates) und eigentlich jede andere Blocktechnologie.
Die Grundidee ist, dass block alles über sich selbst weiß: wie es aussieht (css), wie es funktioniert (js), was html es produzieren soll (templates), seine eigenen 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 diesem Selektor übereinstimmen, werden mit diesen Regeln formatiert), können Sie genauso js des nav-Blocks beschreiben.
Bitte schauen Sie sich Ссылка an, welches jquery plugin ist, das Ihnen die Möglichkeit gibt, mit Blöcken in BEM einfach zu arbeiten.
Und falls Sie ein Build-System verwenden, können Sie alle diese Technologien im selben Ordner im Dateisystem ablegen:
%Vor%Wenn Sie eine solche Dateistruktur haben, können Sie tiefer gehen zu dem, was BEM tatsächlich ist, und versuchen Sie es mit i-bem.js: Ссылка
Eigentlich wird js in Bezug auf bem oft als nicht so gute Idee angesehen. Zum Beispiel ist bem großartig, Beziehungen in css zu lokalisieren und zu verschieben, aber in Bezug auf js ist es schwierig, Logik in sehr komplexen Anwendungen zu abstrahieren.
In react.js kannst du es für die Klassenbenennung verwenden, und das ist es (wir benutzen es so und es funktioniert gut!). Ich habe eine Bibliothek geschrieben, um Probleme mit der Namensgebung zu lösen.
Tags und Links javascript html css bem decouple