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

27

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.

Coredumperror
quelle
1
BEM und LESS dienen unterschiedlichen Zwecken. Ich benutze sowohl BEM als auch LESS.
zzzzBov
4
Beachten Sie, dass es bei BEM nicht in erster Linie um CSS geht, sondern darum, wiederkehrende gekapselte Muster in Ihrem Entwurf zu identifizieren und alles, was für diesen Block benötigt wird (Verhalten, Vorlage, Stile), an einem zentralen Ort zu sammeln. Auch wenn BEM nur auf CSS beschränkt ist, ist es eine großartige Möglichkeit, Ihre Stile zu organisieren und Namenskonflikte zuverlässig zu vermeiden. Das ist alles völlig unabhängig von Präprozessoren wie LESS oder SASS, die einfach produktivere Stylingsprachen sind als einfaches CSS, da sie Makros und Variablen sowie Kurzschreibweise und alle Arten von nützlichen Funktionen bieten. WENIGER = gewinnen, BEM = gewinnen, aber WENIGER × BEM = gewinnen²!
Amon

Antworten:

29

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.

zzzzBov
quelle
4
@CoreDumpError, das Problem ist, wenn Sie Module innerhalb von Modulen verschachteln. "Jeder Entwickler kann den Code seines spezifischen Widgets nur eine Ebene tiefer verschachteln" ist nicht ganz richtig. Jeder Entwickler muss den Code seines spezifischen Widgets immer tiefer verschachteln, da sonst Kollisionen in einer Art und Weise kaskadiert werden, die im Allgemeinen unbeabsichtigt ist. Die einzige Möglichkeit, Namenskollisionen zu vermeiden, besteht in einer Art Namespace. BEM bietet eine einfache Möglichkeit, Namespace-Klassen konsistent zu definieren.
zzzzBov
3
@ CoreDumpError, Betrachten Sie dieses Beispiel . Ein Autor Schreiben ohne BEM benötigt zusätzliche Mühe aufwenden , jede Kombination von jedem Modul zu überprüfen , die möglicherweise in ihrem Modul hinzugefügt werden. Ein Autor, der BEM verwendet, tut dies nicht.
zzzzBov
1
@ CoreDumpError, es könnte sicherlich sein. Ich finde es einfach, neue Entwickler in BEM zu schulen, und es erleichtert die Codeüberprüfung, aber SMACSS und OOCSS sind gute Alternativen. Ich empfehle dringend, diese Optionen als Alternative in Betracht zu ziehen. Ich werde sagen, dass ich BEM für meine eigene Entwicklung benutze, um nicht mit mir selbst in Konflikt zu geraten, insbesondere mit meinem zukünftigen Ich, das dumm ist und Dinge vergisst.
zzzzBov
1
Ich finde, BEM eignet sich hervorragend für jedes Projekt, bei dem es um CSS-Komplexität geht. Sie können eine Site haben, die sich auf WordPress befindet und nur Javascript verwendet, um das Scrollen auszulösen, aber immer noch so komplex wie eine Web-App im CSS. Es ist wichtig, nicht in die Falle zu tappen und zu denken, dass meine Website nicht komplex ist, nur weil sie die meisten Dinge ausschließlich im visuellen Bereich erledigt (wie viele Marketing-Websites)
Toni Leigh,
1
@CoreDumpError Die meisten meiner vorherigen Projekte waren Einzelprojekte, und ich bin aus eigener Kraft und mit einzigartigen Selektoren zu einem großen Teil von BEM gekommen. Die Aufrechterhaltung einer Codebasis ist ein großes Problem, das mit BEM sehr deutlich wird. Code ist Wartung. Dinge zu bauen ist einfach. Das Beibehalten perfekter Muster ist schwierig, insbesondere nach einigen Monaten außerhalb der Codebasis. Spezifitätsprobleme nehmen mit der Zeit zu. Die Vorteile gelten für jede Größe Team IMO!
Yuji Tomita
8

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.

superleuchtend
quelle
1
Vor- und Nachteile, ohne eine Seite zu bevorzugen, ich mag es.
Adrian Moisa
Ich denke, es ist wirklich traurig zu sagen, "schreibe deinen Code so, damit Leute, die Cascading nicht verstehen, es verstehen können". Es ist so, als würde man sagen "Ich schreibe meinen Code ohne Arrays, weil eines der jüngeren Mitglieder des Teams nicht versteht, wie Arrays funktionieren". Persönlich bevorzuge ich die prägnantere Methode, die die natürliche Seite von Cascading Style Sheets bevorzugt.
Matt Fletcher
@MattFletcher - Ich denke, es ist eine Frage der Projektgröße. Die Kaskade ist von Natur aus global. Sie legen Werte fest und überschreiben und überschreiben dann den Baum. Wenn Sie ein kleineres Projekt mit vollständiger Sichtbarkeit haben, ist dies in Ordnung, aber bei einem größeren Projekt wird es brüchig. Die Menschen haben Angst, Dinge zu ändern, weil eine Änderung höher in der Kaskade zufällige Dinge an anderen Orten zerstört. Die Verkapselung von Komponenten ist bei größeren Projekten eigentlich sehr hilfreich. Alles funktioniert einfach.
Superluminary
2

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.

user224551
quelle
Extrem gutes Argument. Entwickler sollten in der Lage sein, selbst zu denken und den Umfang des Problems zu analysieren. Das blinde Befolgen von Methoden führt immer noch zu Problemen. Ich habe Kollegen, die die Auswirkungen ihrer Änderungen auf der Seite überhaupt nicht berücksichtigen, und egal, welche Methode wir haben, die Dinge gehen mit der Zeit nach Süden. Ich bin sehr bemüht, den Bekanntheitsgrad von CSS im Team zu erhöhen. Verschachtelter SASS mit lokalen und globalen Stilen reicht aus, um das Projekt übersichtlich zu halten und ist einfach zu lesen.
Adrian Moisa