it-swarm.com.de

CSS-Explosion verwalten

Ich habe mich bei einer Website, an der ich arbeite, stark auf CSS verlassen. Im Moment werden alle CSS-Stile auf Tag-Basis angewendet, und deshalb versuche ich jetzt, 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 fällt mir immer schwerer zu entscheiden, wie ich Daten in der CSS-Datei am besten organisieren und abstrahieren kann.

Ich verwende eine große Anzahl von div Tags innerhalb der Website, die von einer stark tabellenbasierten Website stammen. Daher bekomme ich 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 als Anfänger habe ich mich gefragt, ob ich Empfehlungen geben kann, 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 zur Beschleunigung der Webentwicklung zu demonstrieren. Auf diese Weise werden auch andere Personen, die möglicherweise in Zukunft an dieser Site arbeiten, gute Codierungspraktiken anwenden, anstatt sie wie ich anwenden zu müssen.

678
JasCav

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.

Die folgenden Regeln versuche ich selbst einzuhalten (nicht, dass ich es immer schaffe.)

  • Früh refaktorieren, oft refaktorieren. CSS-Dateien häufig bereinigen, mehrere Definitionen derselben Klasse zusammenführen. Veraltete Definitionen entfernen sofort.

  • Hinterlassen Sie beim Hinzufügen von CSS während der Fehlerbehebung einen Kommentar zu den Auswirkungen der Änderung ("Damit soll sichergestellt werden, dass das Kästchen in IE <7") ausgerichtet bleibt.

  • Vermeiden Sie Redundanzen, z. dasselbe definieren in .classname und .classname:hover.

  • Verwenden Sie Kommentare /** Head **/ um eine klare Struktur aufzubauen.

  • Verwenden Sie ein Prettifier-Tool, mit dem Sie einen konstanten Stil beibehalten können. Ich benutze Polystyle , womit ich ziemlich zufrieden bin (kostet 15 $, ist aber gut angelegtes Geld). Ich bin mir sicher, dass es auch kostenlose gibt (Update: wie zum Beispiel Code Beautifier basierend auf CSS Tidy , ein Open-Source-Tool, das ich selbst noch nicht benutzt habe, aber sehr interessant aussehe.)

  • Bauen Sie vernünftige Klassen. 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 so niedrig wie möglich (z. B. eine Standardschriftfamilie, -farbe und -größe in body) und verwenden Sie inherit, wo dies möglich ist

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

  • Wenn Sie in einem Team arbeiten, unterstreichen Sie die Notwendigkeit von Qualität und Standards auch für CSS-Dateien. Jeder kennt die Kodierungsstandards seiner Programmiersprache (n) sehr gut, aber es gibt wenig Bewusstsein dafür, dass dies auch für CSS erforderlich ist.

  • Wenn Sie in einem Team arbeiten, sollten Sie do die Versionskontrolle in Betracht ziehen. Dies erleichtert die Nachverfolgung und die Lösung von Konflikten. Es lohnt sich wirklich, auch wenn Sie sich "nur" für HTML und CSS interessieren.

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

Aufbau vernünftiger Klassen

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. den oberen Bereich, das Menü, den Inhalt und die Fußzeile. Wenn ich gutes Markup geschrieben habe, sind diese Bereiche identisch mit der HTML-Struktur.

Dann beginne ich mit der Erstellung von CSS-Klassen, indem ich so viele Abstammungen wie möglich und sinnvoll spezifiziere und verwandte Klassen so genau wie möglich gruppiere.

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 tree 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 stehen alle nebeneinander (im Gegensatz zum Standard-Rendering eines ul). Außerdem enthält keines der Menüs Aufzählungszeichen (list-style-type).

Definieren Sie zuerst die common 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 Eigenschaften der drei Menüs. Level 1 ist 40 Pixel groß; Ebenen 2 und 3 20 Pixel.

Hinweis: Sie können auch mehrere Klassen verwenden, aber Internet Explorer 6 hat Probleme mit mehreren Klassen , daher wird in diesem Beispiel verwendet ids.

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 Sie semantisch ähnliche Elemente auf der Seite haben - wie diese drei Menüs -, versuchen Sie zunächst, die Gemeinsamkeiten zu erarbeiten und sie einer Klasse zuzuordnen. Erarbeiten Sie dann die spezifischen Eigenschaften und wenden Sie sie auf Klassen oder, falls Sie Internet Explorer 6 unterstützen müssen, IDs an.

Verschiedene HTML-Tipps

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

  • Wenn möglich, geben Sie jedem Seitenrumpf eine eigene Klasse: <body class='contactpage'> Dies macht es sehr einfach, seitenbezogene Optimierungen zum Stylesheet 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. Beispielsweise:

    <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 gemäß seinem semantischen Kontext zu formatieren: Ob es sich um das erste oder das letzte Element in der Liste handelt; Gibt an, ob es sich um das derzeit aktive Element handelt. und nach Nummer.

Anmerkung dass diese Zuweisung mehrerer Klassen wie im obigen Beispiel beschrieben funktioniert in IE6 nicht richtig . Es gibt eine Problemumgehung , um IE6 in die Lage zu versetzen, mit mehreren Klassen umzugehen. Ich habe es noch nicht ausprobiert, aber es sieht sehr vielversprechend aus, von Dean Edwards. Bis dahin müssen Sie die für Sie wichtigste Klasse festlegen (Artikelnummer, aktiv oder zuerst/zuletzt) ​​oder auf IDs zurückgreifen. (booo IE6!)

558
Pekka 웃

Hier sind nur 4 Beispiele:

Zu allen 4 meiner Antwort gehörte der Ratschlag, Natalie Downes PDF CSS Systems . (Die PDF enthält Tonnen von Notizen nicht in den Folien, also lesen Sie das PDF!) Beachten Sie ihre Vorschläge für die Organisation.

EDIT (2014/02/05) vier Jahre später würde ich sagen:

  • Verwenden Sie einen CSS-Pre-Prozessor und verwalten Sie Ihre Dateien als Teilergebnisse (ich persönlich bevorzuge Sass mit Compass, aber Less ist auch ganz gut und es gibt andere)
  • Lesen Sie Konzepte wie OOCSS , SMACSS und BEM oder getbem .
  • Schauen Sie sich an, wie gängige CSS-Frameworks wie Bootstrap und Zurb Foundation aufgebaut sind. Und nicht weniger beliebte Frameworks rabattieren - Inuit ist interessant, aber es gibt viele andere.
  • Kombinieren/verkleinern Sie Ihre Dateien mit einem Build-Schritt auf einem Continuous Integration Server und/oder einem Task-Runner wie Grunt oder Gulp.
88
Andy Ford

Schreiben Sie keine Überschriften in CSS

Teile einfach in Dateien auf. 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 auch eine schöne Verzeichnisstruktur haben und Ihr Skript nur rekursiv nach .css - Dateien suchen lassen.

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

Die Überschriften im Inhaltsverzeichnis sollten genau den Überschriften entsprechen, die Sie später schreiben. Es ist eine Qual, nach Überschriften zu suchen. Wie genau soll jemand wissen, dass Sie nach Ihrem ersten Header einen weiteren Header haben? ps. Fügen Sie beim Schreiben von Inhaltsverzeichnissen am Anfang jeder Zeile kein doc-like * (Sternchen) 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

Zuallererst, 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 Textblock 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

Komponenten sollten die meiste Zeit position:relative, Kein padding und kein margin haben. Dies vereinfacht% rules erheblich und ermöglicht eine viel einfachere absolute:position - Eingabe von Elementen, da das absolut positionierte Element bei der Berechnung von top, right, bottom, left.

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

Eine Komponente kann auch als eigenständige 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 QS-Seite:

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

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

Fügen Sie Regeln mit kumulativem Effekt in dieselbe Zeile ein.

Beispiel: border, margin und padding (jedoch nicht outline) erhöhen alle die Abmessungen und die Größe des Elements, das Sie stylen.

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

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

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

Verwenden Sie, wenn möglich, eine Kurzschrift:

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

Niemals einen Selektor wiederholen

Wenn Sie mehr Instanzen desselben Selektors haben, ist die Wahrscheinlichkeit groß, dass Sie unvermeidlich mehrere Instanzen der gleichen Regeln haben. Beispielsweise:

#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 id/classes verwenden können

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

Dies...

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 werden:

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

Da die zusätzlichen DIVs dort baumeln, wird dem Selektor nichts hinzugefügt. Sie erzwingen auch eine unnötige Tag-Regel. Wenn Sie beispielsweise .answer Von div in article ändern, 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 Eigenschaft border-collapse Eine spezielle Eigenschaft ist, die nur dann sinnvoll ist, wenn sie auf eine table angewendet wird. Wenn .statistics Kein table ist, sollte es nicht zutreffen.

Generische Regeln sind böse!

  • vermeiden Sie es, allgemeine/magische Regeln zu schreiben, wenn Sie können
  • sofern es sich nicht um einen CSS-Reset/Unreset handelt, sollte Ihre 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 angewendet wird. Dies hat jedoch keine Garantie, dass Ihre Regel später nicht mit Ihnen in Konflikt gerät.

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

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 benutze gerne IDs, wenn eine mir bekannte Komponente ein Singleton auf einer Seite ist. Ihre Bedürfnisse können unterschiedlich sein.

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

Nehmen wir an, Sie haben eine Komponente pagination. 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 display:block Verknüpfen die einzelnen Seitenzahlen und geben ihnen einen dunkelgrauen Hintergrund. Damit sie sichtbar sind, müssen Sie Regeln wie diese haben:

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

Nehmen wir nun an, 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 wollen.

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 "Logik" -Kommentare funktionieren nicht :)

Wenn Sie so 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.

Halte deine Kommentare einfach; Wenn Sie "logische Operationen" benötigen, ziehen Sie eine dieser CSS-Template-Sprachen in Betracht wie SASS oder LESS .

Wie schreibe ich eine Farbpalette?

Lass das bis zum Ende. Haben Sie eine Datei für Ihre gesamte Farbpalette. Ohne diese Datei sollte Ihr Stil noch eine brauchbare Farbpalette in den Regeln haben. Ihre Farbpalette sollte überschreiben. Sie verketten Selektoren mit einer sehr übergeordneten Komponente (zB #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 vom Basisstil unabhängig ist, in den Sie cascade.

Weniger Namen, weniger Speicherplatz, dadurch besser lesbar

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

Ich finde auch, dass die Kombination von einfachen Wörtern einfacher zu verstehen ist, als eine Suppe von langen "passenden" Wörtern: Postbody, Postkopf, Benutzerinfo usw.

Halten Sie den Wortschatz so klein, auch wenn ein Fremder (wie Sie selbst nach ein paar Wochen) hereinkommt, um Ihre Stilsuppe zu lesen. Zum Beispiel verwende ich .this, Wenn ein Element angeblich "der ausgewählte Artikel" oder "der aktuelle Artikel" ist usw.

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 bereinigen, oder der Müllcode wird sich nur häufen. Entfernen Sie nicht verwendete Klassen/IDs. Entfernen Sie nicht verwendete CSS-Regeln. Stellen Sie sicher, dass alles in Ordnung 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 aufbewahrt haben (oder eine Datei ordnungsgemäß mit einem Inhaltsverzeichnis und Kopfzeilen aufgeteilt haben), dann Ihre die 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 einige der in Ihren CSS-Kernwaffen und -Karnies versteckten Junk-E-Mails zu finden.

Behalten Sie eine unsorted.css - Datei

Angenommen, Sie gestalten eine QS-Site und haben bereits ein Stylesheet für die "Antwortseite", die wir answers.css Nennen. Wenn Sie jetzt viele neue CSS-Dateien hinzufügen müssen, fügen Sie diese dem Stylesheet unsorted.css Hinzu und fügen Sie sie in Ihr Stylesheet answers.css Ein.

Mehrere Gründe dafür:

  • nachdem Sie fertig sind, können Sie die Umgestaltung beschleunigen, nach Regeln suchen (die wahrscheinlich nicht existieren) und Code einfü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 doppelten Regeln/Selektoren
73
srcspider

Schauen Sie sich 1. SASS 2. Compass an

55
Zimbabao

Der beste Weg, um CSS bloat entgegenzuwirken, ist die Verwendung objektorientierter CSS-Prinzipien.

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

Einige der Ideologien stehen im Widerspruch zu den oben genannten Aussagen, aber wenn Sie erst einmal wissen, wie man CSS objektorientiert entwirft, werden Sie feststellen, dass es tatsächlich funktioniert, um den Code schlank und gemein zu halten.

Der Schlüssel hierbei ist, "Objekte" oder Bausteinmuster in Ihrer Site und Ihrem Architekten damit zu identifizieren.

Facebook beauftragte den Entwickler von OOCSS, Nicole Sullivan , um beim Front-End-Code (HTML/CSS) erhebliche Einsparungen zu erzielen. Ja, Sie können nicht nur in Ihrem CSS, sondern auch in Ihrem HTML-Code Einsparungen erzielen. Dies ist nach dem Klang des CSS-Codes sehr gut möglich, wenn Sie die Konvertierung eines table-basierten Layouts in viele div 's

Ein weiterer großartiger Ansatz, der in einigen Aspekten OOCSS ähnelt, besteht darin, Ihr CSS von Anfang an so zu planen und zu schreiben, dass es skalierbar und modular ist. Jonathan Snook hat ein brillantes Buch/eBook über SMACSS - Skalierbare und modulare Architektur für CSS geschrieben

Lass mich dich mit ein paar Links verbinden:
5 Fehler von massivem CSS - (Video)
5 Fehler von massivem CSS - (Folien)
CSS Bloat - (Folien)

31
Moin Zaman

Sie sollten auch die Kaskade und das Gewicht verstehen und wissen, wie sie funktionieren.

Ich stelle fest, dass Sie nur Klassenkennungen (div.title) verwenden. Wussten Sie, dass Sie auch IDs verwenden können und dass eine ID mehr Gewicht hat als eine Klasse?

Beispielsweise,

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

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

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

Stellen Sie es sich wie Ziffern vor. Eine 9 in der Einsen-Spalte ist immer noch kleiner als eine Eins in der Zehner-Spalte. Ein Selektor mit einem ID-Bezeichner, einem Klassenbezeichner und zwei Elementbezeichnern hat mehr Gewicht als ein Selektor ohne ID, 500 Klassenbezeichner und 1.000 Elementbezeichner. Dies ist natürlich ein absurdes Beispiel, aber Sie haben die Idee. Der Punkt ist, dass die Anwendung dieses Konzepts Ihnen hilft, eine Menge CSS aufzuräumen.

Übrigens ist das Hinzufügen des Elementspezifizierers zur Klasse (div.title) nur erforderlich, wenn Konflikte mit anderen Elementen auftreten, die class = "title" aufweisen. Fügen Sie kein unnötiges Gewicht hinzu, da Sie dieses Gewicht möglicherweise später verwenden müssen.

16
Robusto

Darf ich vorschlagen Weniger CSS Dynamic Framework

Es ähnelt SASS, wie bereits erwähnt.

Es hilft dabei, CSS pro übergeordneter Klasse zu verwalten.

Z.B.

 #parent{     
  width: 100%;

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

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

Was dies bewirkt: Wendet width: 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;
}
13
Abhishek Mehta

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 Ihre Klassennamen und Ihre CSS-Struktur daraus ergeben. Aber wenn die Leute im Laufe der Zeit zufällig kleine Teile zur Site hinzufügen, die wenig Sinn ergeben, 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 . (Weil ich ansonsten für die meisten Elemente mindestens eine oder zwei Regeln gefunden habe, die nur die Standardbrowser-Stile 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 verlangt. (Ich stütze mich 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 Website verwendet werden

  5. Stile, die nur auf einzelnen Seiten relevant sind

Wie Sie sehen, hängt das meiste davon ab, wie die Site gestaltet ist. Wenn das Design klar und übersichtlich ist, kann es Ihr CSS sein. Wenn nicht, sind Sie fertig.

12
Paul D. Waite

Ich antworte auf höchster Ebene, um die in Ihrer Frage angesprochenen Bedenken auszuräumen. Möglicherweise gibt es organisatorische Tricks auf niedriger Ebene und Tweak, die Sie durchführen können, um sie hübscher 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 Sie können noch einen Schritt weiter gehen. HTML-Abschnitte, die auf der Site wiederholt ohne strukturelle Änderung angezeigt werden (als "Module" bezeichnet), können als Auswahlstamm betrachtet werden, und von dort aus können Sie das interne Layout in Bezug auf diesen Stamm festlegen. Dies ist der Grundgedanke von objektorientiertem 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 dem Leistungsaspekt zuwiderlaufen kann, der kurze Selektoren bevorzugt , die entweder auf der ID oder dem Tag-Namen basieren . Es liegt an Ihnen, dieses Gleichgewicht zu finden, aber es sei denn, Sie haben eine massive Website, sollte dies nur eine Anleitung im Hinterkopf sein, die Sie daran erinnert, Ihre Selektoren kurz zu halten. Mehr zur Performance hier .

Zu guter Letzt erhalten Sie eine einzelne CSS-Datei für Ihre gesamte Site oder mehrere Dateien (eine einzelne Basisdatei, die mit pro Seite oder Abschnitt verwendet wird) Dateien)? Die Leistung einer einzelnen Datei ist besser, sie ist jedoch bei mehreren Teammitgliedern möglicherweise schwieriger zu verstehen/zu warten und zu testen. Zum Testen empfehle ich eine einzelne CSS-Testseite , die jedes unterstützte CSS-Modul zum Testen von Kollisionen und unbeabsichtigten Kaskadierungen enthält.

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. Mithilfe der serverseitigen Programmierung können Sie die CSS-Dateien angeben und dynamisch zu einer einzigen Datei zusammenfassen (und verkleinern). Da diese Dateien jedoch getrennt sind und das Testen für sie getrennt erfolgen würde, besteht die Möglichkeit eines inkonsistenten Erscheinungsbilds über Seiten/Abschnitte hinweg. Somit wird das Testen schwieriger.

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

7
G-Wiz

Wie gesagt vor mir: Steig in OOCSS ein. Sass/Less/Compass ist verlockend zu verwenden, aber bis Vanilla CSS richtig eingesetzt wird, wird Sass/Less/Compass nur noch schlimmer.

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

Geben Sie dann OOCSS ein.

  • Lernen Sie 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 welche Variationen gibt es bei diesen Objekten?)
  • Erfahren Sie, wie Sie Container und Inhalt trennen.
  • Lerne Gitter zu lieben.

Es wird jedes einzelne Bit beim Schreiben von CSS revolutionieren. Ich bin total erneuert und liebe es.

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

5
madr

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

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

Verwenden Sie niemals eine HTML-ID zum Stylen. Verwenden Sie immer Klassen . Bei korrekter Verwendung werden HTML-IDs nur einmal auf der gesamten Seite angezeigt. Dies ist das völlige Gegenteil der Wiederverwendbarkeit - eines der grundlegendsten Merkmale des vernünftigen Engineerings. Darüber hinaus ist es sehr schwierig, Selektoren mit IDs zu überschreiben. Oft besteht die einzige Möglichkeit, eine HTML-ID zu überschreiben, darin, eine andere ID zu erstellen, wodurch sich IDs wie die Schädlinge in der Codebasis ausbreiten. Es ist besser, die HTML-IDs für unveränderte JavaScript- oder Integrationstest-Hooks zu belassen.

Benennen Sie Ihre CSS-Klassen nach ihrer visuellen Funktion und nicht nach ihrer anwendungsspezifischen Funktion. Sagen Sie beispielsweise ".highlight-box" anstelle von ".bundle" -Produkt-Rabatt-Box ". Wenn Sie auf diese Weise codieren, können Sie Ihre vorhandenen Stylesheets wiederverwenden, wenn Sie Nebengeschäfte abwickeln. Zum Beispiel haben wir angefangen, Rechtsanwaltsnotizen zu verkaufen, sind aber kürzlich zu Rechtsanwaltslehrern 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 der Privatlehrer 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 immer noch) ein schreckliches Anti-Pattern, bei dem Designer und Entwickler von CSS-Frameworks ( Husten Twitter Bootstrap) glauben, dass "span-2" oder "cols-8" sinnvolle Namen für CSS-Klassen sind. Der Sinn von CSS ist es, Ihnen die Möglichkeit zu geben, Ihr Design zu ändern, ohne das Markup (stark) zu beeinflussen. Das Hardcodieren von Grids im HTML-Format widerspricht diesem Ziel. Daher wird davon abgeraten, Projekte durchzuführen, die voraussichtlich länger als ein Wochenende dauern. Mehr darüber, wie wir später Gitterklassen 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. In realistischer Hinsicht werden Sie jedoch feststellen, dass einige Ihrer Websiteseiten 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 sie nur dann in ein vollwertiges Widget umgestalten, wenn klar wird, dass das Element an einer anderen Stelle wiederverwendet wird. Dies ist ein Kompromiss, der durch praktische Haushaltsprobleme motiviert ist.

Verschachtelung minimieren. Neue Klassen einführen, anstatt Selektoren zu verschachteln. Die Tatsache, dass SASS die Schmerzen wiederholter Selektoren beim Verschachteln beseitigt, bedeutet nicht, dass Sie fünf Ebenen tief verschachteln müssen. Überqualifizieren Sie niemals einen Selektor (verwenden Sie z. B. nicht "ul.nav", wo ".nav" dieselbe Aufgabe übernehmen könnte.) Und geben Sie neben dem benutzerdefinierten Klassennamen keine HTML-Elemente an (z. B. "h2.highlight"). Verwenden Sie stattdessen nur den Klassennamen und lassen Sie den Basisselektor 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 stylen, die in der gesamten Anwendung konsistent sein sollen. Vermeiden Sie breite Selektoren wie "header ul "weil es wahrscheinlich ist, dass Sie sie an einigen Stellen sowieso außer Kraft setzen müssen. Wie wir immer wieder sagen, möchten Sie die meiste Zeit eine bestimmte, gut benannte Klasse verwenden, wenn Sie einen bestimmten Stil möchten.

Machen Sie sich mit den Grundlagen des Block-Element-Modifikators vertraut. Lesen Sie dazu beispielsweise hier weiter. Wir haben es ziemlich leicht genommen, aber es hat uns trotzdem sehr geholfen, CSS-Stile zu organisieren.

4
Jack Kinsella

Oft sehe ich, wie Einzelpersonen die Datei in Abschnitte aufteilen, wobei zwischen den Abschnitten ein Überschriftenkommentar steht.

So 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 macht es einfacher, später zurückzukehren und herauszufinden, woran Sie gerade arbeiten.

2
Mitchel Sellers

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 der Dinge zu verbessern und Konflikte zwischen Selektoren zu vermeiden, die häufig zu Spaghetti-Code- und Spezifitätsproblemen führen.

Wenn es richtig angewendet wird, hat es tatsächlich einige sehr positive Auswirkungen.

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

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 Oberflächenelements übernehmen und Variablen wie Farben und Methoden wie den Umgang mit internen Elementen enthalten. Während ein eingefleischter OO Programmierer dieser Idee vielleicht widerspricht, bringen die angewandten Konzepte in der Tat viele der schöneren Teile von OO= Strukturen, wie Modularität, mit sich , lose Kopplung und enger Zusammenhalt sowie kontextfreie Wiederverwendbarkeit. Sie können sogar auf eine Art und Weise bauen, die wie ein eingekapseltes Objekt aussieht, indem Sie Sass und das & operato r.

Ein ausführlicherer Artikel aus dem Smashing Magazine ist hier zu finden ; und einer von Harry Roberts von CCS Wizardry (den jeder, der mit CSS zu tun hat, lesen sollte) ist hier .

In der Praxis

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

Wenn ich BEM in der realen Welt verwende, ergänze ich die Technik mit ein paar zusätzlichen 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-box und der .header wäre der Kontext für eine bestimmte Überschreitung

.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 unkompliziert Ihr Projekt auch sein mag:

  • projekte werden immer komplexer, daher ist es wichtig, gute Grundlagen zu legen, auch in Bezug auf CSS
  • sogar ein Projekt, das einfach erscheint, weil es auf WordPress hat wenig JavaScript kann immer noch sehr komplex im CSS sein - OK, Sie müssen keine serverseitige Codierung durchführen, so dass Teil ist Einfach, aber das Frontend mit Broschüren hat zwanzig Module und drei Variationen von jedem: Sie haben dort ein sehr komplexes 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, um die verschiedenen Prinzipien von BEM effektiv auf das Front-End als Ganzes anzuwenden und die Komponenten zu verteilen, aber vollständig miteinander zu verknüpfen Elemente wie DOM-Fragmente, Js (MVC) und CSS, die alle dasselbe Widget für die Benutzeroberfläche erstellen.

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

Es gibt einige weitere Lektüre hier und auch ein Framework Polymer hier , das einen Blick wert ist

Endlich

Ich denke auch, dass dies ein exzellenter, moderner CSS-Leitfaden für bewährte Methoden ist, der speziell dafür entwickelt wurde, um zu verhindern, dass große CSS-Projekte chaotisch werden. Ich versuche, den meisten davon zu folgen.

1
Toni Leigh

es gibt hier 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 für die Entwicklung separate Dateien verwenden und dann alle Ihre generischen CSS-Dateien auf der gesamten Site zusammenführen bei der Bereitstellung in eine einzelne Datei.

auf diese Weise haben Sie das Beste aus beiden Welten, steigern die Leistung (weniger HTTP-Anforderungen vom Browser) und lösen Code-Probleme während der Entwicklung.

0
quinton

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

0
Iouri Goussev