Arbeiten mit BEM im Maßstab

Dieser Artikel untersucht die Herausforderungen und Best Practices der Verwendung der CSS -Methodik BEM (Block, Element, Modifikator) im Maßstab und stützt sich auf Erkenntnisse erfahrener Entwickler. Die beantwortete Kernfrage ist, wie die Komplexität von BEM in großen Projekten effektiv verwaltet werden kann.

Der Artikel beginnt mit der Hervorhebung eines gemeinsamen Missverständnisses: Übernistung. Während die grundlegende BEM -Struktur (.block__element--modifier) unkompliziert ist, erweitern viele Entwickler dies fälschlicherweise auf übermäßige Ebenen (z. B. .block__element__subelement--modifier). Der Konsens unter befragten Entwicklern besteht darin, die Verschachtelung im Allgemeinen auf ein oder zwei Ebenen zu beschränken. Eine tiefe Verschachtelung verringert die Lesbarkeit und Wartbarkeit und weist häufig auf eine bessere Block -Scoping oder -Restrukturierung hin. Ein Entwickler schlägt vor, längere, beschreibendere Elementnamen zu verwenden, anstatt zusätzliche Nistniveaus hinzuzufügen. Ein anderer bietet eine überzeugende Analogie, in der übermäßige Verschachtelung mit der starken Definition einer Dom -Struktur in CSS vergleichbar ist und sich für einen flexibleren Ansatz befürwortet. Allerdings halten sich nicht alle Entwickler an dieser zweistufigen Grenze. Einige finden, dass manchmal tieferes Verschachteln notwendig ist.

ordnungsgemäßes Block -Scoping ist entscheidend. Der Artikel betont mit den kleinsten und in sich geschlossensten Einheiten und vermeidet übermäßig breite Blockdefinitionen, die nicht verwandte Elemente umfassen. Dieser Ansatz sorgt für eine bessere Modularität und Wiederverwendbarkeit.

CSS -Dateien organisieren, ist ein weiterer wichtiger Aspekt. Mehrere Entwickler setzen sich für eine Ein-Datei-per-Block-Struktur ein und fördern die Modularität und einfache Wartung. Andere kombinieren dies mit Elementen von SMACSS und erzeugen einen hybriden Ansatz. In dem Artikel wird auch ITCSS (invertiertes Dreieck CSS) erörtert, eine Methodik, die CSS auf der Grundlage von Spezifität, Expliziten und Reichweite strukturiert und ein strukturiertes Schichtsystem zur Verwaltung großer CSS -Projekte bietet.

Die Verwendung langer, beschreibender Klassennamen wird über kryptische Abkürzungen gefördert, um die Lesbarkeit und Wartbarkeit der Code zu verbessern. Der Artikel rät nachdrücklich gegen die Verwendung von Sass @extend mit BEM und bevorzugt einen Multi-Class-Ansatz in HTML, um eine klare Beziehung zwischen den Klassen aufrechtzuerhalten und das CSS zu vermeiden. Dieser Ansatz ermöglicht eine größere Flexibilität und eine einfachere Änderung.

Schließlich ist die Bedeutung der CSS -Linie betont, die Namenskonventionen durchzusetzen und die Konsistenz zwischen den Teams zu gewährleisten. Der Artikel berührt auch den breiteren Yandex -BEM -Stack, der Tools für JavaScript und Templating umfasst, aber anerkennt, dass sich viele Entwickler ausschließlich auf die CSS -Methodik konzentrieren. Die Schlussfolgerung betont, wie wichtig es ist, einen Workflow zu finden, der dem Team und dem Projekt entspricht und Werkzeuge und Techniken aus verschiedenen Quellen kombiniert. Die Vorteile gut dokumentierter, strukturierter Komponenten werden hervorgehoben, zusammen mit der Notwendigkeit, Über-Automierung für eine bessere Portabilität zu vermeiden.

Der Artikel schließt mit einem häufig gestellten Fragenabschnitt, der verschiedene Aspekte von BEM, seinen Vergleich mit anderen Methoden und praktische Tipps zur Implementierung und Skalierung abdeckt.

Das obige ist der detaillierte Inhalt vonArbeiten mit BEM im Maßstab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!