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
simplicity,complexity,maintenance,structureundrefactoring.