Dieser Artikel ist Teil einer Reihe von Artikeln in Zusammenarbeit mit SiteGround. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint erm?glicht haben.

In diesem Artikel werden drei erfolgreiche Methoden der CSS -Architektur untersucht, einschlie?lich ihrer Prinzipien, Ziele und Vorteile.

Schlüsselpunkte

• BEM, SMACSS und ECSS sind drei Methoden zum Verwalten von CSS -Architekturen, die jeweils eigene Prinzipien, Ziele und Vorteile haben.
• BEM (Blockelementmodifier) ??konzentriert sich auf die langfristige, einfache Aufrechterhaltung der Wiederverwendbarkeit von Projekten und Komponenten, wobei intelligente Benennungskonventionen zur Organisation von CSS-Code in wiederverwendbare Module organisiert werden.
• SMACSS (Extensible und Modular CSS Architecture) klassifiziert CSS -Regeln, um Muster zu identifizieren und Leitf?den zum Schreiben von Wartungs- und wiederverwendbarem CSS zu erstellen, mit flexiblen Namenskonventionen, die dazu beitragen, die Organisation und die Teameffizienz zu codieren.
• ECSS (Permanent CSS) betont die Isolation, verkaps alle Code, die für die Erstellung jeder Komponente in einem eigenen gemeinsamen Ordner ben?tigt werden, und die Verwendung strikter CSS -Benennungskonventionen. Langfristig unterstützt dieser Ansatz eine einfache Wartung und minimierte Erh?hung der Dateigr??e.

Warum ger?t CSS -Code au?er Kontrolle?

Es ist sehr schwierig, den CSS -Code dünn, wiederverwendbar und wartbar zu halten. Dies kann in kleinen, mittleren und gro?en Projekten geschehen, insbesondere in Projekten mit mehreren beteiligten Entwicklern, wenn Sie keine konsistenten Codierungs- und Organisationsregeln ausführen. Wenn die Codebasis gro? ist, im Laufe der Zeit viele ?nderungen unterzogen wird und die Organisation fehlt, bevorzugen Teams es h?ufig, am Ende des Stylesheet -Dokuments neue Stilregeln hinzuzufügen, anstatt einen Teil des Codes zu entfernen oder vorhandene Code zu ?ndern. Der Hauptgrund ist oft, dass die Auswirkung des Bearbeitens oder L?schens von CSS -Aussagen unvorhersehbar ist und irgendwo im Projekt Design -Pausen verursachen kann. Dies ist eine fehlgeschlagene Strategie, die zu Code -Duplikation, vorrangigen Problemen (übergeordnete Stilregeln werden zu einem Kampf) und allgemeine Inflation führen. Die Auswahl der Methode, die Ihren Anforderungen am besten entspricht, ist ein iterativer Prozess, der sich mit vorhandenen Methoden vertraut macht. Hier sind drei M?glichkeiten, um Ihnen zu helfen, mit den Herausforderungen von unordentlichen Stilbl?ttern umzugehen.

Bem

BEM steht für Blockelementmodifier. Es handelt sich um eine von Yandex für den Bau von CSS erstellte architektonische Methode. Ziel der BEM-Methode ist es, eine Website zu entwickeln, die schnell gestartet und langfristig unterstützt wird. Es hilft, erweiterbare und wiederverwendbare Schnittstellenkomponenten zu erstellen. BEM -Website

Das Schlüsselkonzept ist hier die langfristige einfache Wartung von Projekten und Komponenten-Wiederverwendungen. Die Kernstrategie von BEM besteht darin, den CSS -Code mit Hilfe intelligenter Namenskonventionen in wiederverwendbare Module zu organisieren. Schauen wir uns genauer an.

Was ist ein Block?

Identifizieren von Bl?cken ist ein wichtiger Schritt bei der Anwendung der BEM -Methode. Block ist A & GT; In HTML werden Bl?cke durch Klassenattribute dargestellt. BEM -Dokumentation.

Wenn Sie sich entscheiden, was als Block behandelt werden soll, fragen Sie sich, ob Sie diesen Teil des Codes leicht l?schen und an anderer Stelle verwenden k?nnen. Sie k?nnen beispielsweise eine Website -Header oder Fu?zeile als Block behandeln. Sie k?nnen beispielsweise Bl?cke nistieren, beispielsweise k?nnen Sie Menübl?cke in Header -Bl?cken platzieren.

<ul class="menu"></ul>

Da Sie im Prinzip in der Lage sein sollten, Bl?cke überall auf der Seite wiederzuverwenden, sollten die CSS des Blocks keine R?nder oder Positionierungsregeln festlegen. Stellen Sie bei der Auswahl eines Namens sicher, dass der Name beschreibt, wofür der Block ist, nicht wie er aussieht oder erkl?rt. Mit anderen Worten, sein Name sollte diese Frage beantworten: Was ist das? (z. B. Header, Menü usw.) anstelle von wie sieht es aus? (z. B. fester Header, kleines Menü usw.).

Was sind Elemente?

gem?? der BEM -Methode ist ein Element Teil von A & GT; Holen Sie sich Bem

Folgende Prinzipien, die für Elemente gelten:

• Elemente k?nnen nur in Bl?cken
existieren
• Elemente k?nnen nicht zu anderen Elementen geh?ren, sie k?nnen nur Teil des Blocks sein
• Sie k?nnen verschachtelte Elemente bauen
• Elementname beschreibt seinen Zweck, nicht das Aussehen.
Wenn Sie Elemente benennen, müssen Sie der folgenden Konvention folgen: Block__Element

Was ist ein Modifikator?

Modifikator ist eine Entit?t, die das Aussehen, den Zustand oder das Verhalten eines Blocks oder Elements definiert. BEM -Dokumentation

kann der Headerblock beispielsweise

oben auf der Seite fixiert werden. Der Akkordeonblock kann auf oder aus sein, der Tasteblock kann Deaktiviert usw.. Die Namenskonvention für BEM -Modifikatoren lautet wie folgt: Block Element Modifikator. Dies ist der Kern der BEM -Methode. Darüber hinaus bietet BEM auch Prinzipien der Dokumentstrukturorganisation, eine Reihe von Tools und eine aktive Community, um sie zu unterstützen. Vorteile der Verwendung von BEM

Folgendes sind einige der Vorteile der Verwendung von BEM in Ihrem Projekt:

Neue Entwickler k?nnen die Beziehung zwischen Komponenten in Tags und CSS -Regeln schnell verstehen

es f?rdert die Teamproduktivit?t. Dieser Vorteil ist besonders offensichtlich bei gro?fl?chigen Projekten
Namenskonventionen verringern das Risiko von Konflikten der Klassennamen und Style Leckage
CSS ist nicht eng mit Markern an bestimmten Stellen innerhalb der Seite
• verbunden
CSS ist sehr wiederverwendbar
SMACSS

skalierbare und modulare CSS -Architektur (SMACSS) ist eine Webentwicklungsmethode, mit der CSS -Code organisiert und geschrieben wird. Sein Sch?pfer Jonathan Snook beschreibt es wie folgt: & gt; SMACSS ist eine M?glichkeit, den Entwurfsprozess zu untersuchen und diese strengen Rahmenbedingungen an flexible Denkprozesse anzupassen. Bei der Verwendung von CSS wird versucht, einen konsistenten Ansatz zur Standortentwicklung zu dokumentieren. SMACSS -Website

Sein Kern besteht darin, CSS -Regeln zu klassifizieren. Die Klassifizierung bringt Muster mit, in denen Sie in Ihrem Design mehrmals wiederholt werden. Die Kernkategorien von SMACSS sind:

• Basic - Diese Kategorie enth?lt CSS -Regeln, die das Standardeintritt von Elementen steuern. Zu den Selektoren geh?ren einzelne Elemente-Selektoren, Attribut-Selektoren, Pseudoklasse-Selektoren, Geschwisterauswahl usw. Zum Beispiel HTML, K?rper, a, a: schweben usw.
• Layout - Diese Kategorie wird verwendet, um Seiten zu stylen, die eine Seite in Abschnitte unterteilen.
• Modul -Module sind wiederverwendbare Komponenten im Bausteinstil wie Menüs, Dialogfelder, Suchfelder usw. ausgelegt.
• Status - Diese Kategorie enth?lt eine Beschreibung des Erscheinens eines Layouts oder eines Moduls in einem bestimmten Zustand (z. B. sichtbar oder versteckt, erweitert oder geschlossen usw.) oder eine spezifische Ansicht (z. B. Zuhause oder interne Seite) Stil.
• Thema - Diese Kategorie ?hnelt dem Status, da sie CSS -Regeln enth?lt, die für das Layout und das Erscheinungsbild des Moduls verantwortlich sind. Nicht alle Projekte erfordern diese zus?tzliche Kategorie, aber es ist immer gut, ihre Existenz zu kennen.

SMACSS -Namenskonvention

im Zusammenhang mit den oben beschriebenen Kategorien schl?gt SMACSS eine Namenskonvention vor, um die Produktivit?t von Codeorganisationen und Entwicklungsteams zu unterstützen. Layout-, Status- und Modulregeln werden mit aussagekr?ftigen Namen oder Abkürzungen vorangestellt. Für Layoutregeln wie Layout-, Gitter- und sogar einfache L-L- sind akzeptable Pr?fixe. Für die staatlichen Regeln besteht die Konvention darin, wie das staatliche Pr?fix wie ein verstecktes, issible usw. zu verwenden. Verwenden Sie bei Modulen einfach den Namen der von Ihnen erstellten Komponente wie .menu, .dialog usw. Um den ?ffnenden Dialog zu stylen, k?nnen Sie Selektoren wie .Dialog.is-Open in CSS verwenden. Verwandte Elemente innerhalb eines Moduls und Varianten desselben Moduls sollten mit dem Grundnamen des Moduls vorangestellt werden. Versuchen Sie auch, ID, Element Selector oder verschachtelte Selektor nicht zu verwenden. Um beispielsweise ein Menüelement in einem Modul mit dem Namen zu w?hlen, schreiben Sie keinen Selektor wie folgt: .Menu li a, sondern verwenden Sie etwas wie .menu-link oder .menu-item. Im Gegensatz zu BEM sieht SMACSS keine zu strengen Namenskonventionen vor. Jonathan Snook machte deutlich: & gt; ... Sie haben nicht das Gefühl, diese Richtlinien streng zu befolgen. Machen Sie eine Vereinbarung, zeichnen Sie sie auf und halten Sie sich daran. SMACSS -Website

Vorteile der Verwendung von SMACSS

Einige Vorteile der SMACSS -Methode für die CSS -Codierung umfassen:

Es bietet wirksame Anleitungen für modulare, wartbare CSS und vermeidet es, zu streng
• zu sein
Sie k?nnen schnell lernen (und lehren) SMACSS
SMACSS -Namenskonventionen sind nicht so ausführlich wie BEM und sind in gewisser Weise leichter zu meistern
Es ist flexibel genug, um für gro?e und kleine Projekte gut eingesetzt zu werden

ecss

Permanent CSS oder ECSS ist ein Leitfaden für Schreibstylesheets für gro?e, sich schnell ver?ndernde, langj?hrige Webprojekte. ECSS -Website

Dieser CSS-Ansatz hat mein gro?es Interesse an der ursprünglichen Sicht des Autors Ben Frain, um mit gro?en CSS-Herausforderungen umzugehen, wirklich erweckt. Das Kernkonzept von ECSS ist die Isolation. Isolation bedeutet, dass jede Komponente eine unabh?ngige Codeeinheit ist, keine Abh?ngigkeiten, keine Kontextbelastung, wiederverwendbar und abnehmbar, ohne das Risiko eines Stillecks. Dies wird haupts?chlich durch:

erreicht

• verkapulieren alle Code (nicht nur CSS, sondern alle Techniken, die für die Erstellung jeder Komponente erforderlich sind) in einem eigenen Shared -Ordner.
• Jedes Mal, wenn Sie eine Komponente wie eine vorhandene Komponente ben?tigen, jedoch mit einigen Variationen, auch wenn die Variante klein ist, erstellen Sie eine v?llig neue Komponente.
• Verwenden Sie strenge CSS -Benennungskonventionen

Gem?? dem zweiten Punkt oben ist es offensichtlich, dass das Wiederholen von Attributen und Werten kein Problem für ECSS ist. In dieser Hinsicht stellt ECS einen grundlegenden Unterschied zu Methoden wie BEM und SMACS dar, die vorhandene Komponenten erweitern oder abstrakt, wodurch Code -Duplikation so weit wie m?glich vermieden oder vermieden wird. Bedeutet dies, dass ECSS gro?e Stylesheet -Dateien generiert? unsicher. Nach einigen Tests mit Dateikomprimierung kam Ben Frain zu dem Schluss, dass der Unterschied zwischen der Dateigr??e zwischen der Verwendung von ECSS und anderen Methoden, die eher abstrakt als duplikat, da "gzip sehr effizient ist, um doppelte Zeichenfolgen zu komprimieren", sehr gut.

Die Vorteile der Verwendung von ECSS

Folgendes sind die Vorteile, die durch Anwenden der ECSS -Methode und der Annahme seiner Ansicht der Wiederholung erhalten werden k?nnen:

• CSS -Codes sind leichter aufrechtzuerhalten, indem die Isolierung jedes visuellen Modus
aufrechterhalten wird
• W?hrend Sie doppelte Eigenschaften und Werte finden, ist die Erh?hung der Dateigr??e auf lange Sicht noch gering. Dies liegt daran
Alle Sprach-/technische Dateien, die zum Erstellen eines Moduls erforderlich sind, teilen denselben Ordner, wodurch es sehr einfach ist, Inhalte zu bearbeiten und physisch zu l?schen, die nicht mehr ben?tigt werden.

Sie k?nnen alle Details dieses innovativen Ansatzes in Frains Buch Persistence CSS lesen.

Schlussfolgerung

Wartungsf?higer und gut organisierter CSS-Code ist eine Herausforderung. In diesem Artikel stelle ich drei M?glichkeiten vor, um diese Aufgabe zu unterstützen. Dies ist keineswegs eine ersch?pfende Liste, und keine dieser Methoden l?st alle Probleme, die Sie m?glicherweise in Ihrem Projekt begegnen. Probieren Sie es einfach aus und sehen Sie, was für Sie funktioniert. Sie k?nnen auch versuchen, BEM und SMACSs in Kombination zu verwenden und sogar Ihren eigenen Ansatz zu entwickeln, basierend auf der Reihe von Fragen, die Sie selbst stellen. Was ist Ihre goldene Regel für das Schreiben von gut organisiertem, einfach zu verwaltetem CSS-Code? Denken Sie, dass die Verwendung des CSS -Architekturansatzes den Schmerz lindern kann? Klicken Sie auf das Kommentarfeld, um mich mitzuteilen.

H?ufig gestellte Fragen zu CSS -Architekturmethoden

Was sind die Hauptunterschiede zwischen OOCS, SMACSS und BEM -Methoden?

oocss, SMACSS und BEM sind alle CSS -Methoden, mit denen Entwickler sauber, wartbare und skalierbare CSS schreiben k?nnen. OOCSS oder objektorientierte CSS ermutigt Entwickler, wiederverwendbare, objektorientierte Code zu schreiben. Es konzentriert sich darauf, die Struktur vom Aussehen zu trennen und den Beh?lter vom Inhalt zu trennen. SMACSS oder erweiterbare und modulare CSS -Architekturen bieten Anleitung zur Klassifizierung von CSS -Regeln, um Ihren Code flexibler und überschaubarer zu gestalten. BEM- oder Blockelement -Modifikator ist eine Namenskonvention, die Ihr CSS leichter zu lesen und zu verstehen macht. Es unterteilt die Benutzeroberfl?che in getrennte Bl?cke, die wiederverwendet und kombiniert werden k?nnen.

Wie implementieren Sie WordPress -Codierungsstandard in CSS?

WordPress hat einen eigenen Satz von CSS -Codierungsstandards, um die Konsistenz und Lesbarkeit zwischen verschiedenen Projekten sicherzustellen. Diese Standards umfassen Regeln für die Benennung von Konventionen, Einkünften, Abstand und Kommentaren. Um diese Standards zu implementieren, k?nnen Sie CSS -Lint -Tools mit WordPress -Konfiguration wie Stylelint verwenden.

Welche Rolle spielt Style -Bl?tter in der Webentwicklung?

Beobachten Sie "Werden Sie ein CSS -Held im Büro und erstellen Sie strukturierte, wartbare und skalierbare CSS mit CSS -Architektur"! Sehen Sie sich diesen Kurs an. Es steuert die visuelle Darstellung von HTML -Elementen auf der Seite, einschlie?lich Layout, Farben, Schriftarten und Animationen. CSS (Cascade Style Sheet) ist die am h?ufigsten verwendete Style She -Sprache.

Wie verbessert die CSS -Methode meinen Webdesignprozess?

Die CSS -Methode kann Ihren Webdesignprozess erheblich verbessern, indem Ihr CSS organisierter, wiederverwendbarer und skalierbarer wird. Sie bieten eine strukturierte Methode zum Schreiben von CSS, um die Komplexit?t des Codes zu verringern, das Verst?ndnis und die Aufrechterhaltung der Leistung zu erleichtern.

Was sind die Best Practices für das Schreiben von CSS in HTML?

Best Practices für das Schreiben von CSS in HTML umfassen die Trennung von Stilen von Inhalten mit externen Stylesheets, die effiziente Verwendung von Selektoren, die Gruppierung der verwandten Stile, die Verwendung von Kurzeigenschaften und den Annotierendecode für Klarheit. Es ist auch wichtig, Ihr CSS zu überprüfen, um sicherzustellen, dass es fehlerfrei und mit verschiedenen Browsern kompatibel ist.

Wie kann ich meinen CSS -Code leichter pflegen?

Um Ihren CSS -Code zu erleichtern, k?nnen Sie CSS -Methoden wie OOCSS, SMACS oder BEM verwenden, die Anleitungen zum Aufbau und zur Organisation Ihres Codes bereitstellen. Andere Strategien umfassen das modularisierende CSS, die Verwendung von Pr?prozessoren wie SASS oder weniger und nach der Namenskonventionen.

Was sind die Vorteile der Verwendung von CSS -Pr?prozessoren?

CSS -Pr?prozessoren wie SASS und weniger k?nnen Sie Variablen, Verschachtelung, Mixins und Funktionen in CSS verwenden, wodurch Ihr Code leichter zu lesen und verwaltet wird. Sie erm?glichen es Ihnen auch, pr?gnante und leistungsf?higere CSS zu schreiben.

Wie kann ich sicherstellen, dass mein CSS mit verschiedenen Browsern kompatibel ist?

Um sicherzustellen, dass Ihr CSS mit verschiedenen Browsern kompatibel ist, k?nnen Sie ein Tool wie kann ich verwenden, das die Kompatibilit?t der CSS -Eigenschaften in verschiedenen Browsern zeigt. Für CSS -Attribute, die nicht vollst?ndig von allen Browsern unterstützt werden, ist es auch wichtig, die Pr?fixe von Anbietern zu verwenden.

Welche Bedeutung hat CSS im Webdesign?

CSS ist im Webdesign von entscheidender Bedeutung, da es die visuelle Darstellung von Inhalten auf einer Webseite steuert. Sie k?nnen visuell ansprechende Websites mit konsistentem Design und Layout erstellen. Au?erdem k?nnen Sie die Pr?sentation anhand verschiedener Ger?tearten wie Desktops, Tablets und Mobiltelefone anpassen.

Wie kann man mehr über CSS -Methoden erfahren?

Es gibt viele Ressourcen, um CSS -Methoden online zu lernen. SitePoint, Smashing Magazine und Mozilla Developer Network bieten detaillierte Artikel und Tutorials. Sie k?nnen auch Online -Kurse auf Plattformen wie Coursera und Udemy finden.

Das obige ist der detaillierte Inhalt vonZ?hme widerspenstige Stilbl?tter mit diesen drei CSS -Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!