Was macht BEM besser als eine schachtelbare Stylesheet-Sprache wie LESS?

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.

Er behauptet "höhere Leistung", aber ich kann mir nicht vorstellen, wie die Leistung für die Art von Web-Apps, die wir in diesem Code-Shop schreiben, überhaupt von Bedeutung sein könnte. Wir machen hier weder Twitter noch Facebook. Ich wäre sehr überrascht, wenn unsere am häufigsten genutzten Apps mehr als 10000 Zugriffe pro Monat haben und die meisten deutlich unter 1000 liegen.

Er behauptet "Lesbarkeit" und "Wiederverwendung", aber WENIGER macht das meiner Meinung nach schon viel besser . Und ich habe das Gefühl, dass BEM das Markup mit Dutzenden von zusätzlichen Zeichen, die diesen superlangen Klassennamen gewidmet sind, so stark verstümmelt, dass die Lesbarkeit drastisch verringert wird .

Er behauptet, "verschachteltes CSS ist ein Anti-Pattern." Was bedeutet „anti-Muster“ auch mittlere und warum ist verschachtelter CSS schlecht?

Er behauptet, dass "jeder auf die Verwendung von BEM zusteuert, also sollten wir es auch." Mein Schalter ist "Wenn jeder von einer Brücke springen würde, würdest du folgen?" Aber er ist immer noch absolut unnachgiebig.

Könnte jemand bitte im Detail erklären, was BEM besser als WENIGER macht? Mein Kollege kann mich nicht überzeugen, aber ich weiß nicht, ob ich eine andere Wahl habe, als zu folgen. Ich wäre wirklich lieber in der Lage, BEM zu schätzen, als es widerwillig zu akzeptieren.

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.

Bearbeiten Sie 2017

Wenn Sie dies im Jahr 2017 lesen, lösen das Shadow-DOM und das Shadow-DOM-Polyfill sowie Komponenten all diese Probleme, während Sie Ihren Code klein, kompakt und modular halten. Verwenden Sie BEM nicht für ein Greenfield-Projekt, IMO.

Anstelle von BEM bieten wir Tools wie ViewEncapsulation, Polymer, StyledJSX, SASS-Module, Styled Components usw. an.

Erwägen Sie die Verwendung von BEM, wenn Sie keine komponentenorientierte Architektur haben. wenn Sie älteren Code zur Unterstützung haben; oder wenn Sie einfach nur darauf aus sind, alles manuell ohne Werkzeug zu erledigen.

BEM macht Ihr Styling unabhängig von Ihrer DOM-Verschachtelung. Dazu wird jedem Element, das Sie möglicherweise formatieren möchten, ein big-ass-Klassenattribut zugewiesen, das auf Ihrer Seite wahrscheinlich eindeutig ist. Das meiste Styling findet dann im Unterricht statt.

Dies macht Ihren Code modularer, da die Verschachtelung auf Kosten einer großen Ausführlichkeit nicht mehr berücksichtigt wird.

Ohne BEM

Ohne BEM könnten wir folgendes schreiben:

<div class="widget">
  <a>Hello!</a>
  <ul>...</ul>
</div>

Das Standard-CSS-Styling könnte folgendermaßen aussehen:

.widget {
  border: 1px solid red;
}

.widget a {
  color: green;
}

Das gleiche mit SASS würde so aussehen:

.widget {
  border: 1px solid red;
  a {
    color: green;
  }
}

Wenn Sie ein kleines Team sind, in dem jeder CSS nach einem hohen Standard codieren kann und das Projekt so klein ist, dass Sie es genau kennen, ist dies eine gute und vernünftige Lösung.

Mit BEM

Wenn Ihr Code jedoch größer wird und Sie ein großes Team mit gemischten Fähigkeiten haben, ist dies möglicherweise keine so einfache Lösung. Was ist, wenn Sie beispielsweise grüne Anker in einem anderen Widget haben möchten? Also machen wir den Anker modular und eliminieren Nachkommen-Selektoren.

Jetzt ist unser HTML viel ausführlicher:

<div class="widget">
  <a class="widget__anchor">Hello!</a>
  <ul class="widget__ul">...</ul>
</div>

Unser CSS hat keine Nachkommen-Selektoren:

.widget {
  border: 1px solid red;
}

.widget__anchor {
  color: green;
}

Aber wir können das jetzt tun:

<div class="widget__2">
  <a class="widget__anchor">Hello!</a>
</div>

Der widget__anchor ist modular aufgebaut. Es ist unwahrscheinlich, dass auf der Seite eine andere Definition von .widget__anchor vorhanden ist.

Kompromisse:

BEM:

• Gibt Ihnen mehr modularen Code. Sie können jedes Stück für sich nehmen.
• Lässt jeden CSS schreiben. Sie müssen sich des Master-Stils und der benutzerdefinierten Überschreibungen nicht bewusst sein. In einem großen Team ist das schön.
• Entfernt alle Spezifitätsprobleme.
• Ist deutlich ausführlicher.

Standard-CSS (das auf der Verwendung von Nachkommenselektoren beruht):

• Bedeutet, dass Ihr Styling vom Kontext abhängig ist.
• Benötigt ein Bewusstsein für die Kaskade. Code an einmaliger Stelle kann Code an anderer Stelle beeinflussen. In einem kleinen Team ist das eine gute Sache.
• Kann unter Spezifitätsproblemen leiden, die für einen unerfahrenen Entwickler schwer zu debuggen sind.
• Ist deutlich enger.

Der dritte Weg - Real Components.

Wenn Sie beispielsweise React, Angular 2 oder eines der anderen modernen Front-End-Framewords verwenden, haben Sie eine andere Lösung. Sie können Werkzeuge verwenden, um die Kapselung zu erzwingen.

In diesem Beispiel werden React und StyledJSX verwendet, es gibt jedoch viele Optionen. Hier ist ein Widget:

const Widget = () => 
  <div>
    <a>Hello</a>
  </div>
  <style jsx>
    div {border:red }
    a { background: pink }
  </style>

Sie würden dann das neue Widget wie folgt verwenden:

<Widget />

Alle im Widget deklarierten Stile werden gekapselt und gelten nicht für Elemente außerhalb der Komponente. Es steht uns frei, das divund das adirekt zu stylen, ohne versehentlich etwas anderes auf der Seite zu stylen.

Kein Ansatz ist perfekt. IMHO sollten wir die besten Teile jeder der Methoden (BEM, SMACSS, OOCSS, DRY) erhalten. Verwenden Sie SMACSS zum Organisieren Ihrer Ordnerstruktur in Ihrem CSS, insbesondere zum Definieren der Aufschlüsselung der logischen Ebene des gesamten CSS. DRY to zum Erstellen Ihrer Dienstprogrammbibliothek oder kann eine allgemeine Modifikatorbibliothek sein, die manchmal in Verbindung mit BEM-basierten Klassen verwendet wird. OOCSS für Komponenten. Und BEM für kleine Bauteile oder Unterkomponenten. Dadurch können Sie die Komplexität verteilen und die Freiheit erhalten, in einem großen Team zu arbeiten.

Alles, was verwendet wird, ohne das Wesentliche zu verstehen, führt zu schlechten Ergebnissen.

BEM ist zwar ein guter Ansatz für größere Teams, hat aber auch einige Nachteile. 1.Es kann manchmal zu sehr langen Namen in einer großen HTML-Struktur kommen. Resultierende große CSS-Dateigröße. 2. Beim Verschachteln von HTML-Dateien mit mehr als 2-3 Ebenen wird das Definieren von Namen zum Kopfzerbrechen.

Die Konfliktlösung kann einfach verwaltet werden, wenn man die Komponentenstruktur zusammen mit einem sehr einfachen Satz von Basisstilen betrachtet. Es ist eher eine zweistufige Vererbung. Jedes Element in einer Komponente würde entweder eine globale Stilregel haben oder für diese Komponente spezifisch sein. Dies ist eine der einfacheren Möglichkeiten.