Verwaltung der CSS-Explosion

Question

Ich habe mich für eine Website, an der ich arbeite, stark auf CSS verlassen. Im Moment werden alle CSS-Stile pro Tag angewendet, und deshalb versuche ich jetzt, sie zu einem externen Styling zu verschieben, um bei zukünftigen Änderungen zu helfen.

Das Problem ist jedoch, dass ich festgestellt habe, dass ich eine "CSS-Explosion" erlebe. Es wird immer schwieriger für mich zu entscheiden, wie ich die Daten innerhalb der CSS-Datei am besten organisieren und abstrahieren kann.

Ich verwende eine große Anzahl von div Tags innerhalb der Website und wechselte von einer stark tabellenbasierten Website. Ich erhalte also eine Menge CSS-Selektoren, die wie folgt aussehen:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

Es ist noch nicht allzu schlimm, aber da ich ein Anfänger bin, habe ich mich gefragt, ob es Empfehlungen gibt, wie man die verschiedenen Teile einer CSS-Datei am besten organisiert. Ich möchte nicht für jedes Element auf meiner Website ein eigenes CSS-Attribut haben, und ich möchte immer, dass die CSS-Datei ziemlich intuitiv und leicht zu lesen ist.

Mein Ziel ist es, die Verwendung von CSS-Dateien zu vereinfachen und ihre Leistungsfähigkeit zu demonstrieren, um die Geschwindigkeit der Webentwicklung zu erhöhen. Auf diese Weise werden auch andere Personen, die in Zukunft an dieser Website arbeiten, in die Praxis der guten Kodierungspraktiken eingeführt und müssen sie nicht erst lernen, wie ich es getan habe.

Answer 1

Sie sollten auch die Kaskade und die Gewichtung kennen und wissen, wie sie funktionieren.

Mir ist aufgefallen, dass Sie nur Klassenbezeichner verwenden (div.title). Wussten Sie, dass Sie auch IDs verwenden können, und dass eine ID mehr Gewicht hat als eine Klasse?

Zum Beispiel,

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

sorgt dafür, dass alle diese Elemente die gleiche Schriftgröße oder Farbe haben, oder was auch immer Ihre Regeln sind. Sie können sogar dafür sorgen, dass alle DIVs, die von #page1 abstammen, bestimmte Regeln erhalten.

Was das Gewicht betrifft, so ist zu beachten, dass die CSS-Achsen vom allgemeinsten/leichtesten zum spezifischsten/schwersten Bereich verlaufen. Das heißt, in einem CSS-Selektor wird ein Element-Spezifizierer durch einen Klassen-Spezifizierer und einen ID-Spezifizierer überstimmt. Zahlen zählen, daher hat ein Selektor mit zwei Elementbezeichnern (ul li) mehr Gewicht als einer mit nur einem Bezeichner (li).

Stellen Sie sich das wie Ziffern vor. Eine 9 in der Einerspalte ist immer noch weniger als eine Eins in der Zehnerspalte. Ein Selektor mit einem ID-Spezifizierer, einem Klassen-Spezifizierer und zwei Element-Spezifizierern hat mehr Gewicht als ein Selektor ohne ID, 500 Klassen-Spezifizierer und 1.000 Element-Spezifizierer. Dies ist natürlich ein absurdes Beispiel, aber Sie verstehen die Idee. Der Punkt ist, dass die Anwendung dieses Konzepts Ihnen hilft, eine Menge CSS zu bereinigen.

Das Hinzufügen des Elementspezifizierers zur Klasse (div.title) ist übrigens nicht notwendig, es sei denn, Sie geraten in Konflikte mit anderen Elementen, die class="title" haben. Fügen Sie keine unnötige Gewichtung hinzu, da Sie diese Gewichtung später möglicherweise benötigen.

Answer 2

Ich finde es schwierig, das erforderliche Design für eine Website in eine Reihe von Regeln zu übersetzen. Wenn das Design der Website klar und regelbasiert ist, dann können sich die Klassennamen und die CSS-Struktur daraus ergeben. Aber wenn die Leute im Laufe der Zeit wahllos kleine Teile zur Website hinzufügen, die nicht viel Sinn ergeben, kann man im CSS nicht viel dagegen tun.

Ich neige dazu, meine CSS-Dateien ungefähr so zu organisieren:

1. CSS-Reset, basierend auf Eric Meyer's . (Weil ich sonst feststelle, dass ich für die meisten Elemente mindestens eine oder zwei Regeln habe, die nur die Standard-Browser-Stile zurücksetzen - die meisten meiner Listen sehen zum Beispiel nicht wie der Standard-HTML-Stil für Listen aus).

2. CSS für das Gittersystem, wenn die Website dies erfordert. (Ich stütze mich auf 960.gs )

3. Stile für Komponenten, die auf jeder Seite erscheinen (Kopfzeilen, Fußzeilen usw.)

4. Stile für Komponenten, die an verschiedenen Stellen auf der Website verwendet werden

5. Stile, die nur auf einzelnen Seiten relevant sind

Wie Sie sehen können, hängt das meiste davon ab, wie die Website gestaltet ist. Wenn das Design klar und übersichtlich ist, kann Ihr CSS das auch sein. Wenn nicht, sind Sie aufgeschmissen.

Answer 3

Darf ich vorschlagen Weniger CSS Dynamischer Rahmen

Es ist ähnlich wie SASS, wie bereits erwähnt.

Es hilft, CSS pro übergeordneter Klasse zu erhalten.

z.B.

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

Was dies bewirkt: Wendet width:100% sowohl auf #child1 als auch auf #child2 an.

Außerdem gehört das spezifische CSS für #child1 zu #parent.

Dies würde dazu führen, dass

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

Answer 4

Meine Antwort ist sehr allgemein gehalten, um die von Ihnen in Ihrer Frage aufgeworfenen Bedenken zu berücksichtigen. Es mag kleine organisatorische Tricks und Kniffe geben, um das Ganze zu verschönern, aber nichts davon kann methodische Mängel beheben. Es gibt mehrere Faktoren, die die CSS-Explosion beeinflussen. Offensichtlich die Gesamtkomplexität der Website, aber auch Dinge wie die Semantik der Namensgebung, die CSS-Leistung, die Organisation der CSS-Dateien und die Testbarkeit/Akzeptanz.

Mit der semantischen Benennung scheinen Sie auf dem richtigen Weg zu sein, aber es kann noch einen Schritt weiter gehen. HTML-Abschnitte, die ohne strukturelle Änderung wiederholt auf der Website erscheinen (so genannte "Module"), können als Selektor-Roots betrachtet werden, und von dort aus können Sie das interne Layout relativ zu dieser Root festlegen. Dies ist der Grundgedanke von objektorientiertes CSS und Sie können lesen/sehen Sie mehr darüber in diesem Vortrag eines Yahoo-Ingenieurs .

Es ist wichtig zu beachten, dass dieser saubere Ansatz im Widerspruch zu den Leistungsanforderungen stehen kann, die sich auf die kurze Selektoren, die entweder auf id oder Tag-Namen basieren . Wie Sie das Gleichgewicht finden, ist Ihre Sache, aber wenn Sie nicht gerade eine riesige Website haben, sollte dies nur ein Leitfaden in Ihrem Hinterkopf sein, der Sie daran erinnert, Ihre Selektoren kurz zu halten. Mehr über Leistung hier .

Und schließlich: Werden Sie eine einzelne CSS-Datei für Ihre gesamte Website oder mehrere Dateien (eine einzige Basisdatei mit seiten- oder abschnittsweisen Dateien)? Eine einzelne Datei ist besser für die Leistung, könnte aber bei mehreren Teammitgliedern schwieriger zu verstehen und zu pflegen sein und ist möglicherweise schwieriger zu testen. Zum Testen empfehle ich Ihnen eine einzelne CSS-Testseite die alle unterstützten CSS-Module enthält, um Kollisionen und unbeabsichtigte Kaskadierungen zu testen.

Alternativ können Sie auch eine Ansatz mit mehreren Dateien , um die CSS-Regeln auf eine Seite oder einen Abschnitt zu beziehen. Dazu muss der Browser mehrere Dateien herunterladen, was ein Leistungsproblem darstellt. Sie können serverseitige Programmierung verwenden, um die CSS-Dateien dynamisch in einer einzigen Datei zusammenzufassen (und zu minimieren). Da diese Dateien jedoch getrennt sind und die Tests für sie getrennt durchgeführt werden müssen, besteht die Möglichkeit, dass das Erscheinungsbild der einzelnen Seiten/Abschnitte nicht einheitlich ist. Dadurch wird das Testen schwieriger.

Es liegt an Ihnen, die spezifischen Bedürfnisse des Kunden zu analysieren und diese Anliegen entsprechend abzuwägen.

Answer 5

Wie ich schon sagte: Steigen Sie in OOCSS ein. Sass/Less/Compass ist verlockend zu verwenden, aber bis vanilla CSS ist der richtige Weg verwendet Sass/Less/Compass wird nur die Dinge schlechter machen.

Versuchen Sie es mit Google Page Speed und lesen Sie, was Souders über effizientes CSS geschrieben hat.

Geben Sie dann OOCSS ein.

• Lernen Sie, mit der Kaskade zu arbeiten. (Wir nennen es ja auch Kaskadierung Stylesheets).
• Lernen, wie man die richtige Granularität erreicht (bottom-up statt top-down)
• Lernen Sie, wie man Struktur und Haut voneinander trennt (was ist einzigartig, und was sind die Variationen dieser Objekte?)
• Lernen Sie, wie Sie Container und Inhalt trennen können.
• Lernen Sie, Gitternetze zu lieben.

Es wird jeden einzelnen Punkt beim Schreiben von CSS revolutionieren. Ich bin völlig neu und liebe es.

UPDATE: SMACSS ist ähnlich wie OOCSS, aber im Allgemeinen leichter anzupassen.