Verschiedene Möglichkeiten, CSS zu formatieren

Dieser Beitrag befasst sich mit den verschiedenen Möglichkeiten, CSS zu formatieren, was sich von den verschiedenen Möglichkeiten, CSS zu *organisieren*, unterscheidet. Dies sind definitiv verwandte Konzepte, aber ich denke, Organisation hat mehr mit der Art und Weise zu tun, wie Dinge gruppiert und geordnet werden, während Formatierung mit Leerzeichen und Einrückungen zu tun hat.

Die Formatierung hat absolut nichts damit zu tun, wie das CSS funktioniert. Dies sind lediglich ästhetische Entscheidungen des Programmierers. Aber das bedeutet nicht, dass die Formatierung unwichtig ist. Das wäre, als würde man sagen, die Wahl der Leinwand sei für einen Maler nicht wichtig. Sie beeinflusst, wie es sich anfühlt, CSS zu schreiben, wie einfach es zu lesen ist, wie einfach es zu navigieren ist und wie einfach es ist, zuvor geschriebenes CSS wieder aufzugreifen und sich damit vertraut zu machen.

Der Grund, warum es bei der CSS-Formatierung so viele Wahlmöglichkeiten gibt, ist, dass es keine festen Syntaxregeln für Leerzeichen und Zeilenumbrüche gibt. Zum Beispiel

div        {       width:      50px         }

ist dasselbe wie

div{width:50px}

ist dasselbe wie

div

{

      width: 50px

}

Mehrzeiliges Format

.navigation_rss_icon {
	position: absolute;
	left: 940px;
	bottom: 0px;
}
#navigation_rss {
	position: absolute;
	left: 720px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #897567;
	line-height: 2.5em;
}
#navigation_rss li {
	display: inline;
}
#navigation_rss li a:link, #navigation_rss li a:visited {
	color: #fffffe;
	text-decoration: none;
	padding: 0px 2px;
	letter-spacing: -0.05em;
}
#navigation_rss li a:hover {
	color: #eed2a1;
	text-decoration: none;
}

Ich wette, dies ist das häufigste. Es ist am einfachsten zu lesen, wenn es um kurze Snippets geht, weshalb geschriebene Tutorials dieses Format am häufigsten verwenden. Das obige Beispiel hat keine Leerzeile zwischen der schließenden Klammer und dem nächsten Selektor, aber das ist auch ziemlich üblich.

Mehrzeiliges Format mit Einrückung

.navigation_rss_icon {
    position: absolute;
    left: 940px;
    bottom: 0px;
}
#navigation_rss {
    position: absolute;
    left: 720px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #897567;
    line-height: 2.5em;
}
    #navigation_rss li {
        display: inline;
    }
        #navigation_rss li a:link, #navigation_rss li a:visited {
            color: #fffffe;
            text-decoration: none;
            padding: 0px 2px;
            letter-spacing: -0.05em;
        }
        #navigation_rss li a:hover {
            color: #eed2a1;
            text-decoration: none;
        }

Ein eingerückter Block zeigt an, dass der Selektor spezifischer ist als der darüber liegende Elternselektor und dass er Kindelemente des darüber liegenden Selektors anvisiert.

Einzeiliges Format

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 }
ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 }
ul.nav li { display:inline; margin:0 10px 0 0 }
div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340px }
div.post_wrapper { background:url(http://cdn.images.elliotjaystocks.com/presentation/hr_long.png) bottom center no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }
div.wrapper img, div.wrapper a img, div.article_illustration_mini { background:#d3d4cb; padding:10px; border:1px solid #999 }
div.wrapper a:hover img { background:#fff }

Dies ist wahrscheinlich das platz- und größen­effizienteste, abgesehen davon, dass es vollständig komprimiert wird, um alle Leerzeichen und Zeilenumbrüche zu entfernen. Diese Technik würde das geringste vertikale und horizontale Scrollen beim Schreiben und Bearbeiten von CSS erfordern, allerdings auf Kosten einer unübersichtlichen und etwas schwierigen Darstellung beim Durchsuchen und Finden von Dingen, nach denen Sie suchen.

Einzeiliges Format mit Tabulatoren

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif; text-align: left; }

Einzeiliges Format mit Einrückung

#content-area ol                    { margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol             { list-style: lower-alpha; }
#content-area ul                    { margin: 0 0 0 5px; list-style: none; }
    #content-area ul li             { padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul             { margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li     { background: none; padding: 0; }

Ein eingerückter Selektor gibt an, dass der Selektor etwas anspricht, das ein Kind des darüber liegenden Selektors ist.

Größtenteils einzeiliges Format

Ich bevorzuge das einzeilige Format, aber ich verwende Soft-Wrap in meinem Texteditor, sodass lange Zeilen nicht endlos weitergehen, sondern am Fensterrand umgebrochen werden. Bei wirklich langen Zeilen mit vielen Selektoren füge ich einen harten Zeilenumbruch ein und tabuliere zur neuen Zeile der Attribute.

h1, h2, h3                            { font: 24px Helvetica, Sans-Serif; margin: 0 0 10px 0; }
h1                                    { font-size: 36px; }
h2                                    { font-size: 30px; }
h2 a, h2 a:visited                    { color: #2e2e2e; }
h2 a:hover                            { color: #fe4902; border-bottom: 1px dotted #2e2e2e; }
p, li, dd                             { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        margin: 0 0 15px 0; color: #5e5d5d; }
td, th                                { font: 13px/18px "Lucida Grande", Arial, Helvetica, Sans-Serif;
                                        text-align: left; }

Variationen

Das einzeilige Format könnte noch weiter getrieben werden, indem die öffnende Klammer auf ihre eigene Zeile verschoben wird, was ich bei PHP recht häufig sehe.

div
{
    padding: 10px;
}

Im mehrzeiligen Format mit Tabulatoren habe ich gesehen, dass die öffnende Klammer als eine Art Trennwand verwendet wird.

#content-area ol                 {       margin: 15px 0 0 25px; list-style: decimal; }
    #content-area ol ol          {       list-style: lower-alpha; }
#content-area ul                 {       margin: 0 0 0 5px; list-style: none; }
    #content-area ul li          {       padding: 0 0 0 20px; background: url(/images/bullet.png) 0 3px no-repeat; }
    #content-area ul ul          {       margin: 15px 0 0 25px; list-style: disc; }
         #content-area ul ul li  {       background: none; padding: 0; }

Kombination

Eine Kombination aus einzeiligem und mehrzeiligem Format wäre, nur zusammengehörige Attribute in einer einzigen Zeile zu gruppieren.

.navigation_rss_icon {
    position: absolute;
    top: 10px; left: 10px; bottom: 10px; right: 10px;
    font-size: 12px; font-weight: bold;
}

Lesbarkeit vs. Scrollen

Ihre Wahl der Formatierung hängt von der Lesbarkeit ab. Sie müssen in der Lage sein, schnell durch Ihr CSS zu navigieren und das Gesuchte zu finden und Änderungen schnell vorzunehmen. Wenn Sie das einzeilige Format schwierig finden, weil Ihre Augen das gesuchte Attribut nur schwer finden können, dann sollten Sie es wahrscheinlich vermeiden.

Persönlich finde ich das mehrzeilige Format gut lesbar, aber es erhöht die Länge (tatsächliche Anzahl der Zeilen) um das 5- bis 8-fache. Das macht das gesamte Dokument für mich weniger lesbar, wegen all des vertikalen Scrollens. Wenn Sie einen eher schmalen Monitor haben, kann das einzeilige Format viel horizontales Scrollen verursachen, was manchmal noch schlimmer ist.

Das perfekte Format für Sie ist eines, das die Lesbarkeit maximiert und gleichzeitig das Scrollen minimiert. Darüber hinaus muss es sich im abstrakteren Sinne einfach richtig anfühlen.