Einführung von CCSS (Komponenten CSS)

Key Takeaways

• CCSS (Komponenten CSS) ist eine CSS -Architektur, mit der das Authoring -Erlebnis für große Webanwendungen vereinfacht wird, wodurch sie aufrechterhalten, überschaubar und skalierbar ist. Es fördert die Komponentenbasis-Webentwicklung, bei der Markup und Stile in wiederverwendbare HTML-Elemente gebündelt sind.
• Die Hauptprinzipien von CCSS sind die Erstellung kleiner, unabhängiger, wiederverwendbarer Komponenten; Sicherstellen, dass die Komponenten modular und isoliert sind; CSS schreiben, das komponierbar und vorhersehbar ist; und alle CSS -Komponenten klar dokumentieren.
• CCSS verwendet eine spezifische Verzeichnisstruktur und -namenkonventionen, die größtenteils auf den SMACS- und BEM -Methoden basiert. Es fördert auch die Verwendung von Aufgabenläufern wie Grunt zur Automatisierung gängiger Aufgaben wie CSS -Kompilierung oder HTML -Validierung.
• CCSS verbessert die Skalierbarkeit, Wartbarkeit und Leistung von Webanwendungen, indem die Stile modular gestaltet werden, das Risiko von Stilen, die sich über die Anwendung befassen, verringert und dem Browser nur die Stile für die zugewandten Komponenten analysieren kann. Es ist mit jedem JavaScript-Framework kompatibel und kann mit CSS-Präzessoren wie Sass, Less oder Stylus verwendet werden.

CCSS oder Komponenten CSS ist eine Architektur, die das CSS -Autoring -Erlebnis für große Webanwendungen vereinfacht.

Große Webanwendungen haben im Allgemeinen viele CSS -Dateien, und häufig arbeiten viele Entwickler gleichzeitig an diesen Dateien. Mit dem Aufkommen von so vielen Frameworks, Richtlinien, Tools und Methoden (OOCSS, SMACSS, BEM usw.) benötigen Entwickler eine CSS -Architektur, die wartbar, überschaubar und skalierbar ist.

Als Frontend-Ingenieur glaube ich, dass die Komponenten-basierte Webentwicklung der Weg nach vorne ist. Webkomponenten sind eine Sammlung von Standards, die sich durch das W3C bearbeiten. Sie ermöglichen es uns, Markup und Stile in wiederverwendbare HTML -Elemente zu bündeln, die wirklich eingekapselt sind . Dies bedeutet, dass wir über die Komponentenbasis-CSS-Entwicklung nachdenken müssen. Während die Browserhersteller diese Standards implementieren, können wir in der Zwischenzeit Soft-Decapsulation verwenden.

Schauen wir uns genau an, was CCSS ist und wie Sie sie in der CSS -Architektur für eine komplexe Webanwendung einrichten.

.

Elemente von CCSS

Nachstehend finden Sie die wichtigsten Elemente, die entweder vollständig oder auf geänderte Weise verwendet werden, um die beste Konfiguration für die CCSS -Architektur zu erreichen.

SMACSS

SMACSS, erstellt von Jonathan Snook, steht für skalierbare und modulare Architektur für CSS. Es ist eher ein Stilführer als ein starres Framework. Lesen Sie mehr über SMACSS, um den Hintergrund in der Struktur zu erhalten, da CCSS sie verwendet.

Bem

Bem, erstellt von Entwicklern bei Yandex, steht für "Block", "Element", "Modifier". Es ist eine Front-End-Methodik, die bei der Entwicklung von Web-Schnittstellen eine neue Denkweise ist. Die Jungs von Yandex haben BEM ausgedacht und weitere Informationen finden Sie in Harry Roberts hervorragender Artikel.

sass

Sass ist CSS mit Supermächten. Ich kann es nur empfehlen, aber Sie können auch weniger verwenden, wenn Sie es vorziehen. Weitere Informationen finden Sie in der SASS -Dokumentation.

compass

Compass hat keine Klassendefinitionen; Es ist eine Erweiterung für SASS, die viele Dienstprogramme bietet. Es wird für allgemeine nützliche Mixins und die SASS -Zusammenstellung verwendet. Compass -Mixins sollten in Fällen, in denen Anbieterpräfixe erforderlich sind, fast immer verwendet werden. Dies ist wieder ein schöner und Bourbon, auf dem ersten Look ist eine gute Alternative.

Prinzipien von CCSS

Schauen wir uns nun die Hauptprinzipien von CCSS an.

Komponentenbasierte

Schreiben Sie kleine und unabhängige Komponenten, die wiederverwendbar sind. Eine wiederverwendbare CSS -Komponente ist eine, die nicht nur in einem bestimmten Teil des DOM -Baumes vorhanden ist oder bestimmte Elementtypen verwendet wird. Bei Bedarf sollten zusätzliche HTML -Elemente verwendet werden, um eine Komponente wiederverwendbar zu machen.

modular und isoliert

Komponenten sollten alles für einen bestimmten Teil der Benutzeroberfläche und einen einzigen Fokus haben. Jede Komponente sollte isoliert werden, dh sie ändert oder hängt nicht direkt von einer anderen Komponente ab.

Isolierung ist wichtiger als die Wiederverwendung von Code über Komponenten, da Wiederverwendung die Abhängigkeiten und eine enge Kopplung erhöhen kann, was das CSS letztendlich weniger überschaubar macht.

komponierbar

Wenn Sie CSS auf eine Weise erfassen, die darauf abzielt, die Zeit zu verkürzen, die Sie aufgewendet haben, sollte man sich so vorstellen, dass mehr Zeit für die Änderung von HTML -Klassen für Elemente zum Ändern oder Hinzufügen von Stilen verändert werden. Für alle Entwickler ist es viel einfacher, CSS des Autors zu machen, wenn es so ist, als würde man Lego -Blöcke zusammenstellen, als den CSS -Krieg zu führen. CSS -Klassen sind die Bausteine, mit denen Stile komponiert werden sollten.

vorhersehbar

Vorhersagbarkeit bedeutet, dass sich Ihre Regeln wie erwartet verhalten. Dies ist wichtig für große Anwendungen mit vielen Seiten. Vermeiden Sie es, übermäßig komplizierte Selektoren und generische Klassennamen zu verwenden, da diese zu unvorhersehbaren CSS führen können.

Dokumentation

Die meisten Menschen gehen davon aus, dass CSS selbsterklärend ist. In der Tat ist dies normalerweise nicht der Fall! CSS -Komponenten müssen klare Dokumentation haben, die beschreiben, was sie tun und wie sie verwendet werden sollen.

Verzeichnisstruktur

unten finden Sie eine Beispielverzeichnisstruktur für die einfachere Visualisierung. Ich habe auch ein Beispiel -Setup in das CCSS Github Repo aufgenommen.

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

Nur die Dateien im SCSS/ Ordner im oben gezeigten Ordnerbaum bearbeiten/ autorieren. Dies ermöglicht die Aktualisierung externer Bibliotheken leicht im ext/ Ordner. Viele Anwendungen beginnen mit einem externen CSS -Framework wie Bootstrap oder Foundation. Daher habe ich sie im Beispiel -Setup in ext/hinzugefügt. Aber es ist absolut in Ordnung, dass alle CSS von Grund auf neu geschrieben werden. Alles andere oben erwähnt gilt noch.

Das Beispielkomponenten/ das Verzeichnis ist für eine AngularJS-Anwendung gut geeignet, kann jedoch für andere Frameworks oder Anwendungen angepasst werden. Weitere Informationen finden Sie im Abschnitt „Architektur“ unten.

Fügen Sie auf der HTML -Seite alle .css -Dateien aus dem Stil/ Ordner hinzu, der alle kompilierten CSS (aus Grunz, Kompass usw.) enthält. Ändern Sie sie niemals.

Namenskonventionen - vereinfachtes Bem

• U-Klassenname-Globale Basis-/Dienstprogrammklassen
• Img-KlasseName-Globale Bildklassen
• Animate-ClassName-Globale Animationsklassen
• componentName - Standardkomponenten (b)
• componentName-ElementName-Komponentenelement (e)
• componentName-modifierName-Komponentenmodifikator (m)

Beachten Sie den Namen des UpperCamelCase -Komponenten -Namens, um anzuzeigen, dass es sich um das Master -Element handelt. Dies bedeutet, dass es die -Regrenze der Komponente ist. Element- und Modifikatornamen sind Elementname bzw. Modifiername. Verwenden Sie keinen Bindestrich (-), um Komponentennamen zu trennen, da diese den Beginn eines Element-/Elementnamens bedeuten.

Architektur und Design

Betrachten wir die von CCSS geförderte Architektur.

grunzen

grunT ist ein großartiger Aufgabenläufer, der viele gängige Aufgaben automatisieren kann (z. B. das Kompilieren von CSS oder die Validierung von HTML). Es gibt auch andere Aufgabenläufer; Ein idealer Workflow besteht darin, eine zu verwenden, um Dateien in der Entwicklung zu beobachten und die CSS erneut zu kompilieren, wenn Änderungen vorgenommen werden.

Dateiorganisation

Schauen Sie sich die Verzeichnisstruktur erneut an, die von SMACSS abgeleitet ist. Beachten Sie das EXT/ Verzeichnis, das alle externen Frameworks (wie Bootstrap) enthält. Um weiter zu verbessern, sollten diese nicht geändert werden. Stattdessen sollten Überschreibungen und Erweiterungen in die Basis/ das Verzeichnis platziert werden.

Basis/ Dort führen Sie globale Basisstile, die anwendungsweit verwendet werden.

_base.scss sind nur für Elementauswahlstile. Dies sind eine Art „CSS -Resets“.

_base-classes.scss sind alle Utility-Klassen, die anwendungsweit auf vielen Seiten, Ansichten und Komponenten verwendet werden. Präfixklassennamen mit u-

Bilder.Scss wird als SCSS -Kompilierungsquelle verwendet. Es sollte alle Site -Bilder als Data -URIs definieren und einlegen. /app/styles/images.css wird aus dieser Datei generiert.

_animate.scss hält alle anwendungsweiten Animationsklassen.

_bootstrap-overrides.scss hält nur die Überschreibungen des Frameworks. Manchmal ist die Spezifität der Framework -Selektoren so hoch, dass die Überschreibung langer spezifischer Selektoren erforderlich ist. Das Überschreiben auf globaler Ebene sollte im Kontext einer SCSS -Komponente nicht erfolgen. Stattdessen gehen alle globalen Überschreibungen hierher.

Komponenten

Jede oben nicht erwähnte Einheit wiederverwendbarer CSS wird als „Komponente“ angesehen. Wir verwenden AngularJs, daher habe ich sie an 3 Arten von CSS -Komponenten kategorisiert: Ansicht/Seite, Richtlinie und Standard; daher die von SMACSS abgeleitete Verzeichnisstruktur.

Im Beispiel -Setup im GitHub -Repository habe ich explizite Ordner erstellt, um klar zu sein. Wenn Ihre Bewerbung klein ist, können Sie sie in einen Ordner einfügen. Alle Komponenten folgen der modifizierten BEM -Namenskonvention in Kombination mit dem Kamelcase. Dies hat mich tolle Gewinne dazu gebracht, andere Teammitglieder zu ermutigen, die Syntax der Bem-Art zu folgen. Es hat auch viel Verwirrung vermieden, wenn es sich von der Verwendung des typischen BEM-Stils mit den-,-und __-Zeichen, die Klassennamen wie Modulname__Child-Name-modifier-name!

Es ist auch wichtig, dass die CSS -Klassendefinitionsreihenfolge in einer Komponente die HTML -Ansicht widerspiegelt. Dies erleichtert das Scannen, Stil, Bearbeiten und Anwenden von Klassen. Schließlich ist es eine gute Idee, eine umfangreiche Stilleiterin für die Webanwendung zu haben und Richtlinien für CSS und SASS zu befolgen (z. B. vermeiden @extend).

CCSS -Beispiel

finden Sie im Code, um ein Beispiel eingerichtet zu werden.

Hier ist eine Beispielkomponente in SASS:

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

Dies kompiliert das folgende CSS:

<span>.ProductRating {
</span>  <span>// nested element
</span><span>  <span>@include e(title) {</span>
</span>    <span>...
</span>  <span>}
</span>  <span>// nested element
</span><span>  <span>@include e(star) {</span>
</span>    <span>...
</span>    <span>// nested element's modifier
</span><span>    <span>@include m(active) {</span>
</span>      <span>...
</span>    <span>}
</span>  <span>}
</span><span>}</span>

und Ihr HTML könnte ungefähr so ​​aussehen:

<span><span>.ProductRating</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span>  ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span>  ...
<span>}</span>

Sie können sich auf das vereinfachte BEM-Mixin beziehen, der Referenzauswahl verwendet, um dies zu erreichen, und ist einfacher als @at-Root. Die Arbeit mit BEM wurde in SASS 3.3 viel einfacher, was uns die Möglichkeit gibt, Wartungscode zu schreiben, der leicht zu verstehen ist.

beitragen

Beiträge im Github -Repo in Form von Problemen/PRs zum Hinzufügen weiterer Beispiele, Verbesserungen bei der Verarbeitung, Erleichterungen usw. sind am hilfreichsten.

und überprüfen Sie das Repo nach Credits und nützlichen Ressourcen im Zusammenhang mit CCS. Wenn Sie Fragen oder Kommentare haben, veröffentlichen Sie sie in den Kommentaren unten oder im GitHub Repo.

häufig gestellte Fragen zum CSS (CCSS) von Komponenten

Was ist der Hauptunterschied zwischen CCSS und herkömmlichem CSS? Es wurde entwickelt, um die Trennung von Inhalten von der Präsentation einschließlich Layout, Farben und Schriftarten zu ermöglichen. Auf der anderen Seite ist CCSS (Komponenten CSS) ein moderner Styling -Ansatz, bei dem Stile direkt mit ihren spezifischen Komponenten verbunden sind. Dies bedeutet, dass die Stile lokal in die Komponente geschaltet werden, wodurch das Risiko von Stilen verringert wird, die sich über Ihre Anwendung befassen. Dieser Ansatz macht Ihre Stile, modularer und leichter zu skalieren, Ihre Stile.

Wie verbessert CCSS die Skalierbarkeit eines Projekts? In traditionellen CSS wächst die CSS -Datei, wenn das Projekt wächst, auch die Verwaltung der CSS -Datei. In CCSS hat jede Komponente jedoch ihren eigenen Stil, sodass es einfacher zu verwalten und zu skalieren wird. Sie können eine Komponente problemlos aktualisieren oder ändern, ohne den Rest der Anwendung zu beeinflussen.

Kann ich CCSS mit einem JavaScript -Framework verwenden? Unabhängig davon, ob Sie React, Angular, Vue oder ein anderes Gerüst verwenden, können Sie CCSs verwenden, um Ihre Komponenten zu stylen. Dies macht CCSS zu einem vielseitigen Tool für jeden Front-End-Entwickler. Sie können globale Stile in einer separaten Datei definieren und nach Bedarf in Ihre Komponenten importieren. Auf diese Weise können Sie ein konsistentes Erscheinungsbild in Ihrer Anwendung beibehalten und gleichzeitig von der Modularität von CCSS profitieren. zu verwenden, haben mehrere Einschränkungen. Sie können Medienabfragen, Pseudoklassen oder Pseudoelemente nicht verwenden. Sie haben auch die höchste Spezifität, was zu Schwierigkeiten bei übergeordneten Stilen führen kann. CCSS hingegen bietet die volle Leistung von CSS, einschließlich der Möglichkeit, Medienabfragen, Pseudoklassen und Pseudoelemente zu verwenden. Es hat auch eine geringere Spezifität als Inline -Stile, sodass es einfacher ist, Stile zu überschreiben. kann die Leistung einer Webanwendung erheblich verbessern. In herkömmlichen CSS muss der Browser die gesamte CSS -Datei analysieren, um eine Seite zu rendern, die den Rendering -Prozess verlangsamen kann. Mit CCSS muss der Browser jedoch nur die Stile für die derzeit gerenderten Komponenten analysieren, was zu schnelleren Seitenladezeiten führt.

Kann ich CSS-Vorprozessoren mit CCSs verwenden? Auf diese Weise können Sie die Leistung dieser Vorprozessoren wie Variablen, Mixins und verschachtelte Regeln nutzen und gleichzeitig von der Modularität und Skalierbarkeit von CCSS profitieren.

Einer der Hauptvorteile von CCS ist, dass die mit der CSS -Spezifität verbundenen Probleme beseitigt. Da jede Komponente über ihre eigenen Stile verfügt, müssen Sie sich keine Sorgen machen, dass Stile, die sich gegenseitig zusammenbrechen oder sich gegenseitig überschreiben. Dies erleichtert es, Ihre Stile zu verwalten und das Risiko von Fehler im Zusammenhang mit der CSS -Spezifität zu verringern. Genau wie bei herkömmlichen CSS unterstützt CCSS Medienabfragen, mit denen Sie je nach Bildschirmgröße des Geräts verschiedene Stile anwenden können. Dies erleichtert einfach, ein reaktionsschnelles Design zu erstellen, das auf allen Geräten hervorragend aussieht.

Wie verbessert CCSS die Wartbarkeit eines Projekts? und einfacher zu verwalten. Jede Komponente verfügt über eigene Stile. Wenn Sie also eine Komponente aktualisieren oder ändern müssen, müssen Sie nur die Stile für diese bestimmte Komponente ändern. Dies verringert das Risiko, Fehler einzuführen, und erleichtert die Aktualisierung oder Wiedergutmachung Ihres Codes.

Das obige ist der detaillierte Inhalt vonEinführung von CCSS (Komponenten CSS). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!