Ein Kollege von mir treibt die BEM-Methode (Block Element Modifier) für das CSS in einem von ihm geleiteten Projekt stark voran, und ich kann nur nicht verstehen, was es besser macht als das WENIGER CSS, das wir seit Jahren schreiben.
BEM ist eine CSS-Methodik. Andere umfassen OOCSS und SMACSS. Diese Methoden werden verwendet, um modularen, erweiterbaren und wiederverwendbaren Code zu schreiben, der eine gute Skalierbarkeit aufweist.
LESS ist ein CSS-Präprozessor. Andere sind Sass und Stylus. Diese Präprozessoren werden verwendet, um ihre jeweiligen Quellen in erweitertes CSS zu konvertieren.
BEM und LESS sind nicht als "besser" vergleichbar, sondern als Werkzeuge, die unterschiedlichen Zwecken dienen. Sie würden nicht sagen, dass ein Schraubendreher besser ist als ein Hammer, es sei denn, Sie erwägen, ein bestimmtes Problem mithilfe von Hilfsprogrammen zu lösen.
Er behauptet "höhere Leistung" ...
Die Leistung müsste gemessen werden zwischen einem klassischen CSS-Stil von:
.widget .header
und BEM-Stil von:
.widget__header
Generell ist die Leistung der CSS-Selektoren jedoch kein Engpass und muss nicht optimiert werden.
BEM "Performance" bezieht sich normalerweise auf den Performance-Schreibcode eines Entwicklers. Wenn die BEM-Methodik konsistent und korrekt angewendet wird, ist es für Gruppen von Entwicklern einfach, gleichzeitig unterschiedliche Module ohne Stilkollisionen zu erstellen.
Er behauptet, "Lesbarkeit" und "Wiederverwendung" ...
Ich weiß nicht, dass ich einem neuen Entwickler sagen würde, dass BEM besser lesbar ist. Ich kann sagen, dass es einige klar definierte Richtlinien zur Bedeutung und Struktur von Klassen enthält.
Sehen Sie eine Klasse wie
.foo--bar__baz
Sagt mir, dass sich ein fooBlock im barStatus befindet und ein bazElement enthält .
Ich würde absolut sagen, dass BEM wiederverwendbarer ist als ein klassisches Modell.
Wenn zwei Entwickler Blöcke ( foound bar) erstellen und diese beiden Blöcke Überschriften haben, können sie ihre Blöcke sicher in verschiedenen Kontexten wiederverwenden, ohne sich um eine Namenskollision sorgen zu müssen.
Das liegt daran, in einem klassischen Kontext .foo .headingund in .bar .headingKonflikt geraten würde, und die Einführung einer Spezifität Konflikt, der gelöst werden müssten, möglicherweise auf einer Fall-zu-Fall - Basis.
In einer BEM-Site wären die Klassen .foo__headingund .bar__heading, die niemals in Konflikt geraten würden.
Er behauptet, "verschachteltes CSS ist ein Anti-Pattern." Was bedeutet überhaupt "Anti-Pattern" und warum ist geschachteltes CSS schlecht?
Ein "Anti-Pattern" ist ein Codierungsmuster, das für unerfahrene Entwickler einfacher zu erlernen und zu verwenden ist als eine geeignetere Alternative.
Inwiefern geschachteltes CSS schlecht ist: Verschachtelung erhöht die Spezifität eines Selektors. Je höher die Spezifität, desto mehr Aufwand ist erforderlich, um sie zu überschreiben. Unerfahrene Entwickler befürchten häufig, dass sich ihr CSS auf mehrere Seiten auswirkt. Daher verwenden sie Selektoren wie:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Wenn ein erfahrener Entwickler befürchtet, dass sich sein CSS nicht auf mehrere Seiten auswirkt, verwendet er Selektoren wie:
.more
Er behauptet, dass "jeder auf die Verwendung von BEM zusteuert, also sollten wir es auch." ...
Das ist ein Trugschluss der Bandwagons , also ignorieren Sie das als schlechtes Argument. Lassen Sie sich nicht vom Trugschluss täuschen , denn ein schlechtes Argument zur Unterstützung von BEM ist kein Grund zu der Annahme, dass BEM nicht gut sein kann.
Könnte jemand bitte im Detail erklären, was BEM besser als WENIGER macht?
Ich habe das schon mal behandelt, BEM & LESS sind nicht vergleichbar. Äpfel und Orangen usw.
Mein Kollege kann mich nicht überzeugen, aber ich weiß nicht, ob ich eine andere Wahl habe, als zu folgen.
Ich empfehle, einen Blick auf OOCSS, SMACSS und BEM zu werfen und die Vor- und Nachteile der einzelnen Methoden ... als Team abzuwägen . Ich benutze BEM, weil ich seine Strenge im Format mag und die hässlichen Selektoren nicht stört, aber ich kann Ihnen nicht sagen, was für Sie oder für Ihr Team richtig ist. Lassen Sie nicht zu, dass eine ausgesprochene Person die Show leitet. Wenn Sie mit BEM nicht vertraut sind, sollten Sie sich darüber im Klaren sein, dass es andere Alternativen gibt, die für Ihr Team möglicherweise einfacher zu unterstützen sind. Möglicherweise müssen Sie Ihre Position mit Ihrem Kollegen verteidigen, aber langfristig wird sich dies wahrscheinlich positiv auf das Ergebnis Ihrer Projekte auswirken.
Ich wäre wirklich lieber in der Lage, BEM zu schätzen, als es widerwillig zu akzeptieren.
Ich habe eine Antwort auf StackOverflow geschrieben, die beschreibt, wie BEM funktioniert . Es ist wichtig zu verstehen, dass Ihre idealen Selektoren eine Spezifität von haben sollten, 0-0-1-0damit sie leicht überschrieben und erweitert werden können.
Die Verwendung von BEM bedeutet nicht, dass Sie WENIGER aufgeben müssen! Sie können weiterhin Variablen verwenden, Sie können weiterhin @imports verwenden und Sie können die Verschachtelung sicherlich weiterhin verwenden. Der Unterschied besteht darin, dass Sie möchten, dass die gerenderte Ausgabe eine einzelne Klasse und keine nachgeordnete Kette ist.
Wo Sie gehabt haben könnten
.widget {
.heading {
...
}
}
Mit BEM können Sie Folgendes verwenden:
.widget {
&__heading {
...
}
}
Da sich BEM außerdem um einzelne Blöcke dreht, können Sie Code auf einfache Weise in separate Dateien aufteilen. widget.lesswürde Stile für den .widgetBlock enthalten, während component.lessStile für den .componentBlock enthalten würde . Dies erleichtert das Auffinden der Quelle für eine bestimmte Klasse erheblich, obwohl Sie möglicherweise weiterhin Quellzuordnungen verwenden möchten.