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!