Unterschied zwischen ausführlichen und kompakten Deklarationen in CSS3

Stell dir vor…

…du gestaltest eine Webseite und möchtest, dass alles perfekt aussieht. CSS3 ist 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

KriteriumAusführliche DeklarationenKompakte Deklarationen
LesbarkeitHohe Lesbarkeit durch explizite Definitionen.Weniger klar für Anfänger.
GranularitätSehr präzise Kontrolle über jede Eigenschaft.Weniger granular, da mehrere Eigenschaften zusammengefasst werden.
WartbarkeitEinfachere Nachvollziehbarkeit von Änderungen.Schnelleres Finden und Ändern ähnlicher Eigenschaften.
KompaktheitKann zu langen, redundanten CSS-Dateien führen.Kürzerer und übersichtlicherer Code.
SchreibaufwandErfordert mehr Zeit zum Schreiben und Pflegen.Spart Zeit und reduziert Schreibaufwand.

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 */

Avatar Keywordblog

Wer schreibt hier?:

Hey, ich bin René Nebeling, nahe an der 40, seit einigen Jahren Webdesigner bei renistic.com. Mein Fokus liegt darauf, nicht nur ansprechende Designs zu schaffen, sondern auch funktionale und benutzerfreundliche Websites zu entwickeln.

Auf keywordblog.de teile ich meine Gedanken, Erfahrungen und die neuesten Trends rund um Webdesign, SEO und mehr. Warum? Weil ich glaube, dass Wissen geteilt werden sollte, und ich möchte dir helfen, das Beste aus deiner Online-Präsenz herauszuholen.

In meinen Blogbeiträgen findest du nicht nur technische Tipps, sondern auch Einblicke in die Denkweise eines Webdesigners. Hier geht es nicht nur um Codes und Farben, sondern auch um die Geschichten, die eine Website erzählen kann.

Fragen, Kommentare oder Anregungen? Immer her damit!

Stay creative, René Nebeling
Oder hier kannst du auch Kontakt zu mir aufnehmen:


    Datenschutz