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

Die Grundprinzipien für sinnvolles CSS, entnommen aus CSS-Refactoring: Vom reinen Anhängen zum modularen CSS

Schreiben Sie in SASS. Es wäre verrückt, auf die Vorteile von Variablen, Mixins und so weiter zu verzichten.

Verwenden Sie niemals eine HTML-ID für die Gestaltung; verwenden Sie immer Klassen . HTML-IDs erscheinen, wenn sie korrekt verwendet werden, nur einmal auf der gesamten Seite, nämlich in der Gegenteil von Wiederverwendbarkeit - eines der grundlegendsten Güter der vernünftiger Technik. Außerdem ist es sehr schwierig, Selektoren zu überschreiben die IDs enthalten, zu überschreiben, und oft ist die einzige Möglichkeit, eine HTML-ID zu überschreiben eine weitere ID zu erstellen, wodurch sich IDs in der Codebasis wie die Schädlinge, die sie sind. Besser ist es, die HTML-IDs für unveränderliches Javascript oder Integrationstest-Haken.

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". Diese Art der Kodierung bedeutet dass Sie Ihre bestehenden Stylesheets wiederverwenden können, wenn Sie Nebengeschäften. Wir haben zum Beispiel mit dem Verkauf von Gesetzestexten begonnen, aber haben aber vor kurzem in den Bereich der Nachhilfe für Juristen gewechselt. Unsere alten CSS-Klassen hatten Namen wie ".download_document_box", ein Klassenname, der sinnvoll ist, wenn es um über digitale Dokumente sinnvoll ist, aber nur verwirren würde, wenn er auf den neuen Bereich der privaten Nachhilfelehrer. Ein besserer Name, der sowohl für bestehende Dienste - und alle zukünftigen - passt, wäre ".pretty_callout_box".

Vermeiden Sie es, CSS-Klassen nach bestimmten Rasterinformationen zu benennen. In CSS-Gemeinschaften gab es (und gibt es immer noch) ein schreckliches Anti-Muster, bei dem Designer und Schöpfer von CSS-Frameworks (hüstel Twitter Bootstrap ) glauben, dass "span-2" oder "cols-8" vernünftige Namen für CSS sind Klassen sind. Der Sinn von CSS ist es, Ihnen die Möglichkeit zu geben, die Ihr Design zu verändern, ohne das Markup (stark) zu beeinflussen. Festcodierung von Rastern Größen im HTML konterkariert dieses Ziel, daher wird davon abgeraten, bei jedem Projekt, das länger als ein Wochenende dauern soll. Mehr dazu, wie wir die Raster-Klassen vermieden haben, später.

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. Design zusammensetzen. Realistischerweise werden Sie jedoch feststellen, dass einige Ihrer Website Seiten Eigenheiten haben (z. B. ein spezielles Layout oder eine seltsame Fotogalerie Galerie, die nur in einem Artikel erscheint). In diesen Fällen könnten Sie eine Datei erstellen, die sich auf diese spezielle Seite bezieht und erst dann in ein Widget umgestaltet, wenn klar wird, dass das Element an anderer Stelle anderswo wiederverwendet wird. Dies ist ein Kompromiss, der durch praktische praktische Budgetbedenken.

Minimierung der Verschachtelung. Einführung neuer Klassen anstelle der Verschachtelung von Selektoren. Die Tatsache, dass SASS den Schmerz der Wiederholung von Selektoren beseitigt beim Verschachteln beseitigt, bedeutet nicht, dass man fünf Ebenen tief verschachteln muss. Überqualifizieren Sie niemals einen Selektor (z.B. verwenden Sie nicht "ul.nav", wenn ".nav" die gleiche Aufgabe erfüllen könnte). Und geben Sie keine HTML-Elemente neben dem benutzerdefinierten Klassennamen (z. B. "h2.highlight"). Verwenden Sie stattdessen nur den Klassennamen Namen allein und lassen Sie den Basis-Selektor weg (z.B. das vorherige Beispiel sollte ".highlight" sein). Das Überqualifizieren von Selektoren fügt keine Wert.

Erstellen Sie Stile für HTML-Elemente (z.B. "h1") nur bei der Gestaltung von Basiskomponenten, die in der gesamten Anwendung konsistent sein sollten. Vermeiden Sie weit gefasste Selektoren wie "header ul", denn es ist wahrscheinlich, dass Sie sie an einigen Stellen ohnehin überschreiben müssen. Wie wir immer wieder sagen, die meiste Zeit wollen Sie meistens eine bestimmte, gut benannte Klasse verwenden, wenn Sie einen bestimmten Stil wünschen.

Machen Sie sich die Grundlagen des Block-Element-Modifiers zu eigen. Sie können zum Beispiel hier darüber lesen. Wir haben es nur sehr sparsam eingesetzt, aber es hat uns uns bei der Organisation von CSS-Stilen sehr geholfen.

Answer 2

Häufig erlebe ich, dass einzelne Personen die Datei in Abschnitte unterteilen und zwischen den Abschnitten eine Überschrift anbringen.

Etwas wie

/* Headings and General Text */

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

/* Main page layout */

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

Das funktioniert sehr gut und macht es einfach, später noch einmal nachzuschauen, woran man gerade arbeitet.

Answer 3

Sie sollten sich ansehen BEM .

Theorie

BEM ist ein Versuch, eine Reihe von Anweisungen für die Organisation und Benennung von CSS-Selektoren bereitzustellen, um die Wiederverwendbarkeit und Modularität zu verbessern und Zusammenstöße zwischen Selektoren zu vermeiden, die oft zu Spaghetti-Code und Spezifitätsproblemen führen.

Bei richtiger Anwendung hat es sogar einige sehr positive Auswirkungen.

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

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 behandeln und Variablen wie Farben und "Methoden" enthalten, z. B. wie interne Elemente behandelt werden. Ein eingefleischter OO-Programmierer mag diese Idee vielleicht ablehnen, aber die angewandten Konzepte bringen viele der schönen Seiten von OO-Strukturen mit sich, wie Modularität, lose Kopplung und enge Kohäsion sowie kontextfreie Wiederverwendbarkeit. Sie können sogar auf eine Art und Weise bauen, die wie ein gekapseltes Objekt aussieht, indem Sie Sass und die & operato r.

Ein ausführlicherer Artikel aus dem Smashing Magazine findet sich unter hier gefunden und einer von Harry Roberts von CCS Wizardry (den jeder, der sich mit css beschäftigt, lesen sollte) ist hier .

In der Praxis

Ich habe dies mehrmals benutzt, zusammen mit SMACSS und OOCSS, was bedeutet, dass ich etwas habe, um sie zu vergleichen. Ich habe auch in einigen großen Schlamasseln gearbeitet, die oft von mir selbst und meinen Unerfahrenen verursacht wurden.

Wenn ich BEM in der realen Welt einsetze, ergänze ich die Technik um einige zusätzliche Prinzipien. Ich verwende Hilfsklassen - 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 ein wenig auf die Kaskade und die Spezifität. Hier würde das BEM-Modul lauten .primary-box et le .header wäre der Kontext für eine spezifische Übersteuerung

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

(Ich versuche mein Bestes, um alles so generisch und kontextfrei wie möglich zu machen, was bedeutet, dass ein gutes Projekt fast alles in den Modulen ist, die wiederverwendbar sind)

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

• Projekte werden immer komplexer, daher ist eine gute Grundlage wichtig, auch für CSS.
• Selbst ein Projekt, das einfach erscheint, weil es auf WordPress aufbaut und nur wenig JavaScript enthält, kann im CSS sehr komplex sein - OK, Sie müssen keine serverseitige Programmierung vornehmen, also ist dieser Teil einfach, aber das Frontend der Broschürenbekleidung besteht aus zwanzig Modulen und drei Variationen von jedem: Sie haben hier ein sehr komplexes CSS!

Web-Komponenten

Im Jahr 2015 beginnen wir, uns mit Webkomponenten zu beschäftigen. Ich weiß noch nicht sehr viel über diese, aber sie scheinen alle Frontend-Funktionen in eigenständigen Modulen zu vereinen. Dabei wird effektiv versucht, die Grundsätze von BEM auf das Frontend als Ganzes anzuwenden und verstreute, aber vollständig gekoppelte Elemente wie DOM-Fragmente, Js (MVC) und CSS zu komponieren, die alle dasselbe UI-Widget bilden.

Auf diese Weise werden sie einige der ursprünglichen Probleme mit CSS angehen, die wir mit Dingen wie BEM zu lösen versucht haben, während sie gleichzeitig einige der anderen Frontend-Architekturen vernünftiger machen.

Hier finden Sie weitere Lektüre aquí und auch einen Rahmen Polymer hier der einen Blick wert ist

Endlich

Ich denke auch, dass dies ein ausgezeichneter, moderner css-Leitfaden für bewährte Verfahren - speziell entwickelt, um zu verhindern, dass große CSS-Projekte unübersichtlich werden. Ich versuche, die meisten von ihnen zu befolgen.

Answer 4

Ich empfehle Ihnen einen Blick auf CSS-Framework "Kompass-Stil" .

Answer 5

Es gibt einiges großartiges Material hier und einige haben viel Zeit für die Beantwortung dieser Frage genommen, aber wenn es darum geht, entweder getrennte oder individuelle Stylesheets zu verwenden, würde ich mit getrennten Dateien für die Entwicklung gehen und dann dazu übergehen, alle Ihre generischen CSS, die über die Website verwendet werden, in einer einzigen Datei zusammenzuführen, wenn sie bereitgestellt werden.

Auf diese Weise haben Sie das Beste aus beiden Welten, erhöht die Leistung (weniger HTTP-Anforderungen, die vom Browser angefordert werden) und Trennung von Code Bedenken bei der Entwicklung.