CSS -Architektur und die drei Säulen von Wartbar -CSS

Schlüsselpunkte

• CSS-Architektur für die Wartbare ist wichtig, um schwer zu machende Stilblätter zu vermeiden.
• Drei grundlegende Konzepte oder Säulen bilden den Eckpfeiler des CSS -Architektur -Designs: Bausteine ​​(wie SASS, effiziente CSS -Selektoren, BEM -Syntax usw.), orchestrieren diese Bausteine ​​in zuverlässige und wartbare hierarchische CSS und die Anwendung von Softwaretechnik Prinzipien.
• Software -Engineering -Prinzipien wie die Trennung von Bedenken und soliden Prinzipien können auf CSS angewendet werden, um sicherzustellen, dass die Code die Realität auf wartbare Weise modelliert. Dies beinhaltet die Anwendung von Prinzipien wie Trocken (wiederholen Sie sich nicht) und nass (wir möchten gerne tippen), um die Wartbarkeit des Codes zu verbessern.
• Der Versuch, CSS wie die Verwendung von Mixin und Vererbung zu kombinieren, kann eine stärkere Struktur liefern und die Notwendigkeit verringern, Klassen für jede Kombination zu definieren, wodurch eine einfachere Wartungs -CSS ermöglicht wird.

Elemente der CSS -Architektur

Wenn Sie jemals ein schlechtes CSS geerbt haben und verpflichtet sind, es aufrechtzuerhalten, haben Sie möglicherweise ein gewisses Sympathie für andere, die Ihren Code in Zukunft beibehalten. In extremen Fällen haben Entwickler keine andere Wahl, als die CSS der Anwendung vollständig neu zu schreiben. Diese Extreme treten auf, wenn jedes Patch mehrere unerwartete Nebenwirkungen einführt. Sobald dies erreicht ist, sind Ihre Stylesheets schwer zu pflegen.

Sie können jetzt vermeiden, Ihr zukünftiges Selbst Schwierigkeiten zu verursachen, indem Sie architektonisch zuverlässige Entscheidungen treffen. Aus diesem Grund ist es sehr wichtig zu lernen, wie man in der Praxis eine wartbare CSS -Architektur aufbaut.

Wenn Sie nicht derjenige sein möchten, der einen schlechten Code übergibt, möchten Sie vielleicht wissen, wie Sie ein wartbares CSS von Grund auf neu erstellen. Wo wirst du anfangen? Schauen wir uns die Elemente der CSS -Architektur an, die es wert sind, ein perfektes Projekt zu erstellen.

Drei Säulen, die CSS

beibehalten können

Beobachten Sie den Kurs "Ein CSS -Held des Büros: CSS -Architektur", um zu lernen, strukturierte, wartbare und skalierbare CSS zu erstellen! Videospiel -Symbol diesen Kurs anzeigen Sie diesen Kurs

anzeigen

Bei der Gestaltung der CSS -Architektur eines Softwaresystems sind drei Konzepte in Betracht gezogen. Diese Konzepte sind sehr einfach und wir können sie als Säulen betrachten, die die Struktur eines Gebäudes unterstützen. Wir brauchen diese drei Säulen, um unser CSS im Test der Zeit zu halten und nicht in das schwer zu machende Chaos zusammenzubrechen.

Die erste Säule definiert die Bausteine ​​der CSS -Architektur. Diese Bausteine ​​enthalten eine Vielzahl von Lösungen und Tools, z. B. die Verwendung von SASS, das Schreiben effizienter CSS-Selektoren, die BEM-Syntax (Block-Element-Modifier), die Verwendung von Klassen anstelle von ID-Attributen und gegebenenfalls Verwenden von Verwandten.

Während diese Ansicht die Qualität Ihres CSS -Code erheblich verbessern kann, benötigen wir ein höheres Unternehmensgrad, um unsere Arbeit systematisch systematisch zu systematisieren. Daher benötigen wir eine zweite Säule, die sich auf die Orchestrierung von Bausteinen konzentriert, um zuverlässige, wartbare hierarchische CSS aufzubauen. Stellen Sie sich diese Schicht als das Skelett der CSS -Architektur vor. Wenn Sie an zwei fertigen CSS-Architekturen interessiert sind, können Sie ITCSS und SMACSs weiter studieren.

Leider können Sie mit der organisierten Verwendung von Bausteinen und Frameworks oder CSS-Architekturen steinlösliche, leicht zu macht angelegte CSS schreiben. Durch die Anwendung von Software -Engineering -Prinzipien wird unser Code zuverlässig. Dies ist die dritte Säule beim Schreiben von Wartungskörper -CSS.

Anwenden von Software -Engineering -Prinzipien auf CSS

Es gibt viele verschiedene Prinzipien für die Gestaltung von langlebiger Software.

Diese Prinzipien bieten einen Zweck für die Verwendung Ihrer CSS -Tools und -Lösungen, indem Sie sicherstellen, dass Ihr CSS -Code die Realität auf wartbare Weise realisiert. Ohne diese Prinzipien ist die Verwendung einer CSS -Architektur meist nur ein Ritual. Wenn Sie die Software -Engineering -Prinzipien nicht befolgen, um CSS zu schreiben, stürzt sie häufig überfordert und kollabiert, sobald die Codegröße beibehalten wird.

Wenn Sie ein Software -Ingenieur mit viel Erfahrung in bestimmten Programmiersprachen sind, ist es möglicherweise sehr überraschend, diese Prinzipien auf deklarative Sprachen wie CSS anzuwenden. In der Praxis ist CSS jedoch zu einer ausgereiften Sprache geworden, ähnlich wie bei anderen Sprachen, die Struktur über den erforderlichen Code nachdenklich. Lassen Sie uns die praktische Anwendung einiger der Hauptprinzipien untersuchen.

Trennung von Bedenken

Besorgnistrennung ist ein Software -Design -Prinzip, das für die Definition klarer Trennverantwortung in Softwarelösungen verantwortlich ist. Die offensichtlichste Anwendung auf CSS ist die Trennung zwischen Klassen für Stile und Klassen für die Funktionalität. Stilklassen sollten nicht im JavaScript-Code angezeigt werden, und funktionellbezogene Klassen sollten nicht in Stylesheets erscheinen.

Solides Prinzip

Robert C. Martin definiert fünf solide Prinzipien. Einige dieser Prinzipien gelten auch für CSS und andere Programmiersprachen.

In meinem CSS -Architekturkurses finden Sie viele verschiedene Anwendungen, in denen die Verwendung dieser soliden Prinzipien im Kontext des CSS -Code, einschließlich des Prinzips der einzelnen Verantwortung und des Eröffnungs- und Schließungsprinzips, angeben.

In der Stilblatthierarchie wenden wir das Prinzip der einzelnen Verantwortung an. Beispielsweise enthält eine Ebene in der ITCSS -Architektur Reset- oder Normalisierungsverfahren. Tagestile basieren auf dem Normalisierungsprogramm und Komponentenstile sind auf den Tag -Stilen aufgebaut. Jedes Level hat eine einzelne, genau definierte Verantwortung.

Das berühmteste Beispiel für die Anwendung von Software -Engineering -Prinzipien auf den CSS -Code ist der Vergleich zwischen trockenen und nassen CSS. Dry steht für "Nicht wiederholt dich", während Wet für "Wir lieben es, zu tippen".

Code trockener auf wartungstrockenbar machen, denn wenn Sie den Trockencode ändern, müssen Sie die Änderung nur an einem Ort vornehmen und Sie können sehr sicher sein, dass Sie den Rest der CSS -Codebasis nicht nach anderen Erscheinungen durchsuchen müssen der gleichen Codebedingung.

Wenn Ihr CSS nass ist, können Sie es trocknen, indem Sie den gemeinsamen Teil des Codes identifizieren und diese gemeinsame Funktion in die Basisklasse abstrahieren (oder mischen, wenn Sie einen Präprozessor verwenden).

Die Verwendung von Basisklassen und Unterklassen im Code wird als Vererbung bezeichnet, die mit @extend in sass ausgeführt wird. Wenn wir die Mixin- oder @Mixin -Direktive mithilfe der SASS -Terminologie verwenden, verwenden wir Kombinationen. Vererbung, Zusammensetzung und Verwendung von SASS -Konstanten sind leistungsstarke Werkzeuge zur Durchführung von Abstraktionen.

Versuchen Sie, CSS zu kombinieren

Schauen wir uns ein praktisches Beispiel an. Angenommen, es gibt vier Arten von Rechtecken in unserer Codebasis. Ein universelles Rechteck, ein abgerundetes Rechteck, ein grünes Rechteck und ein abgerundetes grünes Rechteck.

Wir können die BEM -Namenskonvention verwenden, um jede rechteckige Komponente wie folgt zu markieren:

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

Definieren wir diese vier Klassen in SASS unter Verwendung der Vererbung. Wir beginnen mit der Basisklasse von .Rectangle und erstellen Modifikatorklassen, mit denen Sass @extend den Stil der Basisklasse erben:

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

Die Struktur ist klar und wir haben uns in der modifizierten Klasse nicht wiederholt. Das Erstellen einer Hierarchie von fünf Modifikatoren führt jedoch zu 31 Klassendefinitionen, von denen die meisten nichts weiter als eine Sammlung von @extend -Richtlinien sind.

Die Kombination bietet uns eine stärkere Struktur. Um eine völlig flexible Struktur zu erzeugen, benötigen wir nur eine gemeinsame rechteckige Klasse und zwei Mixins:

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

Angenommen, wir haben eine spezielle Funktionsbox.

<code><div class="feature-box"></div></code>

Wenn die Feature -Box abgerundet, aber nicht grün ist, müssen wir nur die Rechteckklasse erweitern und ein Mixin einschließen, das das Rechteck abgerundet wird:

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

Strukturen sind flexibel, ohne Klassen für jede Kombination zu definieren.

Auf dem Weg zu einer besseren CSS -Architektur

Wir können zu dem Schluss kommen, dass die Software -Engineering -Prinzipien für CSS und andere Programmiersprache gelten. Diese Prinzipien fallen zwischen zwei Ebenen: die Mikrospiegel der CSS -Bausteine ​​und die Makrospiegel dieser Bausteine. Daher ist es vorteilhaft zu lernen, wie diese Prinzipien in der Praxis angewendet werden können, wenn er wartbare CSS erstellt.

Um die praktische Anwendung dieser Prinzipien zu erklären und zu demonstrieren, habe ich einen Kurs über die Rock-Solid-CSS-Architektur geschaffen.

In diesem Kurs werden wir die drei Säulen der CSS -Architektur untersuchen und die Prinzipien der Software -Engineering hervorheben. Sie werden diese Prinzipien nicht nur theoretisch lernen, sondern auch die Möglichkeit haben, sie in vielen praktischen Beispielen zu verwenden.

Zum Beispiel werden wir eine große Anzahl von Blog -Posts sammeln und herausfinden, warum der bereitgestellte CSS -Code schwer zu warten ist. Wir werden den Prozess des Refactoring CSS nach und nach abschließen, die in diesem Artikel kurz eingeführten Prinzipien und im Kursvideo eingehender anwenden.

Ich habe einen Abschnitt speziell entwickelt, um die drei Säulen der CSS -Architektur in die Praxis umzusetzen, indem ich eine kleine Komponentenbibliothek mit ITCSS -Architektur und SASS erstellt. Wenn Sie mehr über die CSS -Architektur erfahren möchten, melden Sie sich bitte für den Kurs an und treffen Sie uns im Kurs!

Häufig gestellte Fragen zur CSS -Architektur und zum Wartenwert CSS

Welche Bedeutung hat die CSS -Architektur für die Webentwicklung?

CSS -Architektur spielt eine entscheidende Rolle bei der Webentwicklung. Es bietet eine strukturierte Möglichkeit, CSS -Code zu schreiben, wodurch der Code leichter zu verstehen, verwaltet und erweitert wird. Mit einer genau definierten CSS-Architektur können Entwickler Probleme wie spezifische Konflikte, Benennung von Konflikten und Code-Duplikation vermeiden. Es erleichtert auch die Wiederverwendung von Code und verkürzt die Zeit und den Aufwand, der für das Erstellen einer Webseite erforderlich ist.

Wie fördert die OOCSS -Methode die Wartungsfähigkeit von CSS?

Objektorientierte CSS (OOCSS) ist eine Möglichkeit, die Wiederverwendung von Code und schnellere und effizientere Stylesheets zu fördern. Es ermutigt Entwickler, CSS als Objektsystem zu betrachten, jeweils eigene Eigenschaften und Verhaltensweisen. OOCSS erleichtert das Erstellen von skalierbarem und wartbarem CSS, indem die Struktur von Aussehen und Behälter vom Inhalt getrennt wird.

Welche Rolle spielt die BEM -Methode in der CSS -Architektur?

Blöcke, Elemente, Modifikatoren (BEM) nennen Konventionen, die für Klassen in HTML und CSS verwendet werden. Es bietet eine klare, strenge Struktur, die den Code leichter zu lesen und zu verstehen macht. BEM -Ansätze tragen dazu bei, robuste und skalierbare CSS -Architekturen zu schaffen, indem die Möglichkeiten für Benennung und spezifische Konflikte verringert werden.

Wie hilft die SMACSS -Methode bei der Erstellung von Wartungskolben CSS?

skalierbare und modulare Architektur (SMACSS) für CSS ist ein Stilführer, der Modularität und Skalierbarkeit fördert. Es unterteilt CSS -Regeln in fünf Typen: Fundament, Layout, Modul, Zustand und Thema, jeweils mit ihrem spezifischen Zweck. Diese Klassifizierung hilft dabei, den CSS -Code zu organisieren und erleichtert die Wartung und Skalierung.

Welche Bedeutung hat die ITCSS -Methode in der CSS -Architektur?

Inverted Triangle CSS (ITCSS) ist eine Möglichkeit, CSS mit großem Maßstab zu verwalten. Es organisiert CSS in mehreren Schichten, wobei jede Schicht ihre spezifische Rolle hat. Diese hierarchische Struktur stellt sicher, dass der allgemeinste Stil zuerst geladen wird und dann spezifischere Stile geladen werden, wodurch die Wahrscheinlichkeit spezifischer Probleme verringert wird.

Wie fördert die CSS -Variable die kartierbare CSS?

CSS -Variablen (auch als CSS -benutzerdefinierte Eigenschaften bezeichnet) ermöglichen es Entwicklern, wiederverwendbare Werte zu definieren. Sie können die Wartbarkeit erheblich verbessern, indem sie die Code -Duplikation reduzieren und globale Änderungen erleichtern. Wenn Sie beispielsweise eine Farbe als Variable definieren, können Sie sie im gesamten Stylesheet wiederverwenden und an einem Ort ändern.

Welche Rolle spielt CSS -Präprozessoren in Wardierbaren CSS?

CSS -Präprozessoren wie SASS und weniger bieten Funktionen wie Variablen, Verschachtelung, Mixins und Funktionen, die in regulären CSS nicht verfügbar sind. Diese Funktionen können die Wartbarkeit und Lesbarkeit Ihres Codes erheblich verbessern und das Schreiben komplexer CSS erleichtern.

Wie fördert die komponentenbasierte Architektur die kartierbare CSS?

Komponentenbasierte Architektur erleichtert die Erstellung wiederverwendbarer, unabhängiger Komponenten mit jeweils eigenem HTML, CSS und JavaScript. Dieser Ansatz macht den Code modularer und leichter aufrechterhalten, da Änderungen an einer Komponente andere nicht beeinflussen.

Was ist die Bedeutung von Stilführern in der CSS -Architektur?

Style Guide bietet eine Reihe von CSS -Schreibstandards. Es gewährleistet die Konsistenz in der Codebasis und erleichtert den Code leichter zu lesen und zu warten. Style Guides können Konventionen, Formatierungsregeln und Best Practices umfassen.

Wie fördert das CSS -Lint -Tool das Wartungsmittel -CSS?

CSS -Lint -Tools wie Stylelint können dazu beitragen, Codierungsstandards auszuführen und potenzielle Probleme zu erfassen, bevor sie zu Problemen werden. Sie können bestimmte Probleme automatisch beheben und Ratschläge zu anderen geben, wodurch die Qualität und Wartbarkeit der Code verbessert wird.

Das obige ist der detaillierte Inhalt vonCSS -Architektur und die drei Säulen von Wartbar -CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!