Design

CSS-Kurzschreibweisen inklusive Cheatsheets

4. März 2010
von

Schnell können CSS-Dateien ziemlich unübersichtlich werden, es wird hier und da nur eine Kleinigkeit geändert und schon hat man den Überblick verloren. So wird beispielsweise mehrmals die Eigenschaft margin-top zugewiesen und der Wert dadurch einfach überschrieben. Das verursacht oft überflüssigen und nutzlosen Code, der sich selbst mit firebug oder ähnlichen Tools nur noch schwer warten lässt.

Mehrmals zugewiesene Eigenschaften werden einfach überschrieben, dies kann sehr praktisch sein, aber auch die Suche nach der Eigenschaft, die die gewünschte Darstellung nun “wirklich“ bewirkt, deutlich eschweren. Da CSS-Dateien mit über 1000 Zeilen und etlichen Hacks keine Seltenheit sind, lässt sich eine gewisse Unübersichtlichkeit natürlich nicht immer vermeiden, jedoch kann der Code durch Kurzschreibweisen deutlich optimiert werden. Die Vorteile liegen auf der Hand:

  • übersichtlicher
  • einfacher zu warten
  • Doppelzuweisungen können einfacher/schneller erkannt und vermieden werden
  • geringere Dateigröße.

Bei den heutzutage üblichen Bandbreiten sieht vielleicht nicht jeder einen Sinn in der Einsparung von einigen Bytes an einer CSS-Datei, aber spätestens nach dem bekannt wurde, dass die Ladezeit zu einem Ranking-Faktor für google werden soll, macht jede Einsparung Sinn.

Für Kurzschreibweisen sind nicht immer alle Werte notwendig, werden Sie nicht gesetzt, so wird ein Standardwert zugewiesen.

screen

Ich habe zwei Cheatsheets erstellt, die hoffentlich für den einen oder anderen hilfreich sind. Eine ausführliche Version mit allen genannten Schreibweisen (ohne Farben) und eine „CheatCard“, die einfach nur die Kurzschreibweisen enthält.

Border

Eine der gängigsten Kurzschreibweisen ist die Eigenschaft border. Mit ihr lassen sich border-width, border-style und border-color auf einmal zuweisen.

Eigenschaften:

border-width: 1px;
border-style: solid;
border-color: #FF0000;

Kurzschreibweise:

border: 1px solid #FF0000;

Standardwerte:

border-width: medium;
border-style: none;
border-color: #000000; /*Browser abhängig, meist schwarz*/

margin

Für margin lassen sich alle vier Werte top, right, bottom und left nacheinander zuweisen. Die Werte werden in der Reihenfolge 1. oben, 2. rechts, 3. unten und 4. links interpretiert.

Eigenschaften:

margin-top: 1px;
margin-bottom: 2px;
margin-right: 3px;
margin-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

margin: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

margin: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

margin: 1px 3px;

1px nach oben, unten, rechts und links

margin: 1px;

Standardwerte

0

Padding

Für padding verhält sich das ebenso.

Eigenschaften:

padding-top: 1px;
padding-bottom: 2px;
padding-right: 3px;
padding-left: 4px;

Kurzschreibweisen:

1px nach oben, 3px nach rechts, 2px nach unten, 4px nach links

padding: 1px 3px 2px 4px;

1px nach oben, 3px nach links und rechts, 2px nach unten

padding: 1px 3px 2px;

1px nach unten und oben, 3px nach links und rechts

padding: 1px 3px;

1px nach oben, unten, rechts und links

padding: 1px;

Standardwerte:

0

Background

Dass sich über background die Hintergundfarbe und das Hintergrundbild festlegen lässt, ist sicher jedem bekannt, aber dass ist noch lange nicht alles. Backgound-Attachement ist vielleicht nicht jedem geläufig, es legt fest, ob das Hintergrundbild seinen festen Platz behält oder mit-scrollt.

Eigenschaften:

background-color: #FF0000;
background-image: url(../img/background.png);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center;

Kurzschreibweise:

background:#FF0000 url(../img/background.png) fixed repeat-x center;

Standardwerte:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left; /*0% 0% */
background-attachment: scroll;

font

Mit font lässt sich sicher am meisten einsparen, jedoch wirkt es auch am unübersichtlichsten, auf den ersten Blick, wie ich zumindest finde. Auf den zweiten Blick jedoch offenbart es Schrift-Eigenschaften die oft überhaupt nicht berücksichtigt werden, wie zum Beispiel die Zeilenhöhe (line-height).

Eigenschaften:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 2em;
line-height: 1em;
font-family: Arial Sans-serif;

Kurzschreibweise:

font: italic small-caps bold 2em/1em Arial Sans-serif;

Standardwerte:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: medium;
line-height: normal;
font-family: ; /*Browser abhängig*/

list-style

Bisher waren die Kurzschreibweisen relativ weit verbreitet und auch bekannt, aber auch listen lassen sich kürzer stylen.

Eigenschaften:

list-style-type: square;
list-style-position: inside;
list-style-image: url(../img/list-style.png);

Kurzschreibweise:

list-style: square inside url(../img/list-style.png);

Standardwerte:

list-style-type: disc;
list-style-position: outside;
list-style-image: none;

Der direkte Vergleich

Um den Unterschied zu verdeutlichen, habe ich zwei CSS-Dateien angelegt,  jeweils in Kurzschreibweise und Normalschreibweise.

Zeichen Zeilen Bytes
Css_long.css 692 42 774
Css_short.css 323 23 367

Alle Werte mit Leerzeichen und Umbrüchen
Gezählt mit notepad++

Hexadezimalfarben

Zum Schluss möchte ich noch auf die Kurzschreibweise für Hexadezimalfarben eingehen, die natürlich die Kurzschreibweisen für background und border ideal ergänzen. Als kleine Einführung, eine “Hexadezimalfarbe” besteht aus 6 Zeichen, jeweils zwei für die Grundfarben Rot, Grün und Blau.

color: #RRGGBB;

Sind nun, wie in diesem Beispiel zwei Zeichen einer Grundfarbe gleich, so kann diese ein zu einem Zeichen zusammengefasst werden.

color: #RGB;

Diese Möglichkeit der Farbangabe muss allerdings nicht immer die kürzeste sein, so ist zum Beispiel der Farbname „red“ um eine Stelle kürzer als die kurze Hexadezimal-Variante, da bei ihr noch eine Raute vorangestellt werden muss.
Welche Variante für die jeweilige Farbe die beste/kürzeste ist, muss deshalb individuell entschieden werden.
Farbtabellen gibt es im Web zur Genüge in allen Variationen, deshalb möchte ich hier nur ein paar Beispiele nennen:

Schwarz #000000 #000 black
Weiß #FFFFFF #FFF white
Rot #FF0000 #F00 red
Blau #0000FF #00F blue
Grün #00FF00 #0F0 green
(Limone) Grün #00FF00 #0F0 lime
Gelb #FFFF00 #FF0 yellow

(tm), (mm), (sl)

Student der Kommunikations- und Softwaretechnik

26 Kommentare zu „CSS-Kurzschreibweisen inklusive Cheatsheets
  1. ream88 am 4. März 2010 um 12:43

    Bei folgendem Absatz hat sich ein Fehler eingeschlichen:

    margin

    Für margin lassen sich alle vier Werte top, bottom, right und down nacheinander zuweisen.

  2. David am 4. März 2010 um 12:45

    Cool, danke! Sowas hab ich schon immer gesucht! :-)

  3. Manuela Müller am 4. März 2010 um 13:30

    @ream88: Sorry – ist korrigiert in: “top, right, bottom und left”. Danke für den Hinweis :-)!

  4. Tuts & Tipps am 4. März 2010 um 13:38

    Schöne und sehr nützliche Sache für jeden, der es nicht beruflich macht und somit immer im Kopf hat.

    Danke für Deine Arbeit!

  5. tekl am 4. März 2010 um 14:37

    Die Kurzschreibweisen bie den Farben führen übrigens bei HTML-Mails zu Problemen. Outlook mag sie nicht anzeigen.

  6. Heiko Philipp am 4. März 2010 um 14:41

    Schön eine solche Liste zur Verfügung zu haben.

    Vielen Dank für die Arbeit.

  7. Sepp am 4. März 2010 um 16:59

    Gute Liste für viele. Benutze die Shorttags selbst auch, nur für die Font Anweisungen meist nicht. Einmal kann ich’s mir da einfach nie merken (dafür gibt’s ja jetzt des Cheatsheet), zum andern halte ich es bei den Font Angaben übersichtlicher, wenn alles einzeln aufgelistet wird. Hier ändert man oft ja nur die Schriftgröße und Lineheight.
    Bei den Kurzschreibweisen muss man allerdings aufpassen, dass man hier ebenfalls nichts ausversehen überschreibt. Geht vor allem beim background sehr schnell.

  8. rené am 4. März 2010 um 17:52

    Ich arbeite eigentlich seit Jahren mit der Kurzschreibweise, ganz einfach weil das Wort “Kurz” weniger Zeit benötigt.;-)

  9. Harry Schmieder am 4. März 2010 um 18:54

    Sehr schön und verständlich verfasster Artikel. Lob für Deine Arbeit.

    Vor allem nützlich für Newbees auf dem css-Gebiet.
    Jemand, der viel Erfahrung mit css hat und verantwortungsbewusst damit umgeht – sorry – der braucht diesen Artikel nicht. Der sollte das wissen.

    Als Konsequenz fehlt mir hier noch, dass man alle Elemente, die die gleiche Auszeichnung haben, zusammenfassen kann, durch Kommata getrennt.
    So dass praktisch jede Auszeichnung nur einmal vorkommt.

    Auch das spielt eine nicht zu unterschätzende Rolle bei der Kurzschreibweise und dadurch kann man nochmals einige Prozent an Gewicht einsparen.

  10. Jannik am 4. März 2010 um 21:08

    Ich frage mich, wo denn die “Standardwerte” für margin und padding herkommen. Wenn ich ein neues HTML-Dokument ohne jegliche CSS-Deklarationen erstelle, sind die Standardwerte definitiv nicht 0.

    Vor allem hängen die Standwerte auch von den Elementen ab, über die man spricht.

  11. Harry Schmieder am 4. März 2010 um 22:34

    @jannik:
    Gerade weil standardmäßig die Werte für margin und padding nicht vordefiniert sind, muss man sie mit css angeben, wenn man fensterfüllende Layouts ohne Rand erstellen will.

    Das macht man am besten mit dem Universalselektor (*). Dort gibt man für margin und padding 0 ein, dann betrifft das grundsätzlich alle Elemente im Layout. Soll ein bestimmtes Element einen gewissen Außen- und / oder Innenabstand haben, dann muss man dieses Element mit einem margin- und / oder padding-wert >0 formatieren.

    So spart man sich Mehrfach-Formatierungen vom margin:0, padding:0.

  12. Marcel Weber am 5. März 2010 um 00:15

    @Harry Schmieder

    Danke für den Tipp, das wäre sicher nicht schlecht gewesen, aber andererseits lässt sich das sicher auch in einem neuen Artikel unterbringen ;-)

    @jannik

    Das frage ich mich auch des öfteren :-)
    Erstelle doch mal ein leeres HTML file mit mit einem div und gib diesem einen Rahmen(am einfachsten noch einen kurzen text in das div)
    und schau es dir im Browser an.

    Danach setzt du margin auf 0.
    Du wirst keine Veränderung sehen, erst wenn du margin auf min 1px setzt.

  13. DerThomas am 5. März 2010 um 14:49

    @Marcel Weber:
    Da ist einiges falsch im Artikel.

    Und zu deinem Kommentar 12:
    Folge bitte der Anleitung die du hierüber selber verfasst hast. Wenn du den Rahmen siehst, stelle dir die Frage warum dieser nicht am Rand der Seite “klebt” sondern Abstand dazu hat.

    Und was sollen das für Standardwerte im Artikel sein?
    Worauf beziehst du dich? Auf die Werte des W3C jedenfalls nicht.
    In manchen Browsern kann man diese Standardwerte übrigens sogar verändern.
    (Opera z.B.: Einstellungen -> Webseiten)

    Hier mal ein paar Infos zu den Standardwerten laut W3C:
    http://www.w3.org/TR/CSS2/sample.html
    margin von body und p sind z.B. per default nicht gleich 0.

    Übrigens sind diese Kurzschreibweisen auch bei SELFHTML recht gelungen zusammengefasst:
    http://de.selfhtml.org/css/eigenschaften/
    z.B. unter “Außenrand und Abstand” => “margin (Außenrand/Abstand allgemein)”

    Und noch was: green != #0f0

  14. Marcel Weber am 7. März 2010 um 13:32

    @ DerThomas

    Danke für deinen Kommentar und die Hinweise.

    Dass sich Standardeinstellungen verändern lassen ist mir bekannt, ich kann im Browser auch z.B. die Schriftart und Größe einstellen und dies damit für alle Webseiten zu Überschreiben, oder gleich komplett CSS unterbinden, was jegliches CSS überflüssig machen würde.

    Worauf sich die Standardwerte beziehen weiß ich leider auch nicht mehr so genau, ist zu lange her, als ich CSS gelernt habe, sie sind aber bei css4you beschrieben und auch bei SELFHTML wird der Ausgangswert mit “0” beschrieben.

    Mit green ist mir natürlich ein Fehler unterlaufen, den ich umgehen korrigieren werde. Danke nochmal dafür.

  15. DerThomas am 7. März 2010 um 16:22

    Standardwerte überschreiben doch nichts.

    Ein Hinweis auf die Möglichkeit zur Veränderung der Standardwerte wäre aber m.E. durchaus sinnvoll gewesen. Ein Anfänger geht laut diesem Artikel davon aus, dass z.B. standardmäßig die Hintergrundfarbe immer weiß ist.
    Praktisch sollten diese Werte gesetzt werden!

    Oh, na wenn es bei css4you und bei SELFHTML so steht, dann muss es ja stimmen. Klasse…

  16. Linkhub – Woche 09-2010 « pehbehbeh am 7. März 2010 um 17:49

    […] CSS-Kurzschreibweisen inklusive Cheat Sheets […]

  17. Linkhub – Woche 09-2010 « pehbehbeh am 7. März 2010 um 17:49

    […] CSS-Kurzschreibweisen inklusive Cheat Sheets […]

  18. Harry Schmieder am 7. März 2010 um 23:22

    @DerThomas und @Marcel Weber:
    Selbstverständlich kann hier jeder seine Meinung sagen. Dazu ist diese Einrichtung ja auch da.
    Und ich mische mich da grundsätzlich auch nicht ein, wenn andere miteinander diskutieren.

    Aber mittlerweile sind wir glaube ich an einem Punkt angelangt, an dem Marcel meiner Meinung nach in die Defensive gedrängt wird oder sich zumindest so fühlen muss.

    Nachdem, was er sich hier für eine Arbeit gemacht hat mit seinem Artikel, hat er das nicht verdient.

    Sicher hat er nicht ALLE “Gesetze” des css hier erläutert und auch nicht alle Möglichkeiten, gewisse Unstimmigkeiten umgehen zu können.
    Aber der Anspruch seines Artikels bezieht sich eindeutig auf die Kurzschreibweisen. Und auch wenn da die eine oder andere kleine Frage offen bleibt, hat er meiner Meinung nach einen sehr guten Artikel hier abgeliefert.

    Daran ändert es auch nichts, wenn man ihn dauernd immer wieder und wieder auf die Standardwerte des Browserrandes aufmerksam macht.

    Jeder, der sich auch nur ein bisschen mit HTML und css auskennt weiß, dass die Browser ohne Eingriff mit css einen Rand lassen, oben und unten etwa 5 Pixel, links und rechts etwa 10 Pixel, je nach Browser.
    Na und dass man diesen Rand mit der css-Formatierung margin:0 sehr leicht eliminieren kann, das sollte eines der ersten Dinge sein, die man im Umgang mit css lernt.

    Mehr braucht es in diesem Falle wirklich nicht. Denn schließlich ist jede noch so feine css-Formatierung in den modernen Browsern vom Benutzer in großem Maße beeinflussbar, was ich persönlich sehr bedauere. Wozu machen wir uns dann eigentlich so viel Arbeit?!

    Und jeder Webworker wird dem Hintergrund mit css eine bestimmte Farbe zuweisen, für weiß eben #fff. Das hat man ja schon selbstverständlich gemacht, bevor es css gab.
    Aber darum geht es hier ja gar nicht.

    Also hört bitte auf mit der Erbsenzählerei und damit, den Marcel derart zu bedrängen. Das bringt nichts und das hat er auch nicht verdient.

    @Marcel Weber:
    Vielleicht solltest Du auch nicht auf jeden einzelnen Kommentar eingehen.
    Das was Du hier abgeliefert hast, ist größtenteils sehr gut. Stehe einfach dazu. Du hast keinen Grund, Dir alles schlecht reden zu lassen.

    Mit css ist so einiges machbar, aber Dinge, die nicht zu diesem Thema passen, solltest Du einfach übergehen.

  19. Thomas am 8. März 2010 um 08:49

    Vielen Dank, sehr hilfreich für die Arbeit!!!

  20. […] CSS-Kurzschreibweisen inklusive Cheatsheets – gut gekürzt mit Dr. Web. […]

  21. […] übersichtlicher gestalten, wenn man die Kurzschreibweisen benutzt. Marcel hat dafür ein Cheatsheet erstellt, in welchem die einzelnen Kurzschreibweisen erläutert werden. Neben der besseren […]

  22. maTTes am 11. März 2010 um 11:56

    Vielen Dank, direkt 2x ausgedruckt :)

  23. Links – Dr. Web « Dirk's Blog am 22. März 2010 um 19:35

    […] CSS-Kurzschreibweisen inklusive Cheatsheets […]

  24. axel am 9. April 2010 um 15:00

    Für sowas bin ich immer gerne zu haben… ;-)

  25. Steffen am 14. April 2010 um 16:32

    Find ich toll!

  26. Bärbel Loy am 7. April 2013 um 20:39

    Guter Artikel & Übersicht. Für CSS Anfänger eine gute und hilfreiche Erklärung, was es mit Kurzschreibweisen in CSS auf sich hat.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!