Share
Haben Sie sich jemals gefragt, wie eine große Site wie Tuts + CSS, HTML und JavaScript in der Reihenfolge der Weiterentwicklung und der Iteration hält? Ich werde Ihnen den Prozess zeigen, den wir implementiert haben, um alles aufgeräumt und wartbar zu halten.
Der erste Schritt in diesem Prozess bestand darin, einen Weg zu finden, um die große Menge an CSS aufzubauen, die wir brauchen, die nicht zwangsläufig im Chaos endet.
Mit CSS bauen Sie traditionell Stile nach Bedarf auf und bemühen sich darum, Ihre Selektoren breit anwendbar zu machen, damit sie auf der gesamten Site wiederverwendet werden können. Hier einige einfache CSS-Regeln, die in den meisten Stylesheets nicht fehl am Platz wären:
h1 font-size: 22px; .titel font-size: 18px;
Wenn Sie diese Selektoren in einem bestimmten Teil einer Seite überschreiben müssen, können Sie verschachtelte Regeln verwenden, um Selektoren zu erstellen, die auf spezifischere Elemente abzielen:
.Site-Header h1 Schriftgröße: 40px; .site-header .subtitle font-size: 28px; .site-header a.navigation color: # 136FD2…
Dieser Ansatz fühlt sich intuitiv richtig an, kann jedoch erhebliche Probleme verursachen, sobald Sie eine Website mit mehr als nur wenigen Seiten aufgerufen haben, an der mehrere Entwickler arbeiten.
Was passiert, wenn wir das Styling ändern? h1 oder .Untertitel auf globaler Ebene? Schriftgröße wird bereits durch einen spezifischeren Stil überschrieben, wenn wir jedoch a hinzufügen Schriftgewicht oder Zeilenhöhe es wird nicht sein Alle Änderungen, die an den globalen Stilen vorgenommen werden, können sich auswirken und spezifischere Stile auf eine Weise beeinflussen, die ohne genaue Kenntnis aller Stile auf der Site nicht vorhersehbar ist.
Je mehr Stile auf diese Weise erstellt werden, desto ausgeprägter werden die „Nebenwirkungen“ interagierender CSS-Stile, die ein umständliches Ausprobieren erfordern, was letztendlich zu einem Produktivitätsverlust und mehr Fehlern in der Produktion führt.
Um dieses Problem zu vermeiden, haben wir einen CSS-Ansatz gewählt, der auf der BEM-Methode basiert. Anstatt Stile zu definieren, die global gelten, werden alle Stile mittels einer Namenskonvention in eigenständige „Blöcke“ zusammengefasst. Ein „Block“ ist mehr oder weniger als eine einzelne freistehende Inhaltseinheit definiert, die potenziell wiederverwendbar ist (obwohl es nicht zwingend ist, dass sie tatsächlich wiederverwendet wird)..
Schauen wir uns zum Beispiel den Block "Ausgewählte Abschnitte" an:
Gemäß unserer Namenskonvention hat dieser Block eine Wurzel div Element mit dem Klassennamen vorgestellte Abschnitte. Es enthält Elemente mit Klassennamen wie Vorgestellte-Abschnitte__Titel und Featured-Sektionen__Section-Link.
Wir verwenden eine übereinstimmende Namenskonvention für unseren Quellcode, also alle Stile dafür vorgestellten Abschnitt Block sind in gespeichert modules / featured_section.sass:
.Hervorgehobene Abschnitte Marge: 0 0 $ Rinnenbreite 0 Polsteraufsatz: 8px Bordürenaufsatz: 4px solide # dae1e5 .featured-section__title color: # 8fa6b3 font: fett 14px / 1.2em $ font
Diese Namenskonvention gewährleistet, dass Stile nicht mehr in Konflikt stehen und sich vermischen. Solange unsere Namenskonvention befolgt wird, wobei der Blockname am Anfang jedes Klassennamens steht, kann ein Stil nichts außerhalb seines eigenen Blocks beeinflussen.
Außerdem ist es sehr einfach, herauszufinden, wo in der Codebase nach den einem Element entsprechenden Styles gesucht werden muss. Sie können einfach den Klassennamen des Elements anzeigen und den Namen des zu öffnenden Stylesheets kennen.
Wir haben uns entschieden, diese Namenskonvention auch auf unsere Ansichten anzuwenden. Jeder Block hat eine Ansicht mit demselben Namen, die unter gespeichert ist Ansichten / Module. Zum Beispiel die HTML-Ansicht für unsere vorgestellte Abschnitte Block lebt in views / modules / _featured_sections.html.slim:
Auf dieselbe Weise wie durch die Benennungskonvention für unsere CSS-Dateien ist es leicht, einen CSS-Stil zu finden. Durch die Benennungskonvention für unsere Ansichten wird auch der Ansichtscode leicht gefunden. Dies ist praktisch, wenn Sie eine Seite in einem Browser anzeigen und einen bestimmten Teil feststellen, für den einige Änderungen erforderlich sind. Sie können einfach ein „Inspect Element“ ausführen und den Blocknamen verwenden, der in der CSS-Klasse eines Elements deutlich sichtbar ist, um Ihnen zu helfen, direkt zur entsprechenden Ansichtsdatei zu springen.
Wir haben auch die gleichen Namenskonventionen für unseren JavaScript-Code übernommen, mit etwas Hilfe von Backbone.js.
Jeder Block, für den JavaScript-Verhalten angewendet werden muss, erhält ein Backbone-Ansichtsobjekt mit demselben Blocknamen:
Accentsconagua
class window.AccountHeader erweitert Backbone.View-Ereignisse: 'change .account-header__mobile-menu-select': 'mobileMenuChange' mobileMenuChange: -> document.location = @_selectedOption (). data ('url') _selectedOption: -> @ $ 'Option: ausgewählt'Wir haben einen Code zum Laden von Ansichten geschrieben, der beim Laden der Seite angewendet wird. Daher wird die entsprechende Backbone-Ansicht automatisch für jedes Element mit einer CSS-Klasse geladen, die einer Liste von Blocknamen mit zugehörigen JS entspricht.
Wir verwenden dieselbe Dateinamenskonvention auch für unseren JavaScript-Code, sodass die Struktur für einen voll ausgestatteten Block folgendermaßen aussieht:
Ich würde diesen Ansatz für jedes Projekt wärmstens empfehlen. Ich denke, es ist von unschätzbarem Wert, wenn Sie an einem großen Projekt arbeiten, und selbst wenn Sie an einer viel kleineren Website arbeiten, gibt es wirklich keinen Nachteil, wenn Sie den Front-End-Code modular strukturieren.
Allerdings können Probleme beim Versuch, diese Strategie zu verwenden, auftreten, wenn Sie bereits über eine große Anzahl globaler CSS-Stile verfügen oder CSS-Bibliotheken wie Twitter Bootstrap verwenden. Da BEM-Stile einen einzelnen Klassennamen als Selektor verwenden, haben sie einen sehr niedrigen CSS-Spezifitätswert und werden von globalen CSS-Stilen, die häufig mehrere Ebenen verschachtelter Selektoren sowie Tag-Namen und IDs haben, mit Füßen getreten.
Es ist definitiv immer noch möglich, von einem globalen CSS-Stil zu einem modulareren BEM-Stil überzugehen, und ich würde auf lange Sicht argumentieren, dass es sich lohnt. Erwarten Sie jedoch, dass es etwas schwieriger wird, Ihre BEM-Stile für eine Weile aufzubauen, und seien Sie darauf vorbereitet, ein paar temporäre hinzuzufügen !wichtig Deklarationen in Ihrem CSS, bis Sie Ihre globalen Stile vollständig loswerden können.
