Unterschied zwischen ausführlichen und kompakten Deklarationen in CSS3

Stell dir vor…

…du gestaltest eine Webseite und möchtest, dass alles perfekt aussieht. Die Deklarationen in CSS3 sind dafür dein bester Freund. Es gibt verschiedene Wege, wie du deine Styles schreiben kannst: ausführlich oder kompakt. Beide Methoden haben ihre eigenen Stärken und Schwächen und passen je nach Situation und deinen persönlichen Vorlieben. In diesem Beitrag erkläre ich dir die Unterschiede und zeige dir anhand von Beispielen, wie das Ganze funktioniert.

Ausführliche Deklarationen

Definition: Ausführliche Deklarationen bedeuten, dass jede Eigenschaft eines Elements separat definiert wird. Dies ermöglicht eine präzise Kontrolle und erhöht die Lesbarkeit des Codes.

Vorteile:

1. Lesbarkeit: Jede Eigenschaft ist explizit definiert, was besonders für Anfänger hilfreich ist.
2. Granularität: Präzise Kontrolle über jede Seite oder Eigenschaft des Elements.
3. Wartbarkeit: Änderungen sind klar nachvollziehbar.

Nachteile:

1. Redundanz: Kann zu redundantem Code führen, besonders wenn viele ähnliche Eigenschaften definiert werden.
2. Längere CSS-Dateien: Kann die Datei unnötig aufblähen.

Beispiel 1: Margin

.element {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
}

Beispiel 2: Border

.element {
    border-top-width: 2px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
    border-style: solid;
    border-color: black;
}

Kompakte Deklarationen

Definition: Kompakte Deklarationen fassen mehrere Eigenschaften in einer einzigen Zeile zusammen. Dies macht den Code kürzer und übersichtlicher.

Vorteile:

1. Kompaktheit: Reduziert die Anzahl der Codezeilen.
2. Konsistenz: Fördert einheitliches Styling bei ähnlichen Werten.
3. Schnelleres Schreiben: Spart Zeit beim Schreiben und Bearbeiten von CSS.

Nachteile:

1. Weniger Klarheit: Kann für Anfänger oder Außenstehende weniger verständlich sein.
2. Begrenzte Flexibilität: Weniger Kontrolle über einzelne Eigenschaften.

Beispiel 1: Margin

.element {
    margin: 10px 15px;
}

Beispiel 2: Border

.element {
    border: 2px solid black;
}

Detaillierter Vergleich

Ein weiteres Beispiel

Ausführliche Deklarationen

.button {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    background-color: blue;
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Kompakte Deklarationen

.button {
    padding: 5px 10px;
    background-color: blue;
    color: white;
    border-radius: 5px;
}

Also…

…sowohl ausführliche als auch kompakte Deklarationen haben ihre Berechtigung und spezifischen Anwendungsfälle. Ausführliche Deklarationen bieten mehr Klarheit und Kontrolle, während kompakte Deklarationen den Code oft kürzer und übersichtlicher machen. Die Wahl zwischen den beiden Methoden hängt von den spezifischen Anforderungen deines Projekts und deiner Präferenz für Lesbarkeit und Wartbarkeit ab. Ein ausgewogener Einsatz beider Methoden kann die Qualität und Effizienz deines CSS-Codes erheblich steigern.

Bonus:

Eine Übersicht der gängigsten CSS Deklarationen

Selektoren

/* Universeller Selektor */
* { }

/* ID-Selektor */
#id { }

/* Klassenselektor */
.class { }

/* Typselektor */
h1, h2 { }

/* Adjacent Sibling Selektor */
h1 + p { }

/* Child Selektor */
ul > li { }

/* General Sibling Selektor */
h1 ~ p { }

/* Descendant Selektor */
div p { }

/* Attributselektor */
div[att="val"] { }

Einheiten

%   /* Prozent */
cm  /* Zentimeter */
in  /* Inch */
mm  /* Millimeter */
pc  /* Pica (1 pica = 12 points) */
pt  /* Punkt (1 point = 1/72 inch) */
px  /* Pixel (1 pixel = 1/96 inch) */
em  /* Breite des "M" Glyphen in der Schriftgröße */
ex  /* X-Höhe der Schrift */
gd  /* Grid definiert durch 'layout-grid' */
rem /* Schriftgröße des Root-Elements */
vh  /* Höhe des Viewports */
vw  /* Breite des Viewports */
vm  /* Kleinere von Viewports Höhe oder Breite */

Pseudo-Selektoren

/* Pseudo-Klassen */
a:hover { }  /* Hover-Effekt */
input:focus { }  /* Fokus-Effekt */

/* Pseudo-Elemente */
p::before { content: "Start: "; }  /* Vor dem Element */
p::after { content: " End"; }  /* Nach dem Element */

Listen

/* Aufzählungszeichen */
ul { list-style-type: disc; }  /* Standard-Aufzählungszeichen */

/* Nummerierung */
ol { list-style-type: decimal; }  /* Nummerierte Liste */

/* Listenelemente ohne Aufzählungszeichen */
li { list-style-type: none; }  /* Keine Aufzählungszeichen */

Positionierungen

/* Statisches Positionieren */
div { position: static; }  /* Standard */

/* Relatives Positionieren */
div { position: relative; top: 10px; left: 20px; }  /* Relativ zu sich selbst */

/* Absolutes Positionieren */
div { position: absolute; top: 30px; left: 40px; }  /* Relativ zum nächstgelegenen positionierten Vorfahren */

/* Festes Positionieren */
div { position: fixed; top: 50px; left: 60px; }  /* Fest relativ zum Viewport */

/* Klebriges Positionieren */
div { position: sticky; top: 0; }  /* Klebrig relativ zu seinem Container */

Hintergründe

/* Hintergrundfarbe */
body { background-color: lightblue; }  /* Hintergrundfarbe festlegen */

/* Hintergrundbild */
body { background-image: url('image.jpg'); }  /* Hintergrundbild festlegen */

/* Hintergrundwiederholung */
body { background-repeat: no-repeat; }  /* Bildwiederholung deaktivieren */

/* Hintergrundposition */
body { background-position: center; }  /* Bildzentrierung */

/* Hintergrundgröße */
body { background-size: cover; }  /* Bildskalierung auf gesamte Fläche */

Schrift Eigenschaften

/* Schriftfamilie */
p { font-family: Arial, sans-serif; }  /* Schriftart */

/* Schriftgröße */
p { font-size: 16px; }  /* Schriftgröße */

/* Schriftgewicht */
p { font-weight: bold; }  /* Schriftstärke */

/* Schriftstil */
p { font-style: italic; }  /* Schriftstil */

/* Schriftfarbe */
p { color: #333; }  /* Schriftfarbe */

Text Eigenschaften

/* Textausrichtung */
p { text-align: center; }  /* Textzentrierung */

/* Textdekoration */
a { text-decoration: underline; }  /* Textunterstreichung */

/* Texttransformierung */
p { text-transform: uppercase; }  /* Großschreibung */

/* Textschatten */
p { text-shadow: 2px 2px #ff0000; }  /* Textschatten */

Übergänge

/* Übergangseigenschaften */
div {
  transition: all 0.3s ease;  /* Übergang */
}

div:hover {
  background-color: yellow;  /* Hover-Effekt */
}

Animationen

/* Keyframe-Definition */
@keyframes example {
  from { background-color: red; }  /* Startzustand */
  to { background-color: yellow; }  /* Endzustand */
}

/* Animation anwenden */
div {
  animation-name: example;  /* Animationsname */
  animation-duration: 4s;  /* Dauer */
  animation-iteration-count: infinite;  /* Wiederholung */
}

Transformationen

/* Drehung */
div { transform: rotate(45deg); }  /* Rotation */

/* Skalierung */
div { transform: scale(1.5); }  /* Skalierung */

/* Verschiebung */
div { transform: translateX(50px); }  /* Translation */