Zähme widerspenstige Stilblätter mit diesen drei CSS -Methoden

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!