CSS für Entwickler — 1/2

Box-Modell und Elemente

Jedes HTML-Element ist rechteckig und wird mittels des Box Models beschrieben. Hierbei gibt es zwar Unterschiede zwischen den sogenannten Block- und Inline-Elementen, dazu aber später mehr.

Das CSS Box Model besteht aus 4 Bereichen:

• Margin — bezeichnet den äußeren Abstand zu nebenliegenden Elementen

• Border — liegt zwischen Margin und Padding und stellt den äußeren Rand des Elementes dar

• Padding — ist der innere Abstand zwischen dem Border und dem Content

• Content — der eigentliche Inhalt (Text, Bilder, …)

 

Das CSS Box Model mit seinen 4 Komponenten: Margin, Padding, Border und Content

Margin-Abstände können sich vermischen, dieses Verhalten wird margin collapsing genannt.

 

Dieses Verhalten entsteht, wenn zwei Elemente gegeneinander laufende Margin-Werte erhalten. Zwei Boxen übereinander mit jeweils einem margin-bottom und einem margin-top Wert führen dazu, dass der größere der beiden Werte als Abstand genommen wird. Die Werte werden also nicht addiert.

Block- und Inline-Elemente oder warum mein Styling nicht funktioniert

Grundsätzlich gibt es zwei verschiedene Arten von Elementen, die Block-Elemente und die Inline-Elemente.

Bei Block-Elementen handelt es sich um diejenigen Elemente, die die komplette Breite des Eltern-Elements einnehmen. Wenn also etwa ein p-Tag (paragraph) verwendet wird, füllt dieses die komplette Breite aus. Eine vollständige Liste der Block-Elemente findet sich hier.

Inline-Elemente hingegen nehmen lediglich soviel Platz ein, wie sie benötigen. Eine vollständige Liste der Inline-Elemente findet sich hier.

Inline-Elemente akzeptieren nur wenige Eigenschaften des Box Models z.B. margin-left und margin-right, sowie padding-left und padding-right.

.class{
  display: inline;
  display: inline-block;
  display: block;
}

Mittels inline und block wird das Standardverhalten übertragen. Der Wert inline-block stellt hierbei eine Besonderheit dar, da er margin, padding, height und width zulässt, die Elemente aber nicht größer als definiert sind und somit z.B. nebeneinander liegen können.

 

links: inline, rechts: inline-block, der gesamte Text entspricht einem block-Element

Klassen und IDs

Das Konzept der Klassen und IDs wird bei uns nicht mehr so streng verfolgt, wie es früher normal war. Wir bei BRICKMAKERS verwenden (fast) ausschließlich Klassen für CSS und IDs für JavaScript-Abhängigkeiten.

Ein Beispiel:

<div id="openDialog" class="element">Click me</div>

Hierbei wird die Klasse element im CSS verwendet, um das Styling festzulegen und die ID openDialog, um etwa ein Dialogfenster, gesteuert über JavaScript, zu öffnen.

Benennung von Klassen

Die vernünftige Benennung von Klassen ist essentiell, um auch in großen Projekten nicht den Überblick zu verlieren. Ein vernünftiger Lösungsansatz ist die Verwendung der BEM Syntax.

BEM steht für Block, Element, Modifier und folgt einer einfachen Struktur. Nehmen wir als Beispiel ein Menü, dann kann die BEM Syntax z.B. so aussehen:

.menu{} //block
.menu__link{} //element
.menu__link--active{} //element with modifier

Die Strukturierung der Klassennamen ermöglicht eine einfache Zuordnung in die Gesamtstruktur des CSS Dokumentes.

Hierarchien in CSS

CSS Hierarchien folgen einem einfachen Prinzip (hier sortiert nach der Priorität, in der sie angenommen werden):

1. Eigenschaften mit der !important Regel

2. Inline-Styles direkt im HTML

3. IDs

4. Klassen

Eigenschaften sollten nicht mittels !important überschrieben werden müssen. Dieser Fall kann aber auftreten, wenn andere Styles importiert werden müssen, auf die kein Einfluss genommen werden kann. Normalerweise weist die Notwendigkeit aber eine falsche Strukturierung im eigenen CSS hin.

Inline-Styles können in dynamischen Dokumenten vorkommen, z.B. wenn Hintergrundgrafiken gesetzt werden. Auch hier gilt es diese zu vermeiden oder (falls nicht anders möglich) auf die notwendigen Eigenschaften zu reduzieren, daher background-image direkt angeben, statt background.

IDs werden nicht verwendet (siehe “Ein paar einfache Regeln”).

Klassen können spezifisch zugewiesen werden, wenn etwa .class1 .class2 geschrieben wird, findet .class2 nur innerhalb eines Elementes mit der Klasse .class1 im DOM Anwendung. Aufgrund dieser Spezifizierung ist .class1 .class2 auch mächtiger als .class2 und würde die Eigenschaften überschreiben.

Aufbau von CSS Dokumenten

Generell hilft es uns, wenn zu Beginn des (unkomprimierten) Dokuments ein Inhaltsverzeichnis der einzelnen Abschnitte zu finden ist. Dieses Inhaltsverzeichnis sollte sich in großen Kommentaren im Dokument wiederfinden. Einzelne Abschnitte können etwa so getrennt werden:

/*
* Header
* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ====
*/

Zum Einen ermöglichen sie uns z.B. in der Mini-Map oder beim Scrollen schnell zu erkennen, wo neue Abschnitte beginnen, zum Anderen helfen sie bei der Strukturierung des Dokuments.

Wir verwenden meist einen Pre-Processor (z.B. SASS oder LESS), welcher uns Wiederholungen bei Klassennamen spart und wieder etwas mehr Strukturierung einbringt.

Ein paar einfache Regeln

Die folgenden Regeln werden bei uns eingesetzt und sollen der Übersichtlichkeit helfen:

• Klassen nicht tiefer als 3 Ebenen gestalten (inkl. Pseudoelementen)

• nur Klassen verwenden, keine Verknüpfungen mit dem HTML-Element (z.B. .class statt div.class)

• Bei Gruppierungen alle Elemente untereinander schreiben

h1,
h2,
h3{
font-weight: 700;
}

• Vermeidung von IDs

• Alphabetische Sortierung der Eigenschaften

Diese Regeln werden innerhalb von Pre-Processors noch ergänzt, so dass Media Queries direkt innerhalb des Elements angegeben werden. Hierdurch ist direkt bei einem Element ersichtlich, welche Eigenschaften in den verschiedenen Auflösungen geändert werden.

Eigenschaften Vererben

Einige CSS-Eigenschaften werden an die nachfolgenden Elemente im DOM automatisch vererbt, eines der bekanntesten Beispiele hierfür ist etwa die font-family oder die color-Eigenschaft. Eine (veraltete) Tabelle des W3C listet in der Spalte Inherited? auf, welche CSS-Eigenschaften vererbt werden und welche nicht. Hier eine aktuellere Antwort zu dem Thema.

Eine explizite Vererbung kann aber auch erreicht werden, indem der Wert inherit einer Eigenschaft zugewiesen wird:

.class{
float: inherit;
margin: inherit;
}

CSS Reset und Normalize

Die verschiedenen Browser haben unterschiedliche Style-Vorgaben für die Standard-Elemente des DOM. So sieht ein Dokument in Chrome ohne Styles anders aus, als eines in Edge.

Ein CSS Reset setzt alles Styles zurück und versucht so eine gleiche Darstellung in allen Browsern zu erreichen. Ein bekanntes Beispiel ist das CSS Reset von Eric Meyer.

Normalize erhält bestimmte Teiles des CSS, anstatt sie einfach alle zu entfernen. So bleiben etwa die Elemente sub und sup (hoch- und tiefgestellt) soweit erhalten, dass eine Darstellung immer noch korrekt ist.

 

Oben: mit Normalize, unten mit einem CSS Reset

Empfehlenswert ist immer die Verwendung von Normalize. Das spart zum Einen das mühsame Rück-Styling von Eigenschaften, die eigentlich meist gleich bleiben sollen (siehe hoch- und tiefgestellt), es ist modular und darüber hinaus besser dokumentiert.

Fortsetzung folgt

Im zweiten Teil dieses Artikels werden wir uns den folgenden Punkten widmen:

1. Position und Float

2. Selektoren, Pseudo-Klassen und Prefixes

3. Animationen

4. Chrome Debugging

5. Frameworks