Verwalten der CSS-Explosion

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

Aber jetzt ist das Problem, dass ich bemerkt habe, dass ich eine "CSS-Explosion" bekomme. Es wird für mich immer schwieriger zu entscheiden, wie Daten in der CSS-Datei am besten organisiert und abstrahiert werden sollen.

Ich verwende eine große Anzahl von divTags innerhalb der Website, die von einer stark tabellenbasierten Website abweichen. Ich bekomme also viele CSS-Selektoren, die so 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 so schlimm, aber da ich ein Anfänger bin, habe ich mich gefragt, ob Empfehlungen gegeben werden können, wie die verschiedenen Teile einer CSS-Datei am besten organisiert werden können. 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 einfach zu lesen ist.

Mein oberstes Ziel ist es, die Verwendung der 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 möglicherweise in Zukunft an dieser Site arbeiten, in die Praxis der Verwendung guter Codierungspraktiken einsteigen, anstatt sie so aufgreifen zu müssen, wie ich es getan habe.

Das ist eine sehr gute Frage. Überall, wo ich hinschaue, geraten CSS-Dateien nach einer Weile außer Kontrolle - insbesondere, aber nicht nur, wenn Sie in einem Team arbeiten.

Das Folgende sind die Regeln, die ich selbst einzuhalten versuche (nicht, dass ich es immer schaffe.)

• Refactor früh, Refactor oft. Bereinigen Sie häufig CSS-Dateien und verschmelzen Sie mehrere Definitionen derselben Klasse. Veraltete Definitionen sofort entfernen .

• Hinterlassen Sie beim Hinzufügen von CSS während der Fehlerbehebung einen Kommentar zu den Auswirkungen der Änderung ("Damit stellen Sie sicher, dass das Feld im IE <7 linksbündig ausgerichtet ist").

• Vermeiden Sie Redundanzen, z. B. das Definieren derselben Sache in .classnameund .classname:hover.

• Verwenden Sie Kommentare /** Head **/, um eine klare Struktur zu erstellen.

• Verwenden Sie ein Prettifier-Tool, mit dem Sie einen konstanten Stil beibehalten können. Ich benutze Polystyle , mit dem ich ziemlich zufrieden bin (kostet 15 Dollar, ist aber gut angelegtes Geld). Es gibt auch kostenlose (z. B. Code Beautifier basierend auf CSS Tidy , einem Open-Source-Tool).

• Bauen Sie vernünftige Klassen auf. Im Folgenden finden Sie einige Hinweise dazu.

• Verwenden Sie Semantik, vermeiden Sie DIV-Suppe - verwenden Sie <ul>s zum Beispiel für Menüs.

• Definieren Sie alles auf einer möglichst niedrigen Ebene (z. B. eine Standardschriftfamilie, Farbe und Größe in der body) und verwenden Sie diese nach inheritMöglichkeit

• Wenn Sie sehr komplexes CSS haben, hilft möglicherweise ein CSS-Pre-Compiler. Ich plane, mich aus dem gleichen Grund bald mit xCSS zu befassen . Es gibt mehrere andere.

• Wenn Sie in einem Team arbeiten, heben Sie die Notwendigkeit von Qualität und Standards auch für CSS-Dateien hervor. Jeder kennt Codierungsstandards in seinen Programmiersprachen, aber es gibt wenig Bewusstsein dafür, dass dies auch für CSS notwendig ist.

• Wenn Sie in einem Team arbeiten, sollten Sie die Versionskontrolle in Betracht ziehen. Es macht es viel einfacher, Dinge zu verfolgen und Konflikte so viel einfacher zu lösen. Es lohnt sich wirklich, auch wenn Sie "nur" in HTML und CSS sind.

• Arbeiten Sie nicht mit !important. Nicht nur, weil IE = <7 damit nicht umgehen kann. In einer komplexen Struktur ist die Verwendung von !importantoft verlockend, ein Verhalten zu ändern, dessen Quelle nicht gefunden werden kann, aber es ist Gift für die langfristige Wartung.

Vernünftige Klassen aufbauen

So baue ich gerne vernünftige Klassen.

Ich wende zuerst globale Einstellungen an:

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

Dann identifiziere ich die Hauptabschnitte des Seitenlayouts - z. B. den oberen Bereich, das Menü, den Inhalt und die Fußzeile. Wenn ich ein gutes Markup geschrieben habe, sind diese Bereiche mit der HTML-Struktur identisch.

Dann beginne ich mit dem Erstellen von CSS-Klassen, spezifiziere so viele Vorfahren wie möglich, solange dies sinnvoll ist, und gruppiere verwandte Klassen so eng wie möglich.

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

Stellen Sie sich die gesamte CSS-Struktur als einen Baum mit immer spezifischeren Definitionen vor, je weiter Sie von der Wurzel entfernt sind. Sie möchten die Anzahl der Klassen so gering wie möglich halten und sich so selten wie möglich wiederholen.

Angenommen, Sie haben drei Ebenen von Navigationsmenüs. Diese drei Menüs sehen unterschiedlich aus, haben aber auch bestimmte Eigenschaften gemeinsam. Zum Beispiel sind sie alle <ul>, sie haben alle die gleiche Schriftgröße und die Elemente sind alle nebeneinander (im Gegensatz zum Standard-Rendering von a ul). Außerdem enthält keines der Menüs Aufzählungszeichen ( list-style-type).

Definieren Sie zunächst die allgemeinen Merkmale in einer Klasse mit dem Namen menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

Definieren Sie dann die spezifischen Merkmale jedes der drei Menüs. Stufe 1 ist 40 Pixel groß; Level 2 und 3, 20 Pixel.

Hinweis: Sie können hierfür auch mehrere Klassen verwenden, Internet Explorer 6 hat jedoch Probleme mit mehreren Klassen . In diesem Beispiel wird ids verwendet.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

Das Markup für das Menü sieht folgendermaßen aus:

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

Wenn die Seite semantisch ähnliche Elemente enthält - wie diese drei Menüs -, versuchen Sie zunächst, die Gemeinsamkeiten zu ermitteln und sie in eine Klasse einzuteilen. Erarbeiten Sie dann die spezifischen Eigenschaften und wenden Sie sie auf Klassen oder, wenn Sie Internet Explorer 6 unterstützen müssen, auf IDs an.

Verschiedene HTML-Tipps

Wenn Sie diese Semantik zu Ihrer HTML-Ausgabe hinzufügen, können Designer später das Erscheinungsbild von Websites und / oder Apps mithilfe von reinem CSS anpassen. Dies ist ein großer Vorteil und spart Zeit.

• Wenn möglich, geben Sie dem Körper jeder Seite eine eindeutige Klasse: <body class='contactpage'>Dies macht es sehr einfach, dem Stylesheet seitenspezifische Änderungen hinzuzufügen:

  body.contactpage div.container ul.mainmenu li { color: green }

• Fügen Sie beim automatischen Erstellen von Menüs so viel CSS-Kontext wie möglich hinzu, um später ein umfassendes Styling zu ermöglichen. Zum Beispiel:

  <ul class="mainmenu">
   <li class="item_first item_active item_1"> First item </li> 
   <li class="item_2"> Second item </li> 
   <li class="item_3"> Third item </li> 
   <li class="item_last item_4"> Fourth item </li> 
  </ul>

  Auf diese Weise kann auf jedes Menüelement zugegriffen werden, um es entsprechend seinem semantischen Kontext zu gestalten: Ob es das erste oder das letzte Element in der Liste ist; Gibt an, ob es sich um das aktuell aktive Element handelt. und nach Nummer.

Beachten Sie, dass diese Zuweisung mehrerer Klassen, wie im obigen Beispiel beschrieben , in IE6 nicht ordnungsgemäß funktioniert . Es gibt eine Problemumgehung , damit IE6 mit mehreren Klassen umgehen kann. Wenn die Problemumgehung keine Option ist, müssen Sie die für Sie wichtigste Klasse festlegen (Artikelnummer, aktiv oder zuerst / zuletzt) ​​oder auf die Verwendung von IDs zurückgreifen.

Hier sind nur 4 Beispiele:

• CSS-Konventionen / Code-Layout-Modelle
• Gibt es CSS-Standards, denen ich beim Schreiben meines ersten Stylesheets folgen sollte?
• Was ist die beste Methode zum Aufräumen von CSS?
• Best Practices - CSS-Stylesheet-Formatierung

Zu allen 4 Fragen enthielt meine Antwort den Rat, die PDF- CSS-Systeme von Natalie Downe herunterzuladen und zu lesen . (Das PDF enthält Tonnen von Notizen, die nicht in den Folien enthalten sind. Lesen Sie also das PDF!). Beachten Sie ihre Organisationsvorschläge.

EDIT (05.02.2014) vier Jahre später würde ich sagen:

• Verwenden Sie einen CSS-Vorprozessor und verwalten Sie Ihre Dateien als Teilprozessoren (ich persönlich bevorzuge Sass mit Kompass, aber Less ist auch ziemlich gut und es gibt andere)
• Informieren Sie sich über Konzepte wie OOCSS , SMACSS und BEM oder getbem .
• Sehen Sie sich an, wie beliebte CSS-Frameworks wie Bootstrap und Zurb Foundation strukturiert sind. Und nicht weniger beliebte Frameworks rabattieren - Inuit ist interessant, aber es gibt viele andere.
• Kombinieren / minimieren Sie Ihre Dateien mit einem Build-Schritt auf einem Continuous Integration Server und / oder einem Task Runner wie Grunt oder Gulp.

Schreiben Sie keine Überschriften in CSS

Teilen Sie einfach Abschnitte in Dateien. Alle CSS-Kommentare sollten genau das sein, Kommentare.

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

Verwenden Sie ein Skript, um sie zu einem zu kombinieren. im Bedarfsfall. Sie können sogar eine schöne Verzeichnisstruktur haben und Ihr Skript rekursiv nach .cssDateien durchsuchen lassen.

Wenn Sie Überschriften schreiben müssen, haben Sie ein Inhaltsverzeichnis am Anfang der Datei

Die Überschriften im Inhaltsverzeichnis sollten den Überschriften entsprechen, die Sie später schreiben. Es ist ein Schmerz, nach Überschriften zu suchen. Wie genau soll jemand wissen, dass Sie nach Ihrem ersten Header einen anderen Header haben? ps. Fügen Sie beim Schreiben von Inhaltsverzeichnissen nicht doc-like * (Stern) am Anfang jeder Zeile hinzu, da dies die Auswahl des Texts nur ärgerlicher macht.

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

Schreiben Sie Kommentare mit oder innerhalb der Regeln, nicht außerhalb des Blocks

Zunächst einmal, wenn Sie das Skript bearbeiten, besteht eine 50/50-Chance, dass Sie darauf achten, was sich außerhalb des Regelblocks befindet (insbesondere, wenn es sich um einen großen Textball handelt;)). Zweitens gibt es (fast) keinen Fall, in dem Sie einen "Kommentar" außerhalb benötigen würden. Wenn es draußen ist, ist es 99% der Zeit ein Titel, also behalte es so.

Teilen Sie die Seite in Komponenten auf

Komponenten sollten die meiste Zeit position:relativenein paddingund nein marginhaben. Dies vereinfacht% Regeln viel, sowie die Möglichkeit für viel einfacher absolute:position‚von Elementen ing, da im Fall ein absoluter positionierter Container ist das absolute positioniertes Element wird den Behälter verwendet bei der Berechnung top, right, bottom, leftEigenschaften.

Die meisten DIVs in einem HTML5-Dokument sind normalerweise eine Komponente.

Eine Komponente kann auch als unabhängige Einheit auf der Seite betrachtet werden. In Laienbegriffen behandeln Sie etwas wie eine Komponente, wenn es sinnvoll ist, etwas wie eine Blackbox zu behandeln .

Gehen Sie noch einmal zum Beispiel der QA-Seite:

#navigation
#question
#answers
#answers .answer
etc.

Durch Aufteilen der Seite in Komponenten teilen Sie Ihre Arbeit in überschaubare Einheiten auf.

Setzen Sie Regeln mit kumulativem Effekt in dieselbe Zeile.

Zum Beispiel border, marginund padding(aber nicht outline) alle Add auf die Abmessungen und die Größe des Elements Du Styling.

position: absolute; top: 10px; right: 10px;

Wenn sie in einer Zeile einfach nicht so lesbar sind, platzieren Sie sie zumindest in unmittelbarer Nähe:

padding: 10px; margin: 20px;
border: 1px solid black;

Verwenden Sie nach Möglichkeit eine Kurzschrift:

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

Wiederholen Sie niemals einen Selektor

Wenn Sie mehr Instanzen desselben Selektors haben, besteht eine gute Chance, dass Sie unvermeidlich mehrere Instanzen derselben Regeln haben. Zum Beispiel:

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

Vermeiden Sie die Verwendung von TAGs als Selektoren, wenn Sie IDs / Klassen verwenden können

Zunächst einmal sind die DIV- und SPAN-Tags die Ausnahme: Sie sollten sie niemals verwenden! ;) Verwenden Sie sie nur, um eine Klasse / ID anzuhängen.

Diese...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

Sollte so geschrieben sein:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

Weil die zusätzlichen baumelnden DIVs dort nichts zum Selektor hinzufügen. Sie erzwingen auch eine unnötige Tag-Regel. Wenn Sie zum Beispiel .answervon a divzu a wechseln articlewürden, würde Ihr Stil brechen.

Oder wenn Sie mehr Klarheit bevorzugen:

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

Der Grund dafür ist, dass die border-collapseEigenschaft eine spezielle Eigenschaft ist, die nur dann sinnvoll ist, wenn sie auf a angewendet wird table. Wenn dies .statisticsnicht der Fall ist table, sollte es nicht zutreffen.

Generische Regeln sind böse!

• Vermeiden Sie es, generische / magische Regeln zu schreiben, wenn Sie können
• Sofern es sich nicht um ein CSS-Reset / Unreset handelt, sollte Ihre gesamte generische Magie auf mindestens eine Root-Komponente angewendet werden

Sie sparen dir keine Zeit, sie lassen deinen Kopf explodieren; sowie Wartung zu einem Albtraum machen. Wenn Sie die Regel schreiben, wissen Sie möglicherweise, wo sie gelten. Dies hat jedoch keine Garantie dafür, dass Ihre Regel später nicht mit Ihnen in Konflikt gerät.

Das Hinzufügen zu diesen allgemeinen Regeln ist verwirrend und schwer zu lesen, selbst wenn Sie eine Vorstellung von dem Dokument haben, das Sie gestalten. Dies bedeutet nicht, dass Sie keine generischen Regeln schreiben sollten. Verwenden Sie sie nur, wenn Sie wirklich beabsichtigen, dass sie generisch sind, und selbst sie fügen dem Selektor so viele Bereichsinformationen wie möglich hinzu.

Sachen wie diese ...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

... hat das gleiche Problem wie die Verwendung globaler Variablen in einer Programmiersprache. Sie müssen ihnen Spielraum geben!

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

Grundsätzlich lautet das wie folgt:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector 

Ich verwende gerne IDs, wenn eine mir bekannte Komponente ein Singleton auf einer Seite ist. Ihre Bedürfnisse können unterschiedlich sein.

Hinweis: Idealerweise sollten Sie gerade genug schreiben. Das Erwähnen von mehr Komponenten im Selektor ist jedoch der fehlerverzeihendere Fehler im Vergleich zum Erwähnen von weniger Komponenten.

Nehmen wir an, Sie haben eine paginationKomponente. Sie verwenden es an vielen Stellen auf Ihrer Website. Dies wäre ein gutes Beispiel dafür, wann Sie eine generische Regel schreiben würden. Nehmen wir an, Sie haben display:blockdie einzelnen Seitenzahlen-Links und geben ihnen einen dunkelgrauen Hintergrund. Damit sie sichtbar sind, müssen folgende Regeln gelten:

.pagination .pagelist a {
    color: #fff;
}

Angenommen, Sie verwenden Ihre Paginierung für eine Liste von Antworten. Möglicherweise stoßen Sie auf so etwas

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

Dadurch werden Ihre weißen Links schwarz, was Sie nicht möchten.

Der falsche Weg, dies zu beheben, ist:

.pagination .pagelist a {
    color: #fff !important;
}

Der richtige Weg, dies zu beheben, ist:

#answers .header .pagination .pagelist a {
    color: #fff;
}

Komplexe "logische" Kommentare funktionieren nicht :)

Wenn Sie etwas schreiben wie: "Dieser Wert ist abhängig von bla-bla kombiniert mit der Höhe von bla-bla", ist es nur unvermeidlich, dass Sie einen Fehler machen und alles wie ein Kartenhaus herunterfällt.

Halten Sie Ihre Kommentare einfach; Wenn Sie "logische Operationen" benötigen, ziehen Sie eine dieser CSS-Vorlagensprachen wie SASS oder LESS in Betracht .

Wie schreibe ich eine Farbpalette?

Lass das für das Ende. Haben Sie eine Datei für Ihre gesamte Farbpalette. Ohne diese Datei sollte Ihr Stil noch eine verwendbare Farbpalette in den Regeln haben. Ihre Farbpalette sollte überschrieben werden. Sie verketten Selektoren mit einer übergeordneten Komponente auf sehr hoher Ebene (z. B. #page) und schreiben dann Ihren Stil als autarken Regelblock. Es kann nur Farbe oder etwas mehr sein.

z.B.

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

Die Idee ist einfach: Ihre Farbpalette ist ein Stylesheet, das von dem von Ihnen verwendeten Basisstil unabhängig ist kaskadieren .

Weniger Namen, weniger Speicherplatz, wodurch der Code leichter lesbar ist

Es ist besser, weniger Namen zu verwenden. Verwenden Sie im Idealfall sehr einfache (und kurze!) Wörter: Text, Text, Kopfzeile.

Ich finde auch, dass die Kombination einfacher Wörter leichter zu verstehen ist, als eine Suppe langer "passender" Wörter zu haben: Postbody, Posthead, Benutzerinfo usw.

Halten Sie den Wortschatz klein, auch wenn ein Fremder, der Ihre Stil-Suppe liest (wie Sie selbst nach ein paar Wochen;)), nur verstehen muss, wo Wörter verwendet werden, und nicht, wo jeder Selektor verwendet wird. Zum Beispiel benutze ich.this immer dann wenn ein Element angeblich "das ausgewählte Element" oder "das aktuelle Element" usw. ist.

Räumen Sie nach sich selbst auf

CSS zu schreiben ist wie Essen, manchmal hinterlässt man ein Durcheinander. Stellen Sie sicher, dass Sie das Chaos beseitigen, da sich sonst der Müllcode ansammelt. Entfernen Sie nicht verwendete Klassen / IDs. Entfernen Sie nicht verwendete CSS-Regeln. Stellen Sie sicher, dass alles schön eng ist und Sie keine widersprüchlichen oder doppelten Regeln haben.

Wenn Sie, wie ich vorgeschlagen habe, einige Container als Blackboxes (Komponenten) in Ihrem Stil behandelt, diese Komponenten in Ihren Selektoren verwendet und alles in einer dedizierten Datei gespeichert haben (oder eine Datei mit einem Inhaltsverzeichnis und Überschriften ordnungsgemäß aufgeteilt haben), dann Ihre Arbeit ist wesentlich einfacher ...

Sie können ein Tool wie die Firefox-Erweiterung Dust-Me Selectors (Tipp: Zeigen Sie auf Ihre sitemap.xml) verwenden, um einen Teil des in Ihren CSS-Atomwaffen und Carnies versteckten Mülls zu finden.

Bewahren Sie eine unsorted.cssDatei auf

Angenommen, Sie gestalten eine QS-Site und haben bereits ein Stylesheet für die "Antwortseite", die wir aufrufen werden answers.css. Wenn Sie jetzt viel neues CSS hinzufügen müssen, fügen Sie es dem unsorted.cssStylesheet hinzu und überarbeiten Sie es dann in Ihr answers.cssStylesheet.

Mehrere Gründe dafür:

• Es ist schneller, nach Abschluss fertig zu werden, dann nach Regeln zu suchen (die wahrscheinlich nicht existieren) und Code einzufügen
• Sie werden Dinge schreiben, die Sie entfernen werden. Durch das Einfügen von Code wird es nur schwieriger, diesen Code zu entfernen
• Das Anhängen an die Originaldatei führt leicht zu einer Duplizierung von Regeln / Selektoren

Schauen Sie sich 1. SASS 2. Kompass an

Der beste Weg, dem CSSAufblähen entgegenzuwirken, ist die Verwendung objektorientierter CSS-Prinzipien.

Es gibt sogar ein OOCSS- Framework, das ziemlich gut ist.

Einige der Ideologien widersprechen vielem, was hier in den Top-Antworten gesagt wurde, aber sobald Sie wissen, wie man architektonisch arbeitet CSS widersprechen objektorientiert Sie feststellen, dass es tatsächlich funktioniert, um Code schlank und gemein zu halten.

Der Schlüssel hier ist, 'Objekte' oder Bausteinmuster in Ihrer Site zu identifizieren und mit ihnen zu archivieren.

Facebook stellte den Schöpfer von OOCSS ein, Nicole Sullivan, engagiert , um eine Menge Einsparungen beim Front-End-Code (HTML / CSS) zu . Ja , Sie können Einsparungen tatsächlich bekommen nicht nur in Ihrem CSS, aber auch in Ihren HTML, die durch den Klang der es, für Sie ist sehr gut möglich , wie Sie eine Umwandlung erwähnen tablebasierten Layouts in eine Menge von div‚s

Ein weiterer großartiger Ansatz, der in einigen Aspekten OOCSS ähnelt, besteht darin, Ihr CSS so zu planen und zu schreiben, dass es von Anfang an skalierbar und modular ist. Jonathan Snook hat einen brillanten Artikel über SMACSS - Scalable and Modular Architecture for CSS geschrieben

Lassen Sie mich Sie mit einigen Links verbinden:
5 Fehler von massivem CSS - (Video)
5 Fehler von massivem CSS - (Folien)
CSS Bloat - (Folien)

Sie sollten auch die Kaskade und das Gewicht sowie deren Funktionsweise verstehen.

Ich stelle fest, dass Sie nur Klassenbezeichner (div.title) verwenden. 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
}

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

Denken Sie beim Gewicht daran, dass sich die CSS-Achsen von der allgemeinsten / leichtesten zur spezifischsten / schwersten bewegen. Das heißt, in einem CSS-Selektor wird ein Elementspezifizierer von einem Klassenspezifizierer überschrieben, der von einem ID-Spezifizierer überschrieben wird. Zahlen zählen, daher hat ein Selektor mit zwei Elementspezifizierern (ul li) mehr Gewicht als einer mit nur einem einzigen Spezifizierer (li).

Betrachten Sie es als Ziffern. Eine 9 in der Einsen-Spalte ist immer noch kleiner als eine Eins in der Zehner-Spalte. Ein Selektor mit einem ID-Bezeichner, einem Klassenspezifizierer und zwei Elementspezifizierern hat mehr Gewicht als ein Selektor ohne ID, 500 Klassenspezifizierer und 1.000 Elementspezifizierer. Dies ist natürlich ein absurdes Beispiel, aber Sie bekommen die Idee. Der Punkt ist, dass die Anwendung dieses Konzepts Ihnen hilft, viel CSS zu bereinigen.

Übrigens ist das Hinzufügen des Elementbezeichners zur Klasse (div.title) nicht erforderlich, es sei denn, Sie stoßen auf Konflikte mit anderen Elementen mit class = "title". Fügen Sie kein unnötiges Gewicht hinzu, da Sie dieses Gewicht möglicherweise später verwenden müssen.

Darf Ich vorschlagen Less CSS Dynamic Framework ?

Es ähnelt SASS, wie bereits erwähnt.

Es hilft dabei, CSS pro übergeordneter Klasse beizubehalten.

Z.B

 #parent{     
  width: 100%;

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

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

Was dies bewirkt: Wendet die Breite: 100% auf # child1 und # child2 an.

Außerdem gehört # child1-spezifisches CSS zu #parent.

Dies würde zu rendern

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

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

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

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

1. CSS-Reset basierend auf Eric Meyers . (Da ich sonst finde, dass ich für die meisten Elemente mindestens eine oder zwei Regeln habe, die nur die Standardbrowserstile zurücksetzen - die meisten meiner Listen sehen beispielsweise nicht wie der Standard-HTML-Stil für Listen aus.)

2. Grid-System-CSS, wenn die Site dies erfordert. (Ich stütze meine auf 960.gs )

3. Stile für Komponenten, die auf jeder Seite angezeigt werden (Kopf- und Fußzeilen usw.)

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

5. Stile, die nur auf einzelnen Seiten relevant sind

Wie Sie sehen können, hängt das meiste davon vom Design der Site ab. Wenn das Design klar und organisiert ist, kann Ihr CSS sein. Wenn nicht, bist du geschraubt.

Meine Antwort ist hochrangig, um die hochrangigen Bedenken auszuräumen, die Sie in Ihrer Frage angesprochen haben. Möglicherweise gibt es einfache organisatorische Tricks und Optimierungen, die Sie vornehmen können, um sie schöner zu machen, aber keine davon kann methodische Mängel beheben. Es gibt verschiedene Faktoren, die die CSS-Explosion beeinflussen. Offensichtlich die Gesamtkomplexität der Site, aber auch Dinge wie Namenssemantik, CSS-Leistung, CSS-Dateiorganisation und Testbarkeit / Akzeptanz.

Sie scheinen mit der Namenssemantik auf dem richtigen Weg zu sein, aber es kann noch einen Schritt weiter gehen. HTML-Abschnitte, die ohne strukturelle Änderung wiederholt auf der Site angezeigt werden (als "Module" bezeichnet), können als Selektorwurzeln betrachtet werden, und von dort aus können Sie das interne Layout relativ zu diesem Stamm festlegen. Dies ist der Grundgedanke von objektorientiertem CSS , und Sie können in diesem Vortrag eines Yahoo-Ingenieurs mehr darüber lesen / sehen .

Es ist wichtig zu beachten, dass dieser saubere Ansatz dem Leistungsproblem zuwiderlaufen kann, das kurze Selektoren bevorzugt, die entweder auf der ID oder dem Tag-Namen basieren . Es liegt an Ihnen, dieses Gleichgewicht zu finden. Wenn Sie jedoch keine große Website haben, sollte dies nur eine Anleitung im Hinterkopf sein, die Sie daran erinnert, Ihre Selektoren kurz zu halten. Mehr zur Leistung hier .

Zuletzt wirst du eine haben einzelne CSS-Datei für Ihre gesamte Site oder mehrere Dateien (eine einzelne Basisdatei, die mit Dateien pro Seite oder Abschnitt verwendet wird)? Die einzelne Datei ist für die Leistung besser, aber für mehrere Teammitglieder möglicherweise schwieriger zu verstehen / zu warten und möglicherweise schwieriger zu testen. Zum Testen empfehle ich Ihnen, eine einzige CSS-Testseite zu haben , die alle unterstützten CSS-Module enthält, um Kollisionen und unbeabsichtigte Kaskadierungen zu testen.

Alternativ können Sie einen Ansatz mit mehreren Dateien verwenden , um die CSS-Regeln auf eine Seite oder einen Abschnitt zu beschränken. Dies erfordert, dass der Browser mehrere Dateien herunterlädt, was ein Leistungsproblem darstellt. Sie können die serverseitige Programmierung verwenden, um die CSS-Dateien dynamisch in einer einzelnen Datei anzugeben und zu aggregieren (und zu minimieren). Da diese Dateien jedoch getrennt sind und die Tests für sie getrennt wären, führen Sie die Möglichkeit eines inkonsistenten Erscheinungsbilds über Seiten / Abschnitte hinweg ein. Dadurch wird das Testen schwieriger.

Es liegt an Ihnen, die spezifischen Bedürfnisse des Kunden zu analysieren und diese Bedenken entsprechend auszugleichen.

Wie vor mir gesagt: Steigen Sie in OOCSS ein. Sass / Less / Compass ist verlockend zu verwenden, aber bis Vanille-CSS richtig verwendet wird, wird Sass / Less / Compass die Situation nur noch verschlimmern.

Informieren Sie sich zunächst über effizientes CSS. Probieren Sie Google Page Speed ​​aus und lesen Sie, was Souders über effizientes CSS geschrieben hat.

Geben Sie dann OOCSS ein.

• Lerne mit der Kaskade zu arbeiten. (Immerhin nennen wir es Cascading Stylesheets).
• Erfahren Sie, wie Sie die Granularität richtig einstellen (von unten nach oben statt von oben nach unten).
• Erfahren Sie, wie Sie Struktur und Haut trennen (was ist einzigartig und wie variieren diese Objekte?)
• Erfahren Sie, wie Sie Container und Inhalt trennen.
• Lerne Gitter zu lieben.

Es wird jedes einzelne Stück über das Schreiben von CSS revolutionieren. Ich bin total erneuert und liebe es.

UPDATE: SMACSS ähnelt OOCSS, ist aber im Allgemeinen einfacher anzupassen.

Die Kernprinzipien für sinnvolles CSS, extrahiert aus CSS Refactoring: Vom reinen Anhängen zum modularen CSS

Schreiben Sie in SASS. Sie wären verrückt, auf die Vorteile von Variablen, Mixins usw. zu verzichten.

Verwenden Sie niemals eine HTML-ID für das Styling. Verwenden Sie immer Klassen . Bei korrekter Verwendung werden HTML-IDs nur einmal auf der gesamten Seite angezeigt. Dies ist das genaue Gegenteil der Wiederverwendbarkeit - eines der grundlegendsten Güter in der vernünftigen Technik. Darüber hinaus ist es sehr schwierig, Selektoren mit IDs zu überschreiben. Oft besteht die einzige Möglichkeit, eine HTML-ID zu überwältigen, darin, eine andere ID zu erstellen, wodurch sich IDs in der Codebasis wie die Schädlinge verbreiten, die sie sind. Lassen Sie die HTML-IDs besser für unveränderte Javascript- oder Integrationstest-Hooks.

Benennen Sie Ihre CSS-Klassen nach ihrer visuellen Funktion und nicht nach ihrer anwendungsspezifischen Funktion.Sagen Sie zum Beispiel ".highlight-box" anstelle von ".bundle-product-discount-box". Auf diese Weise zu codieren bedeutet, dass Sie Ihre vorhandenen Stylesheets wiederverwenden können, wenn Sie Nebengeschäfte ausrollen. Zum Beispiel haben wir angefangen, Rechtsnotizen zu verkaufen, sind aber kürzlich zu Rechtslehrern gewechselt. Unsere alten CSS-Klassen hatten Namen wie ".download_document_box", ein Klassenname, der sinnvoll ist, wenn es um digitale Dokumente geht, aber nur verwirrend ist, wenn er auf die neue Domäne privater Tutoren angewendet wird. Ein besserer Name, der sowohl zu vorhandenen als auch zu zukünftigen Diensten passt, wäre ".pretty_callout_box".

Vermeiden Sie es, CSS-Klassen nach bestimmten Rasterinformationen zu benennen. In CSS-Communities gab (und gibt) es ein schreckliches Anti-Pattern, bei dem Designer und Entwickler von CSS-Frameworks (Husten Twitter Bootstrap ) glauben, dass "span-2" oder "cols-8" vernünftige Namen für CSS-Klassen sind. Der Zweck von CSS besteht darin, Ihnen die Möglichkeit zu geben, Ihr Design zu ändern, ohne das Markup (stark) zu beeinflussen. Das Hardcodieren von Rastergrößen in HTML vereitelt dieses Ziel. Daher wird davon abgeraten, Projekte durchzuführen, die voraussichtlich länger als ein Wochenende dauern. Mehr darüber, wie wir Gitterklassen später vermieden haben.

Teilen Sie Ihr CSS auf mehrere Dateien auf . Idealerweise würden Sie alles in "Komponenten" / "Widgets" aufteilen und dann Seiten aus diesen Atomen des Designs zusammenstellen. Realistisch gesehen werden Sie jedoch feststellen, dass einige Ihrer Webseiten Besonderheiten aufweisen (z. B. ein spezielles Layout oder eine seltsame Fotogalerie, die nur in einem Artikel enthalten ist). In diesen Fällen können Sie eine Datei erstellen, die sich auf diese bestimmte Seite bezieht, und erst dann in ein vollständiges Widget umgestalten, wenn klar wird, dass das Element an anderer Stelle wiederverwendet wird. Dies ist ein Kompromiss, der durch praktische Haushaltsbedenken motiviert ist.

Verschachtelung minimieren. Führen Sie neue Klassen ein, anstatt Selektoren zu verschachteln. Die Tatsache, dass SASS die Schmerzen beim Wiederholen von Selektoren beim Verschachteln beseitigt, bedeutet nicht, dass Sie fünf Ebenen tief verschachteln müssen. Überqualifizieren Sie niemals einen Selektor (z. B. verwenden Sie nicht "ul.nav", wobei ".nav" den gleichen Job ausführen könnte). Geben Sie keine HTML-Elemente neben dem benutzerdefinierten Klassennamen an (z. B. "h2.highlight"). Verwenden Sie stattdessen nur den Klassennamen und lassen Sie den Basis-Selektor fallen (z. B. sollte das vorherige Beispiel ".highlight" sein). Überqualifizierende Selektoren bringen keinen Mehrwert.

Erstellen Sie Stile für HTML-Elemente (z. B. "h1") nur, wenn Sie Basiskomponenten formatieren, die in der gesamten Anwendung konsistent sein sollten. Vermeiden Sie breite Selektoren wie "header ul", da Sie diese wahrscheinlich an einigen Stellen sowieso überschreiben müssen. Wie wir immer wieder sagen, möchten Sie die meiste Zeit eine bestimmte, gut benannte Klasse verwenden, wenn Sie einen bestimmten Stil wünschen.

Lernen Sie die Grundlagen des Block-Element-Modifikators kennen. Sie können zum Beispiel hier darüber lesen. Wir haben es ziemlich leicht benutzt, aber es hat uns trotzdem sehr geholfen, CSS-Stile zu organisieren.

Oft sehe ich Personen, die die Datei in Abschnitte aufteilen, mit einem Überschriftenkommentar zwischen den Abschnitten.

Etwas wie

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

Es funktioniert ziemlich gut und kann es einfacher machen, später zurückzukehren und zu finden, woran Sie arbeiten.

Sie sollten sich BEM ansehen .

Theorie

BEM ist ein Versuch, eine Reihe von Anweisungen zum Organisieren und Benennen von CSS-Selektoren bereitzustellen, um die Wiederverwendbarkeit und Modularität zu verbessern und Konflikte zwischen Selektoren zu vermeiden, die häufig zu Spaghetti-Code und Spezifitätsproblemen führen.

Wenn es richtig verwendet wird, hat es tatsächlich einige sehr positive Effekte.

• Stile tun, was Sie erwarten, wenn sie einem Element hinzugefügt werden
• Stile lecken nicht und wirken sich nur auf das aus, zu dem sie hinzugefügt wurden
• Stile sind vollständig von der Dokumentstruktur entkoppelt
• Stile müssen nicht gezwungen werden, sich gegenseitig zu überschreiben

BEM arbeitet gut mit SASS zusammen, um CSS einen fast objektorientierten Stil zu verleihen. Sie können modulare Dateien erstellen, die die Anzeige eines einzelnen UI-Elements verwalten und Variablen wie Farben und Methoden wie den Umgang mit internen Elementen enthalten. Während ein Hardcore-OO-Programmierer dieser Idee widersprechen könnte, bringen die angewandten Konzepte tatsächlich viele der schöneren Teile von OO-Strukturen mit, wie Modularität, lose Kopplung und enge Kohäsion sowie kontextfreie Wiederverwendbarkeit. Mit Sass und dem Operato können Sie sogar so erstellen, dass es wie ein gekapseltes Objekt aussieht& r.

Einen ausführlicheren Artikel aus dem Smashing Magazine finden Sie hier . und einer von Harry Roberts von CCS Wizardry (von dem jeder, der an CSS beteiligt ist, lesen sollte) ist hier .

In der Praxis

Ich habe dies mehrmals verwendet, zusammen mit SMACSS und OOCSS, was bedeutet, dass ich auch etwas zum Vergleichen habe. Ich habe auch in einigen großen Schwierigkeiten gearbeitet, oft von meiner eigenen, unerfahrenen Kreation.

Wenn ich BEM in der realen Welt verwende, erweitere ich die Technik um ein paar zusätzliche Prinzipien. Ich verwende Utility-Klassen - ein gutes Beispiel ist eine Wrapper-Klasse:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

Und ich verlasse mich auch etwas auf die Kaskade und Spezifität. Hier wäre das BEM-Modul .primary-boxund das .headerwäre der Kontext für eine bestimmte Übersteuerung

.header {
  .primary-box {
    color: #000;
  }
}

(Ich bemühe mich, alles so allgemein und kontextfrei wie möglich zu gestalten, was bedeutet, dass ein gutes Projekt fast alles in den Modulen enthält, die wiederverwendbar sind.)

Ein letzter Punkt, den ich hier ansprechen möchte, ist, dass Sie dies aus zwei Gründen von Anfang an tun sollten, so klein und unkomplex Ihr Projekt auch erscheinen mag:

• Projekte werden immer komplexer, daher ist es wichtig, gute Grundlagen zu legen, einschließlich CSS
• Selbst ein Projekt, das einfach erscheint, weil es auf WordPress basiert und wenig JavaScript enthält, kann im CSS immer noch sehr komplex sein - OK, Sie müssen keine serverseitige Codierung vornehmen, sodass dieser Teil einfach ist, aber das Frontend der Broschüre verschleißt hat zwanzig Module und jeweils drei Variationen: Sie haben dort einige sehr komplexe CSS!

Webkomponenten

Ab 2015 beschäftigen wir uns mit Webkomponenten. Ich weiß noch nicht viel darüber, aber sie versuchen, alle Front-End-Funktionen in eigenständigen Modulen zusammenzuführen und effektiv zu versuchen, die Prinzipien von BEM auf das Front-End als Ganzes anzuwenden und dispergiert, aber vollständig gekoppelt zu komponieren Elemente wie DOM-Fragmente, Js (MVC) und CSS, die alle dasselbe UI-Widget erstellen.

Auf diese Weise werden sie einige der ursprünglichen Probleme beheben, die mit CSS bestehen und die wir mit Dingen wie BEM zu lösen versucht haben, während einige der anderen Front-End-Architekturen vernünftiger werden.

Hier gibt es eine weitere Lektüre und hier auch ein Framework- Polymer, das einen Blick wert ist

Schließlich

Ich denke auch, dass dies ein ausgezeichneter, moderner Best-Practice-CSS-Leitfaden ist, der speziell entwickelt wurde, um zu verhindern, dass große CSS-Projekte chaotisch werden. Ich versuche, den meisten davon zu folgen.

Ich würde Ihnen empfehlen, sich das CSS-Framework "Compass Style" anzusehen .

Hier gibt es großartiges Material, und einige haben viel Zeit in Anspruch genommen, um diese Frage zu beantworten. Wenn es jedoch um separate oder einzelne Stylesheets geht, würde ich separate Dateien für die Entwicklung verwenden und dann alle Ihre generischen CSS-Dateien zusammenführen, die auf der gesamten Website verwendet werden bei der Bereitstellung in eine einzelne Datei.

Auf diese Weise haben Sie das Beste aus beiden Welten, steigern die Leistung (weniger HTTP-Anforderungen werden vom Browser angefordert) und trennen Codeprobleme während der Entwicklung.