Muster rückantwort bem

auch ich mag das nicht… kann sein, dass wir für Kamel Fall Muster gehen können. .btn /* Element, das vom Block abhängt */ .btnPrice – Hamish wurde dann durch einen Artikel von Harry Roberts über Namespacing beeinflusst, den Harry selbst in diesem Artikel tatsächlich ein wenig weiter unten erklärt (es ist wunderbar, wenn Antworten so schön miteinander verknüpft werden!): Eine interessante Diskussion in den Kommentaren war die Verwendung der @extend Funktionalität in Sass. Zum Beispiel mit der Option “button class=`subscribe-form__submit`> und .subscribe-form__submit – @extend .button; grid-column: 3; . Ich denke, kontextsensitive Stile sind der bessere Weg. Ich war ziemlich entschieden mit dieser Implementierung von @extend, es sei denn, das CMS zwingt Sie auf diesem Weg. Den vollständigen Kommentar und meine Antwort finden Sie hier: css-tricks.com/abem-useful-adaptation-bem/#comment-1613824. Schöner Artikel Daniel! Ich habe in einem aktuellen Projekt eine sehr ähnliche Namenskonvention versucht, indem ich Klassennamen vorangestellt habe, basierend darauf, wo das angegebene Element innerhalb des atomar design-Musters gehörte. Ich fand, es funktionierte wirklich gut und erwäge, es wieder zu verwenden. Vielen Dank für das Teilen! Die Verwendung von Klassennamen, die vom vorherigen Muster abweichen, ist ein Codegeruch und sollte überprüft werden. “Ich ermutige sehr, im ersten Beispiel den `Multi-Class`-Ansatz über die `Single-Class` im zweiten Beispiel zu verwenden. Das größte Problem mit dem “Single-Class”-Ansatz hängt mit der Verschachtelung zusammen und macht ihn meiner Meinung nach zu einem Anti-Muster. Betrachten Sie das folgende Beispiel, in dem wir eine kleine Änderung auf eine .btn innerhalb eines .signup-Formulars anwenden möchten, sodass sie die volle Breite hat.

Wenn wir den multi-Class-Ansatz für Modifikatoren verwenden, können wir Folgendes tun: Ich werde damit beginnen, die Entwickler vorzustellen, die freundlich genug waren, mich in ihren Köpfen zu lassen, um einige Tipps und Ratschläge zur Verwendung von BEM im Maßstab zu erhalten. Ich hatte das Glück, BEM-Enthusiasten aus der ganzen Welt zu finden – ich habe Antworten aus den Niederlanden, Schweden, Großbritannien, der Krim und Estland! Ein großes Dankeschön an alle, die sich die Zeit genommen haben, meine Fragen zu beantworten. In BEM wird die Antwort auf das Festlegen oder Entfernen eines Modifizierers deklarativ beschrieben. Wenn z. B. während der Ausführung eine zusätzliche Klasse (oder ein Modifikator) im CSS angezeigt wird, werden alle Eigenschaften dieses Modifizierers automatisch auf den DOM-Knoten dieser Klasse angewendet. Dasselbe geschieht in JavaScript: Wenn ein Modifikator angezeigt wird (dem DOM-Knoten wird eine neue Klasse hinzugefügt), wird die gesamte Funktionalität dieses Modifikators angewendet. Wenn der Modifikator verschwindet, wird die Funktionalität deaktiviert. Toller Artikel! Ich bin zum ersten Mal auf das -modifikator-Muster in diesem Artikel gestoßen: www.viget.com/articles/bem-sass-modifiers “Hier wird jede Instanz der .btn im relevanten Kontext entsprechend formatiert. Wenn wir das einklassenweise übernommen e.v.a.v.a.v.a.v.a.v.a.v.a.v.a.v.a.de hatten, dann schlägt unser CSS fehl und wir müssen jede Art von .btn-Modifer zu unserem .signup-form-Stylingkontext hinzufügen. Dies wäre aus offensichtlichen Gründen ein Wartungsalbtraum!” Die folgende Konfigurationsdatei bindet alles zusammen. Achten Sie besonders auf die Selector-bem-Musterkonfiguration.

Dies ist das Plugin, das wir verwenden, um sicherzustellen, dass wir die etablierten BEM-Namenskonventionen befolgen: Beliebige Interaktionsmuster. Beispiel: Der Ereigniskanal: Die gesamte Kommunikation erfolgt über Nachrichten, die Komponenten über einen Vermittler veröffentlichen und anhören. Eine Sache, die Sie finden werden, ist, dass es einige unterschiedliche Meinungen gibt – aber das ist okay. Ich habe versucht, so viele Antworten wie möglich einzuschließen, auch wenn sie widersprüchliche Ansichten enthalten, so dass leserliche Ihre eigene Meinung bilden können. Es wird helfen, das Codemuster auch in js beizubehalten…. Wie wir auch gesehen haben, während wir über wirklich komposierbare Komponenten sprachen, in der Theorie (siehe die letzten Anmerkungen, um mehr über die “in der Praxis” Seite der Dinge 😅 zu erfahren), sollte eine Komponente nur eine Blockklasse haben, die dem äußersten Element der Komponente zugewiesen ist, und Elementklassen, die den inneren Elementen zugewiesen sind. Dies führt zu folgendem Muster: Mit dem .-modifierName > * > & Muster können Sie direkte Nachkommen, die mehrere Ebenen tief sind, zielen, ohne dass Ihre Spezifität außer Kontrolle gerät.