CSS-Kurzschreibweisen inklusive Cheatsheets

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

Sortiert nach:   neueste | älteste | beste Bewertung
ream88
Gast
6 Jahre 4 Monate her

Bei folgendem Absatz hat sich ein Fehler eingeschlichen:

margin

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

David
Gast
David
6 Jahre 4 Monate her

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

Manuela Müller
Mitglied
6 Jahre 4 Monate her

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

Tuts & Tipps
Gast
6 Jahre 4 Monate her

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!

tekl
Gast
tekl
6 Jahre 4 Monate her

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

Heiko Philipp
Gast
6 Jahre 4 Monate her

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

Vielen Dank für die Arbeit.

Sepp
Gast
6 Jahre 4 Monate her

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.

rené
Gast
rené
6 Jahre 4 Monate her

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

Harry Schmieder
Gast
6 Jahre 4 Monate her

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.

Jannik
Gast
Jannik
6 Jahre 4 Monate her

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.

Harry Schmieder
Gast
6 Jahre 4 Monate her

@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.

DerThomas
Gast
DerThomas
6 Jahre 4 Monate her
@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… Read more »
DerThomas
Gast
DerThomas
6 Jahre 4 Monate her

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…

trackback

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

trackback

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

Harry Schmieder
Gast
6 Jahre 4 Monate her
@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… Read more »
Thomas
Gast
Thomas
6 Jahre 4 Monate her

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

trackback

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

trackback

[…] ü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 […]

maTTes
Gast
6 Jahre 4 Monate her

Vielen Dank, direkt 2x ausgedruckt :)

trackback

[…] CSS-Kurzschreibweisen inklusive Cheatsheets […]

axel
Gast
axel
6 Jahre 3 Monate her

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

Steffen
Gast
Steffen
6 Jahre 3 Monate her

Find ich toll!

Bärbel Loy
Gast
3 Jahre 3 Monate her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen