Bei dieser Frage geht es darum, die eigentlichen CSS-Anweisungen selbst in einer CSS-Datei zu organisieren. Wenn ich eine neue Seite oder einen neuen Satz von Seiten entwickle, füge ich der CSS-Datei normalerweise nur Anweisungen von Hand hinzu und versuche, sie umzugestalten, wenn ich kann. Nach einiger Zeit habe ich Hunderte (oder Tausende) Zeilen und es kann schwierig werden, das zu finden, was ich beim Optimieren des Layouts benötige.

Hat jemand Ratschläge zur Organisation der Richtlinien?

• Sollte ich versuchen, Top-Down zu organisieren und das DOM nachzuahmen?
• Sollte ich funktional organisieren und Anweisungen für Elemente zusammenstellen, die dieselben Teile der Benutzeroberfläche unterstützen?
• Sollte ich einfach alles alphabetisch nach Selektor sortieren?
• Eine Kombination dieser Ansätze?

Gibt es auch eine Begrenzung, wie viel CSS ich in einer Datei behalten soll, bevor es eine gute Idee ist, sie in separate Dateien aufzuteilen? Sagen wir 1000 Zeilen? Oder ist es immer eine gute Idee, das Ganze an einem Ort aufzubewahren?

Verwandte Frage: Wie lassen sich CSS-Regeln am besten organisieren?

Schauen Sie sich zunächst diese drei Diashow-Präsentationen an:

• Schönes wartbares CSS
• Wartbares CSS
• Effizientes, wartbares, modulares CSS

Dokumentieren Sie zunächst und vor allem Ihr CSS. Unabhängig davon, mit welcher Methode Sie Ihr CSS organisieren, seien Sie konsistent und dokumentieren Sie es. Beschreiben Sie oben in jeder Datei, was sich in dieser Datei befindet, und stellen Sie möglicherweise ein Inhaltsverzeichnis bereit. Verweisen Sie möglicherweise auf die einfache Suche nach eindeutigen Tags, damit Sie in Ihrem Editor problemlos zu diesen Abschnitten springen können.

Wenn Sie Ihr CSS in mehrere Dateien aufteilen möchten, tun Sie dies auf jeden Fall. Oli hat bereits erwähnt, dass die zusätzlichen HTTP-Anfragen teuer sein können, aber Sie können das Beste aus beiden Welten haben. Verwenden Sie ein Build-Skript, um Ihr gut dokumentiertes, modulares CSS in einer komprimierten, einzelnen CSS-Datei zu veröffentlichen. Der YUI-Kompressor kann bei der Komprimierung helfen.

Im Gegensatz zu dem, was andere bisher gesagt haben, ziehe ich es vor, jede Eigenschaft in eine separate Zeile zu schreiben und Einrückungen zu verwenden, um verwandte Regeln zu gruppieren. ZB nach Olis Beispiel:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

Das macht es einfach, der Dateistruktur zu folgen, insbesondere mit genügend Leerzeichen und klar gekennzeichneten Kommentaren zwischen Gruppen (obwohl nicht so einfach, schnell zu überfliegen) und einfach zu bearbeiten (da Sie nicht durch einzelne lange Zeilen von CSS waten müssen für jede Regel).

Verstehen und verwenden Sie die Kaskade und Spezifität (daher ist es richtig, Ihre Selektoren alphabetisch zu sortieren).

Ob ich mein CSS in mehrere Dateien aufteile und in welchen Dateien, hängt von der Größe und Komplexität der Site und des CSS ab. Ich habe immer wenigstens eine reset.css. Dies wird in der Regel von einem layout.cssallgemeinen Seitenlayout begleitet, nav.csswenn die Navigationsmenüs der Website etwas kompliziert werden und forms.cssich über ausreichend CSS zum Gestalten meiner Formulare verfüge. Davon abgesehen finde ich es auch selbst heraus. Ich könnte colors.cssund type.css/fonts.cssdie Farben / Grafiken und Typografie abspalten, base.cssum einen vollständigen Basisstil für alle HTML-Tags bereitzustellen ...

Ich neige dazu, mein CSS so zu organisieren:

1. reset.css
2. base.css: Ich habe das Layout für die Hauptabschnitte der Seite festgelegt
   1. allgemeine Stile
   2. Header
   3. Nav
   4. Inhalt
   5. Fusszeile
3. zusätzliche- [Seitenname] .css: Klassen, die nur auf einer Seite verwendet werden

Sie finden es jedoch am einfachsten zu lesen!

Im Ernst, Sie werden eine Milliarde und fünf Vorschläge bekommen, aber Sie werden nur ein paar Methoden mögen.

Einige Dinge werde ich jedoch sagen:

• Das Aufteilen einer CSS-Datei in Blöcke hilft Ihnen zwar dabei, sie in Ihrem Kopf zu organisieren, bedeutet jedoch mehr Anforderungen von Browsern, was letztendlich zu einem langsamer laufenden Server führt (mehr Anforderungen) und es dauert länger, bis Browser Seiten anzeigen. Vergiss das nicht.
• Das Aufbrechen einer Datei, nur weil es sich um eine beliebige Anzahl von Zeilen handelt, ist dumm (mit der Ausnahme, dass Sie einen schrecklichen Editor haben - in diesem Fall erhalten Sie einen neuen).

Persönlich codiere ich mein CSS folgendermaßen:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

Wenn ich die Regeln in einer Zeile halte, kann ich eine Datei sehr schnell überfliegen und sehen, welche Regeln es gibt. Wenn sie erweitert werden, finde ich es zu sehr wie harte Arbeit, herauszufinden, welche Regeln angewendet werden.

Es gibt eine Reihe anerkannter Methoden zum Formatieren Ihres CSS. Letztendlich liegt es an Ihnen, was Sie am wohlsten schreiben, aber diese helfen Ihnen bei der Verwaltung Ihres CSS für größere, kompliziertere Projekte. Nicht, dass es wichtig wäre, aber ich tendiere dazu, eine Kombination aus BEM und SMACSS zu verwenden.

BEM (Block, Element, Modifikator)

BEM ist eine äußerst nützliche, leistungsstarke und einfache Namenskonvention, mit der Sie Ihren Front-End-Code leichter lesen und verstehen, leichter bearbeiten, skalieren, robuster und expliziter und viel strenger gestalten können.

Block

Eigenständige Entität, die für sich genommen von Bedeutung ist, wie z.

header, container, menu, checkbox, input

Element

Teile eines Blocks und haben keine eigenständige Bedeutung. Sie sind semantisch an seinen Block gebunden:

menu item, list item, checkbox caption, header title

Modifikator

Flags auf Blöcken oder Elementen. Verwenden Sie sie, um das Aussehen oder Verhalten zu ändern:

disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

Der Zweck von OOCSS besteht darin, die Wiederverwendung von Code und letztendlich schnellere und effizientere Stylesheets zu fördern, die einfacher zu ergänzen und zu warten sind.

OOCSS basiert auf zwei Hauptprinzipien:

1. Trennung der Struktur von der Haut

Dies bedeutet, sich wiederholende visuelle Merkmale (wie Hintergrund- und Rahmenstile) als separate „Skins“ zu definieren, die Sie mit Ihren verschiedenen Objekten kombinieren können, um eine große visuelle Vielfalt ohne viel Code zu erzielen. Siehe das Modulobjekt und seine Skins.

2. Trennung von Behältern und Inhalten

Im Wesentlichen bedeutet dies, dass „ortsabhängige Stile selten verwendet werden“. Ein Objekt sollte gleich aussehen, egal wo Sie es platzieren. Anstatt ein bestimmtes mit .myObject h2 {...} zu formatieren, erstellen Sie eine Klasse, die das betreffende beschreibt, wie z. Dies gibt Ihnen die Gewissheit, dass: (1) alle nicht klassifizierten s gleich aussehen werden; (2) Alle Elemente mit der Kategorieklasse (Mixin genannt) sehen gleich aus. und 3) Sie müssen keinen Überschreibungsstil für den Fall erstellen, dass .myObject h2 tatsächlich wie normal aussehen soll.

SMACSS

SMACSS ist eine Möglichkeit, Ihren Entwurfsprozess zu untersuchen und diese starren Frameworks in einen flexiblen Denkprozess einzubauen. Es ist ein Versuch, einen konsistenten Ansatz für die Site-Entwicklung bei Verwendung von CSS zu dokumentieren.

Im Zentrum von SMACSS steht die Kategorisierung. Durch die Kategorisierung von CSS-Regeln erkennen wir Muster und können für jedes dieser Muster bessere Vorgehensweisen definieren.

Es gibt fünf Arten von Kategorien:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

Basis Enthält Reset- und Standardelementstile. Es kann auch Basisstile für Steuerelemente wie Schaltflächen, Raster usw. enthalten, die unter bestimmten Umständen später im Dokument überschrieben werden können.

Layout Enthält alle Navigationsfunktionen, Breadcrumbs, Sitemaps usw. usw.

Module Enthalten bereichsspezifische Stile wie Kontaktformularstile, Homepage-Kacheln, Produktliste usw. usw. usw.

Zustand Enthält Zustandsklassen wie isSelected, isActive, hasError, wasSuccessful etc etc.

Thema Enthält alle Stile, die sich auf das Thema beziehen.

Es gibt zu viele, um sie hier zu beschreiben, aber sehen Sie sich auch diese anderen an:

• SuitCSS
• AtomicCSS (nicht Atomic Design)
• oCSS (organisches CSS)

Ich gehe mit dieser Bestellung:

1. Allgemeine Stilregeln, die normalerweise auf die bloßen Elemente (a, ul, ol usw.) angewendet werden, aber auch allgemeine Klassen sein können (.button, .error)
2. Seitenlayoutregeln gelten für die meisten / alle Seiten
3. Individuelle Seitenlayoutregeln

Für alle Stilregeln, die für eine einzelne Seite oder kleine Gruppierungsseiten gelten, setze ich den Body auf eine ID und eine Klasse, um das Targeting bestimmter Seiten zu vereinfachen. Die ID ist der Basisname der Datei, und die Klasse ist der Verzeichnisname, in dem sie sich befindet.

Ich habe verschiedene Strategien ausprobiert und komme immer wieder auf diesen Stil zurück:

.class {border: 1px solid #000; padding: 0; margin: 0;}

Dies ist am freundlichsten, wenn es um eine große Anzahl von Erklärungen geht.

Mr. Snook hat darüber vor fast vier Jahren geschrieben :) .

Berücksichtigen Sie gängige Stile. Nicht Stile, die zufällig gleich sind, sondern Stile, die gleich sein sollen. Wenn Sie den Stil für einen Selektor ändern, bedeutet dies wahrscheinlich, dass Sie auch den anderen ändern möchten. Ich habe ein Beispiel für diesen Stil in einen anderen Beitrag eingefügt : Erstellen Sie eine Variable in einer CSS-Datei zur Verwendung in dieser CSS-Datei .

Abgesehen davon gruppenbezogene Regeln zusammen. Und teilen Sie Ihre Regeln in mehrere Dateien auf ... es sei denn, jede Seite benötigt tatsächlich jede Regel.

Da die eigentliche Reihenfolge ein wesentlicher Bestandteil der Anwendung Ihres CSS ist, erscheint es etwas dumm, mit dem "alphabetischen" Vorschlag fortzufahren.

Im Allgemeinen möchten Sie Elemente nach dem Bereich der Seite gruppieren, auf den sie sich auswirken. ZB werden zuerst Hauptstile verwendet, die sich auf alles auswirken, dann Kopf- und Fußzeilenstile, dann Navigationsstile, dann Hauptinhaltsstile und dann sekundäre Inhaltsstile.

Ich würde an dieser Stelle vermeiden, in mehrere Dateien aufzubrechen, da die Wartung schwieriger sein kann. (Es ist sehr schwierig, die Kaskadenreihenfolge im Kopf zu behalten, wenn sechs CSS-Dateien geöffnet sind.) Ich würde jedoch definitiv damit beginnen, Stile in andere Dateien zu verschieben, wenn sie nur für eine Teilmenge von Seiten gelten, z. B. werden Formularstile nur dann mit einer Seite verknüpft, wenn die Seite tatsächlich ein Formular enthält.

Früher machte ich mir ununterbrochen Sorgen, aber Firebug kam zur Rettung.

Heutzutage ist es viel einfacher zu sehen, wie Ihre Stile durch Firebug miteinander zusammenhängen, und von dort aus herauszufinden, was zu tun ist.

Stellen Sie auf jeden Fall sicher, dass es eine vernünftige Struktur gibt, die verwandte Stile zusammenfasst, aber gehen Sie nicht über Bord. Firebug macht es so viel einfacher, Dinge zu verfolgen, dass Sie sich keine Sorgen machen müssen, eine perfekte CSS-Struktur im Voraus zu erstellen.

Hier ist was ich tue. Ich habe eine CSS-Indexseite ohne Anweisungen, die die verschiedenen Dateien aufruft. Hier ist ein kurzes Beispiel:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

Es beginnt mit einem vollständigen Reset. Die nächste Datei definiert die Farbpalette zum einfachen Nachschlagen. Dann habe ich Stil die Haupt <div/>s, die das Layout, Kopf- und Fußzeile, die Anzahl der Spalten bestimmen, wo sie passen, etc ... Die HTML - Tags definses <body/>, <h1/>, <p/>, t etc ... Weiter , um die spezifischen Bereiche der Website kommen.

Es ist sehr skalabale und sehr klar. Viel freundlicher, Code zum Ändern und zu neuen Abschnitten zu finden.

CSS-Dateien werden auf dem Client zwischengespeichert. Es empfiehlt sich daher, alle Stile in einer Datei zu speichern. Bei der Entwicklung finde ich es jedoch nützlich, mein CSS nach Domänen zu strukturieren.

Zum Beispiel: reset.css , design.css, text.cssund so weiter. Wenn ich das Endprodukt veröffentliche, fasse ich alle Stile in einer Datei zusammen.

Ein weiterer nützlicher Tipp ist, die Lesbarkeit auf die Regeln zu konzentrieren, nicht auf die Stile.

Während:

ul li
{
    margin-left: 10px;
    padding: 0;
}

Sieht gut aus, es ist nicht einfach, die Regeln zu finden, wenn Sie beispielsweise 100 Codezeilen haben.

Stattdessen verwende ich dieses Format:

rule { property: value; property: value; }

rule { property: value; property: value; }

ITCSS

Von Harry Roberts (CSS-Zauberei)

Definiert den globalen Namespace und die Kaskade und hilft, die Selektorspezifität niedrig zu halten.

Struktur

Die ersten beiden gelten nur, wenn Sie einen Präprozessor verwenden.

1. (Die Einstellungen)
2. (Werkzeuge)
3. Generika
4. Elemente
5. Objekte
6. Komponenten
7. Trümpfe

Normalerweise mache ich das:

1. <link rel="stylesheet" href="css/style.css">

2. In style.css importiere ich Folgendes:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. In colors.cssI @importFolgendes (bei Verwendung der benutzerdefinierten CSS-Eigenschaften):

   @import url(root/variable.css);
   

Alles ist in Ordnung und es ist einfach, einen Teil des Codes zum Bearbeiten zu bringen. Ich bin froh, wenn es irgendwie hilft.