Bem und SMACSS: Ratschläge von Entwicklern, die dort waren

CSS -Methoden können umwerfend verwirrend und schwer zu entscheiden sein. Betrachten wir zwei der bekanntesten Optionen: BEM und SMACSS.

Sollten Sie eines davon für Ihr nächstes Projekt auswählen? Wofür sind sie am besten geeignet? Was könnte schief gehen? Wenn Sie bereits mit einem arbeiten, verwenden Sie es wie beabsichtigt? Im vollen Potenzial? Woher wissen Sie, ob Sie es richtig machen? Ich dachte, ich wäre nett, Menschen zu fragen, die diese Fragen bereits in ihren eigenen Projekten durchgemacht haben und aus ihren Erfahrungen lernen.

Ich habe Entwickler gefragt, die mit BEM und/oder SMACSS nach Erfolgsgeschichten, Horrorgeschichten, Rat und Vorsicht nach Vorsicht gearbeitet haben. Ich gab einigen Entwicklern eine ganze Liste von Fragen und andere haben mir ihre Gedanken nur freigeformt. Ich habe die Ergebnisse in das zusammengestellt, was ich hoffe, wird für diejenigen, die über die Optimierung ihrer CSS nachdenken, wertvoll sein.

Watch wird mit CSS Architecture zum CSS -Helden Ihres Büros Handwerk strukturierte, wartbare und skalierbare CSS Sehen Sie sich diesen Kurs an Sehen Sie sich diesen Kurs an

Für diejenigen, die neu von BEM und SMACSS sind, werde ich zunächst einen sehr hohen Überblick darüber geben, was BEM und SMACS sind.

Key Takeaways

• BEM ist für jede Projektgröße vielseitig: BEM ist nicht nur für große Projekte; Es ist vorteilhaft für die Aufrechterhaltung eines sauberen, wartbaren Code in kleinen und großen Projekten.
• vermeidet das Verschachteln mit BEM: BEM hilft bei der Verringerung der Komplexität von CSS, indem übermäßige Verschachtelung von Selektoren vermieden wird, was bei SASS -Codebasen üblich ist.
• Kapselung und Modularität mit BEM: BEMs Kapselungsmethode ermöglicht es, dass Komponenten über verschiedene Projekte hinweg wiederverwendet werden, ohne Abhängigkeiten zu übertragen.
• SMACSS vereinfacht Projekt Handovers: SMACSS -Kategorisierung erleichtert die Erklärung und Übergabe von Projekten, insbesondere in vertraglichen oder kollaborativen Umgebungen.
• hybride Ansätze können effektiv sein: Kombinieren Sie BEM und SMACSS können die Stärken beider Methoden nutzen, was Flexibilität und verbesserte Organisation in der CSS -Architektur ermöglicht.
• lesen und experimentieren: Sowohl BEM als auch SMACSS haben ihre Verdienste und können zusammen verwendet werden. Wenn Sie sich beides lesen und mit ihnen in Projekten experimentieren, kann dies zu einem verbesserten CSS -Management und Workflow führen.

Was ist Bem?

BEM steht für

Blockelement -Modifikator und stammt von Yandex. Es bietet eine ziemlich strenge Möglichkeit, Ihre CSS -Klassen in unabhängige Module zu ordnen. Es gibt einige Variationen der Idee, aber die häufigste sieht so aus:

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

Ein Block repräsentiert ein Objekt in Ihrer Website. Zum Beispiel:

• Eine Person
• Ein Anmeldeformular
• ein Menü
• Ein Suchformular

Ein Element ist eine Komponente innerhalb des Blocks, die eine bestimmte Funktion ausführt. Es sollte nur im Kontext seines Blocks sinnvoll sein. Zum Beispiel:

• eine Hand
• Eine Login -Taste
• ein Menüelement
• Ein Sucheingangsfeld

Ein Modifikator ist, wie wir die Variationen eines Blocks darstellen. Zum Beispiel:

• Eine große/kurze Person
• Ein kondensierter Anmeldeformular (z. B. versteckt wir die Etiketten in einer Version)
• Ein Menü, das so modifiziert ist, dass sie für eine Fußzeile oder Sitemap
anders aussehen
• Ein Sucheingangsfeld mit einem bestimmten Schaltflächenstil

Im Beispiel unseres Menüs könnten die Klassennamen so aussehen:

<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>

Es gibt andere architektonische Prinzipien und Tools für BEM auf der BEM.info -Website. Wenn Entwickler BEM diskutieren, konzentrieren sie sich jedoch häufig hauptsächlich auf die oben genannte Namenskonvention, und dies gilt für die Mehrheit der folgenden Diskussion.

Was ist SMACSS?

SMACSS ist ein CSS -Framework von Jonathan Snook. Auf der SMACSS -Website sagt er, dass es eher wie ein „Style Guide“ als ein starres CSS -Framework ist. Es konzentriert sich auf fünf Kategorien für seine Regeln:

Basis wird für Standardeinstellungen wie HTML, Körper, a, a: schweben verwendet. Dies schließt Ihr CSS -Zurücksetzen ein und befindet sich häufig in einer eigenen Basis -CSS -Datei oder zu Beginn Ihres Haupt -CSS.

Layout unterteilt eine Seite in Abschnitte mit Elementen wie Header, Fußzeile und Artikel. Oft zeigen Entwickler Layoutelemente, indem sie die Klasse mit l-.

Modul ist ein wiederverwendbares, modulares Element im Design. Die SMACSS -Dokumentation sieht Module als die Mehrheit Ihrer Elemente und erfordert daher nicht, dass Sie sie vorfixieren, aber Sie können dies tun, wenn Sie dies wünschen.

Zustand wird für die für jedes Element möglichen Variationen verwendet (z. B. aktiv, inaktiv, erweitert, versteckt). Diese sind mit IS-, z. is-aktiv, is-inaktiv, is-expandiert, ist versteckt oder über Pseudoklassen wie: Schwebe und: Fokus- oder Medienanfragen.

Thema ähnelt dem Zustand, definiert jedoch, wie Module und Layouts aussehen. Es gilt mehr für größere Standorte mit gemeinsamen Elementen, die überall anders aussehen. Sie würden Themenschwankungen pro Seite oder pro Abschnittsbasis hinzufügen.

untergeordnete Elemente in SMACSS (wie ein "Element" zu einem "Block" in BEM) haben die übergeordneten Elemente mit einem Armaturenbrett vorangestellt. z.B. Menü und Menü-Element.

SMACSS stellt fest, dass alles bei Entwicklerpräferenzen liegt und nicht so präskriptiv ist wie Bem. SMACSS bietet nur grundlegende Richtlinien. Verwenden Sie Ihre eigenen Namenskonventionen für jede der Kategorien und ordnen Sie sie auf Ihre bevorzugte Weise an, solange Sie Ihren Ansatz dokumentieren, damit andere Entwickler mitmachen können.

Anleitung von denen, die Bem

verwendet haben

Es gilt für alle Projekte, groß und klein

Hamish Taplin, ein Front-End-Entwickler aus Cardiff, Großbritannien, ist der Ansicht, dass BEM für Projekte groß und klein geeignet ist und zahlreiche Vorteile bietet:

"Bem wird als für große Projekte angepriesen, aber das glaube ich überhaupt nicht. Wenn Sie gerne CODE schreiben, der sauber, wartbar ist und nicht mit Spezifitätsproblemen kämpft, ist BEM für Sie. Einige sagen, dass die HTML, die sie produziert, hässlich oder überflüssig ist, aber ich finde es wunderschön. Ich kann einige HTML lesen und genau sehen, was los ist und wie Elemente miteinander in Verbindung stehen. Es ist großartig. "

vermeidet es,

zu nisten

Alec Raeside, ein Front-End-Entwickler aus Sydney, Australien, hat festgestellt

„Bem ist eine gute Möglichkeit, UI aufzubauen. Die beschreibenden, manchmal langen Klassennamen eignen sich sofort gut zum Verständnis, wo sich diese Klasse/dieser Selektor in Ihrer UI -Architektur befindet. Es bedeutet auch, dass Sie selten Selektoren nisten müssen, einen häufigen Untergang bei Sass -Codebasen. Wenn ich mit BEM nistet, möchte ich normalerweise ein Element über den HTML -Tag -Namen abzielen oder einen Spezifitätsschlacht gewinnen, wenn sich Komponenten stylen. ”

Es hilft Ihnen, die Kraft der Klassen wiederzuentdecken

Hamish Taplin sang das Lob von BEM und objektorientierten Prinzipien. Er wirft interessante Gedanken zum Konzept des „semantischen“ Markups:

„Die Vorteile von BEM waren sofort erkennbar. Bevor ich BEM- und OOCSS -Prinzipien einführte, war ich ein Verfechter des (fälschlicherweise) als „semantischen“ Markups bezeichneten Markups. Ich denke, viele Entwickler (eingeschlossen) haben weitgehend missverstanden, was dies tatsächlich bedeutet, und haben die Kraft von Klassen unter dem Deckmantel vernachlässigt, dass sie nicht „semantisch“ genug sind. Suchmaschinen und Bildschirmleser kümmern sich nicht um die Klassen, die Sie verwenden, oder einige zusätzliche Divs, die für ein Netz verwendet werden. Der Twitter-Ingenieur Nicholas Gallagher hat dies mit seinem Blog-Beitrag „Über HTML-Semantik und Front-End-Architektur“ total genagelt, als er sagt: „… Nicht alle Semantik müssen von Inhalten abgeleitet sein. Klassennamen können nicht "unruhig" sein. Was auch immer Namen verwendet werden: Sie haben Bedeutung, sie haben einen Zweck. Die Semantik der Klassenname kann sich von denen von HTML -Elementen unterscheiden. “

erleichtert die Arbeit an größeren Websites

Eine enorme Stärke von BEM, die viele Entwickler erwähnen, ist die Fähigkeit, die Entwicklung und Implementierung großer und modularer Projekte auf sauberere Weise zu bewältigen. Während BEM nicht nur für große Standorte ist, scheint es in diesem Raum große Vorteile zu haben. Hamish diskutierte seine Erfahrungen und hat sogar einen ganzen Blog -Beitrag darüber:

„Ich habe mich mit ein paar kleinen Projekten beschäftigt und mich damit auseinandergesetzt - es war zunächst ziemlich schwierig, da es die Art und Weise, wie ich seit Jahren gearbeitet hatte, widersprach, aber die Vorteile wurden offensichtlich. Dann begannen wir mit einem Projekt, das ziemlich groß und sehr modular war - meine gesundheitlichen Fähigkeiten. Dies war das erste Blugg-Projekt, an dem ich mit einem anderen Entwickler zusammengearbeitet hatte (Paul Goodfield, der auch BEM verwendet hatte)-ich habe das Front-End und Paul das Backend gemacht. Die Vorteile waren sofort offensichtlich, Paul konnte genau verstehen, was mein Markup tat, und schreiben seine Laravel -Vorlagen darum. Wenn er einige Lücken füllen musste, bedeutete die vorhersehbare Natur von BEM, dass er die HTML so schreiben konnte, wie ich es getan hätte, und der gesamte Prozess wurde viel reibungsloser gemacht. Ich habe darüber in einem Blog -Beitrag „Aufbau meiner Gesundheitsfähigkeiten“ darüber geschrieben.

Alec Raeside fand auch die Vorteile großer Projekte durch die modulare Natur des BEM -Namens. Er sagt:

„BEM ist gut für große Projekte geeignet. CSS ist komplex und große Projekte können bei unspezifischen Selektoren fallen, die an anderer Stelle unbeabsichtigte Konsequenzen haben können. Zum Beispiel kann das Target der Targeting aller

s unter einem Selektor wie .Container UL {} funktionieren, wenn dieser Code geschrieben wurde. Sobald viele andere Komponenten in einer .container -Komponente verschachtelt sind, ist das UL -Styling möglicherweise nicht angemessen. Mit der Einkapselung und Spezifität im Mittelpunkt der BEM -Methodik kann dies dazu beitragen, dass die Benennung von Konflikten zwischen Komponenten und unspezifischen Selektoren versehentlich einen Teil der Seite stylen.

Die BEM -Methodik verkauft Ihren Code zur Wiederverwendung

Harry Roberts, ein Berater Front-End-Architekt, Designer und Entwickler aus Großbritannien, der einen enormen Betrag der Ideen im Bereich BEM und Autoring Clean CSS beigetragen hat über seine Kapselung hinweg über Websites hinweg:

„Die BEM -Methodik ist ideal für Projekte geeignet, bei denen Ihre Komponenten möglicherweise von einer Codebasis auf eine andere verschoben werden müssen. Sie müssen vollständig eingekapselt sein, damit Sie nur ein Stück HTML, CSS und JS zu einem anderen Projekt verschieben können, und Sie müssen keine Abhängigkeiten mitnehmen. Stellen wir uns vor, Sie arbeiten für ein Unternehmen, das über fünf verschiedene Websites verfügt, und alle brauchen das gleiche Karussell auf der Homepage. Sie schreiben dieses Karussell in der BEM -Methodik, damit Sie es in einem Stück abholen und sich bewegen können. “

funktioniert gut mit Frameworks mit einem komponentbasierten Fokus

Josh Hunt, ein Front-End-Entwickler aus Sydney, hat festgestellt, dass es gut mit anderen Frameworks mit einem ähnlichen Komponentenfokus spielt:

„BEM eignet sich sehr gut für Websites mit vielen in sich geschlossenen Widgets oder Komponenten wie Web-Apps. Frameworks, die HTML -Komponenten (Angular, React, Polymer/Web -Komponenten) fördern, erleichtern auch viel einfacher, BEM -Methoden anzuwenden. “

schnelle Möglichkeit, Prototypen zu liefern

Bob Donderwinkel, ein Front-End-Entwickler aus Rotterdam, Niederlande, hielt eine großartige Präsentation über die Vorteile von BEM-CSS. Er weist auf den größten Vorteil hin, den er bei der Arbeit mit BEM:

gefunden hat:
„Ich habe mich seit einem halben Jahr mit BEM bestritten und es in zwei Projekten verwendet: eine neue Scrolling Gallery -Seite für www.viewbook.com und überarbeitet eine alte Flash -Site auf einer HTML -Version. Die Entwürfe für diese Projekte waren gut definiert und ich würde sagen, der größte Sieg mit BEM bestand darin, einen Prototyp schnell zu liefern. Und das liegt hauptsächlich daran, dass das „Entschlüsseln“ Ihres Designs in Blöcken, Elementen und Modifikatoren einen schönen Vorsprung bietet, um einige CSS zu codieren. “
lässt Sie zweimal überlegen
Josh Hunt stellt fest, dass die Namenskonvention Ihnen hilft, zweimal nachzudenken, bevor Sie die Dinge zu komplex machen:
"Ich habe festgestellt

Stellen Sie sicher, dass Sie planen!

Hamish Taplin lieferte auch diese Ratschläge für diejenigen, die ein neues Projekt starten:

„Planen Sie ein gewisses Maß an Planung, wenn Sie ein Projekt starten. Ich neige dazu, durch die Modell zu gehen und nach Mustern zu suchen, die ich in BEM -Module abstrakten kann. Dies kann zunächst schwierig sein, aber Sie werden es besser, bis Sie anfangen, alte Muster wiederzuverwenden. Das Wiederverwenden von Code ist das Nirvana der Entwicklung und etwas, das Ihr Chef Ihnen dankbar wird, wann die Produktionskosten sinken, weil Sie effizienter sind! "

werde nicht zu streng damit

Josh warnt davor, mit Ihren Projekten zu restriktiv zu werden, wenn Sie BEM:

verwenden, um zu verwenden

"Fühlen Sie sich nicht durch BEM eingeschränkt oder haben Sie nicht gezwungen, ein seltsames Muster zu folgen. Ich bin von diesen beiden Tweets von Harry Roberts angezogen:

Das heißt nicht 2, 2014

Josh erklärt: "BEM sollte nicht das Ziel eines Projekts sein, es sollte etwas sein, das Sie bei der Entwicklung und Bewerben, wo sie nützlich sind, berücksichtigen. Lassen Sie sich nicht zu sehr mit dem Versuch fortfahren, sich an einen theoretischen „Standard“ zu halten. Helferklassen (wie .pull-right oder .text-center) sind völlig cool, um mit Bem zusammen zu existieren. Wo du gehabt hast, wird genauso gut (vielleicht sogar besser).
Wenn Sie gezögert haben, springen Sie einfach hinein und probieren Sie es aus
Hamish machte den Sprung nicht sofort in Bem. Es dauerte ein bisschen Zeit, eine einflussreiche Präsentation und eine wechselnde Arbeit, um ihn dazu zu bringen, sich zu überdenken und Bem zu setzen, um an der Arbeit an seinen Klassen zu arbeiten. Aber er ist froh, dass er es getan hat.

„Ich hatte BEM ein paar Mal erwähnt und dachte, es sah interessant aus, aber immer noch so wie ich, und versuchte, die Menge an Markup und Klassen zu minimieren, die ich schrieb, und verwendete sass @extend, um die Probleme zu umgehen . Eines Tages sah ich Harry Roberts 'Video "Breaking Good Gewohnheiten" und war überwältigt. Dieser Typ war genau richtig - welche Probleme haben wir tatsächlich gelöst? “

Hamish fährt fort: „Ich habe zu dieser Zeit Jobs bewegt, angefangen bei meinem aktuellen Job bei Blugg und sah es als saubere Pause für den Ausprobieren an.“

Ich fragte Harry, denselben Entwickler, der Hamish mit seinem Vortrag über „Breaking Good -Gewohnheiten“ umgehauen hat und der Josh mit seinen Tweets inspirierte, wenn er besondere Erfolgsgeschichten zu teilen hatte. Seine Worte wiederholten die Mentalität „Geben Sie es ein Go“:

„Jedes Projekt, an dem ich gearbeitet habe, hat von der BEM -Namenskonvention profitiert. Es ist kein sofortiges, lebensveränderndes Ding, daher ist es schwierig, an sich Erfolgsgeschichten zu zitieren: Normalerweise ist es nur einer von vielen Teilen, die zusammenkommen, um ein viel besseres Ganzes zu schaffen. Wie ein Lenkrad selbst ist nicht sehr tiefgreifend, aber es ist ein wichtiger Bestandteil eines Autos. BEM -Namening ist eine Sache, die ein ganzes Projekt viel besser macht.

„Das Nächste, was ich zu einer Erfolgsgeschichte habe, ist die Zeit, als ich einen Kunden von mir vorgebracht habe. Er hatte eine lange, lange Zeit vermieden, und zitierte den oft verwendeten "Aber es ist einfach so hässlich!" Ich überzeugte ihn, es nur einen halben Tag mit einem Projekt auszuprobieren und zu sehen, was er damals dachte. Er liebte es. Nach nur wenigen Stunden stellte er hier Unterstriche ein und doppelte Hyphens hier. Es ist immer toll zu sehen, dass Menschen diesen Glühbirnenmoment haben. "

Harry stellte auch die folgende Frage für diejenigen, die sich nicht sicher sind:

"Wenn Sie sich über BEM nicht sicher sind, beantworten Sie diese Frage: Was gibt es nicht, wenn Sie eine strenge, transparente und sinnvolle Art der Benennung von Dingen mögen? Ehrlich gesagt, es gibt keine Nachteile bei der Verwendung von BEM -Namen. “

Ich überlasse die letzten Worte dazu Hamish Taplin, der sagte:

„Versuchen Sie es einfach. BEM geht es darum, Probleme zu lösen, also prüfen Sie, ob dies für Sie der Fall ist. Ich habe gesehen, wie es in vielen Forum oder Diskussionen von Menschen abgewiesen wurde, die es noch nie versucht haben und ihr Markup „semantisch“ halten möchten. Ich war genauso, bis ich den Sprung wagte und es meine gesamte Aussichten darüber veränderte, wie ich HTML und CSS schreiben sollte. Sie müssen bereit sein, sich anzupassen und zuzugeben, wenn Sie falsch liegen, wenn Sie großartige Produkte bauen möchten. “

Anleitung von denen, die SMACSS

verwendet haben

Leichte Demonstration und Übergabe

Chris Wright, ein in Sydney ansässiger Entwickler, ist ein großer Fan von SMACSS und gab seinen Rat. Chris 'Hauptlob für SMACSS ist die einfache Verwendung seiner Kategorisierungsfunktionen:

„Als ich begann, den Grund zu nutzen, warum SMACSS so leistungsfähig war, fand ich die Kategorisierungsfunktionen, dass es eine wirklich lesbare und lehrbare Methodik im Vergleich zu den anderen beliebten CSS -Methoden ist.“

„Ich habe es als Auftragnehmer verwendet, weil es so viel einfacher ist, den Menschen zu demonstrieren- hier ist mein Stylesheet: Klassen mit einem Layout, Dinge mit M-davor sind Module, Module, und so weiter. Obwohl ich noch übergeben und erklären muss, wurde die Menge, die ich erklären und das Dokument reduziert habe, sodass mir auch außerhalb der Arbeit mehr Zeit gespart hat. Seit letztem Jahr habe ich es für jedes Projekt verwendet, das ich kann. "

Gut für Neulinge einer CSS -Methodik

Chris stellte insbesondere fest, dass er Probleme hatte, andere dazu zu bringen, mit frühen Versionen von BEM und OOCSS zu arbeiten, aber SMACSS war leichter zu erklären:
"Ich habe festgestellt, dass es weitaus einfacher ist, einem Entwickler zu erklären, der noch nie auf eine CSS -Methodik gestoßen ist - was der Wert dieser Methodik ist und wie sie verwendet werden.
„Ich habe eine Weile mit Bem versucht, aber immer fand, dass Menschen verwirrt werden würden. Bei OOCSS stellte ich fest, dass die Namen der Menschen oft überall waren, aber sie haben es im Allgemeinen bekommen. SMACSS bietet eine Kategorisierung, mit der Sie sofort sehen können, was der Zweck einer Klasse ist. “
Lesen des Lesens
Chris sagte auch, er habe frühe Versionen von BEM ein bisschen ausführlich gefunden, aber es hat gesehen, dass es sich im Laufe der Zeit entwickelt hat. Er bevorzugt SMACSS.
“Auch aus Sicht der Leser über die Methodik, aber ich habe immer noch nicht das Gefühl, dass es für mich ist.
skalierbar für alle Projekte
Chris weist auch darauf hin, dass SMACSS auf größeren Standorten im Vergleich zu kleineren nicht vollständig befolgt werden muss, was Flexibilität und Anwendbarkeit in allen Projekten ermöglicht:
"Ich denke, es ist sicher zu sagen, dass verschiedene Formen von SMACS für alle Projekte geeignet sein können. Wie Snook in seinem Buch feststellt-in einem kleineren Projekt würden Sie wahrscheinlich keine Dinge wie das Thema als Kategorie (T-) verwenden, aber es ist ziemlich wertvoll, eine Layout-Klasse von einer Modulklasse aus einem Blick zu differenzieren. “
Sie können SMACSS und BEM

verwenden

Hamish Taplin verfolgt tatsächlich einen hybriden Ansatz, wobei einige SMACSS -Konzepte in seinem BEM verwendet werden. Ich habe festgestellt, dass einige Entwickler einen Sweet Spot zwischen den beiden gefunden haben, daher ist es möglicherweise nicht eine Frage der Auswahl eines anderen:

"Ich verwende einige SMACSS -Konzepte und ich sehe sie nicht als gegenseitig ausschließend. Ich organisiere meinen SASS in "Basis", "Layout" und "Modulen", die weitgehend SMACSS -Konventionen sind. Ich bin auch ein großer Fan von „State“ -Klassen in meinem JavaScript. Beispielsweise kann ein Modul, das sichtbar oder versteckt sein kann, möglicherweise issible oder is-versteckte Klassen aufweisen, die von JavaScript gesteuert werden. Ich finde, dies hilft zu unterscheiden, was von JavaScript gesteuert wird, anstatt Modifikatoren im Bem-Stil zu verwenden. Ich wäre aber nicht dagegen. "

Bob Donderwinkel stimmte zu, dass in den meisten Situationen eine Mischung aus BEM und SMACSS möglich ist:

„Ich würde sagen, dass die Verwendung eines anderen nicht den anderen ausschließt, obwohl es einige Überschneidungen mit BEM gibt, wenn Sie die Modul- und Statusregeln von SMACSS betrachten. Aber außerdem können Sie beide nach Bedarf mischen und anpassen. “

Harry Roberts empfiehlt die Auswahl der besten Teile von überall und verwendet seine eigene Methodik, die er als „ITCSS“ mit einer Kombination aus BEM, SMACSS und OOCSS nennt.

„Ich benutze meine eigenen - noch unveröffentlichten - ITCSS -Methodik neben Smatterings von OOCSS, BEM und SMACSS. Es ist äußerst wichtig, Teile von überall auszuwählen, anstatt eine methodische Methodik bis zum bitteren Ende blind zu befolgen. Ich verwende immer BEM -Namen und würde die BEM -Methodik für Projekte verwenden, bei denen ich vollständig eingekapselte Komponenten benötige, die über mehrere Codebasen hinweg geteilt werden müssen. Ich würde diese Komponenten mit OOCSS schreiben, und dann würde ich diese Komponenten in eine ITCSS -Architektur einpacken.

"Es beginnt und hört nicht mit BEM und SMACSS auf. ITCSS wurde entwickelt, um ganze Projekte zu erfassen. OOCSS ist eine großartige kleine Methodik, die alles kompatibel ist. Solide Prinzipien können verwendet werden, um CSS von besserer Qualität zu schreiben. “

Wenn Sie ein bisschen mehr über ITCSS herausfinden möchten, hat Harry ein A -Video, das Sie sehen können. Für weitere Informationen zu soliden CSS -Prinzipien bot Harry auch diese beiden Artikel an:

• Das einzelne Verantwortungsprinzip, das auf CSS angewendet wird
• Das auf CSS angewendete offene/geschlossene Prinzip

Wenn Sie dies nicht getan haben, lesen Sie das SMACSS -Handbuch

Harry Roberts empfiehlt dringend, den SMACSS -Leitfaden zu lesen:

„Lesen Sie es einfach darüber nach. SMACSS ist eines der besten Teile des Front-End-Lesens, das in den letzten Jahren herausgekommen ist, und es ist sehr schwierig, mit der Logik, die es vorlegt, nicht einverstanden zu sein. “

Horrorgeschichten über Bem und SMACSS

Ich habe versucht, von unseren Entwicklern ein paar Horrorgeschichten und Warnwörter zu bekommen - Lektionen, die wir aus ihren Fehltritten lernen konnten, während sie im Lernprozess waren. Hier sind ihre Gedanken.

Alec Raeside auf Bem

„Es ist eine ziemliche Lernkurve, es ist nicht konzeptionell zu schwer zu verstehen, aber es dauert eine Weile, bis Ihre Gewohnheiten beim Schreiben normaler CSS/SASS geändert werden. Es ist sehr einfach, nicht auf eine rein komponentenbasierte Weise zu denken. Ich habe das ganze Jahr über BEM geschrieben und habe immer noch das Gefühl, so zu lernen und zu aktualisieren, wie ich es schreibe. Manchmal muss man ein bisschen mehr CSS mit BEM im Vergleich zu Nicht-BEM-CSs schreiben, um etwas zu erreichen, das ärgerlich ist, aber es ist am besten, Konsistenz zu haben.

"Bem an sich reicht nicht aus, um die Benutzeroberfläche bestmöglich zu erstellen. Wir haben es nicht perfekt, aber es wird besser. Wir haben kürzlich auch mit SCSS-Lint begonnen, um unsere Codierungsstandards und in geringerem Maße unsere BEM-Nutzung durchzusetzen. “

Chris Wright auf SMACSS

"Die meisten meiner Horrorgeschichten sind nicht wirklich Horrorgeschichten, sondern Orte des Schmerzes. Ich habe auf Agenturen, die wirklich Bootstrap -Framework sind, die mit einem OOCSS -Ansatz weiterhin fortfahren möchten, was in Ordnung ist (OOCSS ist auch ziemlich gut) - aber versucht, jemanden zu überzeugen, der einen Ansatz verwendet, der mit ihrem jeweiligen Rahmen ein wenig geliefert wird, um es leicht zu überzeugen Passen Sie ihre Methodik für ihre Projekte an, die das Framework nicht verwenden, ein ziemlich vergebliches Argument. Also musste ich es in diesen Fällen lassen. Die größte Schwäche von SMACSS, die ich sagen würde, ist tatsächlich, dass sie weniger weit verbreitet ist als BEM oder OOCSS - es scheint, als hätten weniger Menschen davon gehört.

„Meine eigenen persönlichen Geschichten bei der Implementierung haben sich nicht wirklich an den Punkt der Methodik haftet. Es ist sehr einfach, sich in die Falle von "Modul All the Dingen" einzulassen und zu vergessen, dass die vorgeschlagenen Kategorien genau das waren, ein Vorschlag. Am schwierigsten ist es, zu verstehen, was in jeder Kategorie qualifiziert ist. Wird ein weltweit verwendetes Primärknopf ein Modul, das .M-BTN-Primary bezeichnet wird? Oder ist das, was es im Modul lebt? Es kann verwirrend sein, wenn Sie anfangen, Methoden zu verwenden, und im Fall von SMACSS, bei denen Sie eindeutig Dinge wie Layout, Module und Themen definieren. Ich bin auf einige Situationen gestoßen, in denen ich anhalten und überlegen musste, wo etwas gehörte, aber das war auch positiv für mich, und wir wollen mehr organisierte Klassen, die Menschen leicht lesen und verstehen können. “

Josh Hunt on Bem

„Das erste Mal, dass BEM mit BEM häufiger ein Albtraum ist. Mein erstes Mal, als ich. Classes__about__Five__LEVELS__DEEP erstellte. Bem soll keine Eins-zu-Eins-Zuordnung der Dom-Struktur zu Klassennamen sein.

"Was ich für schwierig gefunden habe, BEM anzuwenden, ist, wenn Sie zusätzliche Elemente nur für das Styling benötigen, z. B. .Wrapper oder .inner. Es ist nicht wirklich das Recht, einen .Article__Nner zu haben (innerer ist kein Element eines Artikels). Manchmal können Sie mit den Wörtern, die Sie wählen, kreativ sein (Div.Article__media img.article__img), aber manchmal ist es vollkommen in Ordnung, Bem zu „brechen“ und .Article-Wrapper oder .article-innerer.

Hamish Taplin auf Bem

„Ich denke, die größte Herausforderung bei BEM ist der Abstraktion - es kann schwierig sein, Ihren Kopf manchmal zu bewältigen. Es erfordert ein gewisses Maß an Planung, um die Muster zu erkennen, die abstrahiert werden können, und Sie müssen manchmal neu aufrüsten, wenn Sie die Dinge nicht zum ersten Mal erkennen. Dies ist jedoch in der Entwicklung üblich und Planung und Erfahrung können sehr helfen.

"Ein weiterer Knackpunkt ist, dass es eine vollständige Kontrolle über Markup erfordert - etwas, das schwierig sein kann, wenn Sie in einer Umgebung (wie .NET) arbeiten, in der dies nicht immer möglich ist."

Harry Roberts auf Bem

"Weil BEM -Namen nur ein Goodidea ™ ist, ist es sehr selten, dass Sie irgendwelche Horrorgeschichten hören werden. Das, was ich mir vorstellen kann, fand zu Beginn des Jahres mit einem wirklich tollen Kunden von mir statt. Sie waren ein wirklich fleißiges Team, das viel recherchiert und in eine bessere CSS -Architektur eingelesen hatte, und sie haben mich für eine Woche Training einbezogen, um alle rauen Orte zu bügeln. Einer der rauesten Stellen war die Umsetzung der BEM -Benennung. Leider haben sie einen Artikel gelesen (in dem ich im Interesse der Nichtverpackung nicht auf hier verlinkte), der einige wirklich, wirklich schlechte Ratschläge zur Bezeichnung von BEM gab. Grundsätzlich fehlerhafte Informationen, die einfach einfach falsch waren. Der Kunde befolgte diesen Rat in den Brief und hat sie in echte Probleme gebracht. Die Dinge waren verwickelter und miteinander verbunden als je zuvor - etwas, das BEM -Benennung lösen soll! Das ist jedoch der einzige Vorfall, den ich mir bewusst bin. “

Bob Donderwinkel auf Bem

"Nun, ich würde es nicht genau eine Horrorgeschichte nennen;), aber ich habe ein kleines Bem -Gerüstwerkzeug namens Kabem gemacht. Der Fehler, den ich dort gemacht habe, wurde BEM -CSS -Klassennamen mit mehreren Elementen verwendet (wie Block__Element __element). Hauptsächlich, weil dies dazu beitrug, eine gut verschachtelte Ordnerstruktur basierend auf diesen CSS -Klassennamen zu erzeugen. Im Wesentlichen habe ich die HTML -Struktur in CSS -Klassennamen erfasst, aber das macht BEM tatsächlich ein bisschen starrer, was nicht benötigt wird.

„Ein weiteres kleines Gotcha war, dass das Nesting BEM -CSS -Selektoren, wie Sie es mit SASS oder weniger tun können, tatsächlich die CSS -Spezifität hinzufügen, wo sie nicht benötigt wird. Bem funktioniert am besten als Namen einzelner Klassen, also ist das vielleicht etwas zu beachten. “

Schlussfolgerung

Nachdem alle Antworten und Ideen aller durchgemacht wurden, war klar, dass der beste Ansatz ein Hybrid zu sein schien. Lesen Sie alles nach, probieren Sie sowohl BEM- als auch SMACSS offen und sehen Sie, ob sich Ihr CSS und Ihr Workflow verbessern. Sie müssen keine Methodik auswählen. Kombinieren Sie die Konzepte einiger weniger Methoden zu einem, der für Sie und Ihr Team funktioniert. Wenn Sie Hilfe benötigen, gibt es viele Entwickler, die bereit sind, einige Gedanken und Ratschläge zu teilen.

Credits

Ein sehr großes Dankeschön an die folgenden Entwickler, die freundlich genug waren, ihre Zeit aufzugeben, um meine Fragen zu beantworten und ihre Gedanken und Erfahrungen zu teilen:

• Alec Raeside - Website, Twitter
• Bob Donderwinkel - Website, Twitter
• Chris Wright - Website, Twitter
• Hamish Taplin - Website, Twitter
• Harry Roberts - Website, Twitter
• Josh Hunt - Website, Twitter

häufig gestellte Fragen zu BEM und SMACSS

Was sind die wichtigsten Unterschiede zwischen BEM und SMACS? BEM ist eine Namenskonvention, die CSS leichter zu lesen und zu verstehen macht, während SMACS ein Style -Leitfaden ist, der Regeln für die CSS -Organisation liefert. BEM konzentriert sich auf die visuelle Darstellung der Website, während sich SMACS auf die Struktur und das Layout konzentriert. BEM verwendet eine bestimmte Namenskonvention für Klassen, während SMACSS Stile in fünf Typen kategorisiert: Basis, Layout, Modul, Zustand und Thema. Skalierbarkeit durch eine klare und verständliche Struktur für Ihr CSS. Es verwendet eine bestimmte Namenskonvention, mit der die Beziehung zwischen verschiedenen Elementen und ihren Elternblöcken einfach identifiziert wird. Dies erleichtert die Verwaltung und Skalierung großer CSS -Codebasen, da es die Wahrscheinlichkeit verringert, Konflikte zu benennen und den Code leichter zu lesen und zu verstehen.

Was sind die Vorteile der Verwendung von SMACS? SMACSS bietet eine Reihe von Richtlinien für die Organisation Ihres CSS, wodurch Ihr Code effizienter und leichter zu warten ist. Es ermutigt Sie, Ihre Stile zu kategorisieren, wodurch Ihr CSS modularer und wiederverwendbarer werden kann. SMACSS fördert auch die Verwendung staatlicher Regeln, die es einfacher machen können, dynamische Stile in Ihrem CSS zu verwalten. zusammen. BEM kann als Namenskonvention innerhalb des SMACSS -Frameworks verwendet werden. Dies kann die Vorteile beider Methoden bieten, wobei BEM Ihr CSS leichter zu lesen und zu verstehen und SMACS einen strukturierten Ansatz zur Organisation Ihres CSS zu bieten.

Wie handelt BEM mit der CSS -Spezifität? Dies verringert die Spezifität Ihrer Selektoren und erleichtert das Verwalten und Überschreiben Ihres CSS. BEM entmutigt auch die Verwendung verschachtelter Selektoren, die die Spezifität erhöhen und Ihr CSS schwieriger machen kann. Strukturieren Sie Ihr CSS. Es fördert die Verwendung von Klassen über IDs und entmutigt die Verwendung von verschachtelten Selektoren. Dies hilft, die Spezifität niedrig zu halten und Ihr CSS einfacher zu verwalten und zu überschreiben. lange und komplexe Klassennamen. Dadurch kann Ihr HTML und Ihr CSS schwieriger zu lesen und zu verstehen. Dies kann jedoch durch die Verwendung eines Präprozessors wie Sass oder weniger gemindert werden, was dazu beitragen kann, Ihre BEM -Klassen zu verwalten und zu vereinfachen. Herausforderungen bei der Umsetzung von SMACSS besteht darin, dass es ein gutes Verständnis von CSS und seinen Best Practices erfordert. Es erfordert auch einen disziplinierten Ansatz zum Schreiben und Organisieren Ihres CSS. Sobald Sie jedoch den Dreh raus haben, kann SMACS Ihr CSS effizienter und leichter aufrechterhalten. -Basierend Design, wie es die Verwendung von Blöcken fördert, die als individuelle Komponenten betrachtet werden können. Jeder Block ist unabhängig und kann auf Ihrer Website wiederverwendet werden. Dies macht BEM eine gute Wahl für Websites, die einen Komponenten-basierten Designansatz verwenden. Ein Modul ist eine eigenständige Komponente, die auf Ihrer Website wiederverwendet werden kann. Dies macht SMACS zu einer guten Wahl für Websites, die einen Komponenten-basierten Designansatz verwenden.

Das obige ist der detaillierte Inhalt vonBem und SMACSS: Ratschläge von Entwicklern, die dort waren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!