Tag Drei

CSS @import Regeln

Mit der @import-Regel kannst du ein Stylesheet in eine anderes Stylesheet importieren. Das ermöglicht uns in einem .html Dokument nur ein Stylesheet anzuhängen, unsere Designregeln jedoch sinngemäss auszulagern um eine bestmögliche Übersicht zu behalten.

            /* Import specific CSS Files */
@import url('globals.css');
@import url('sneakerCard.css');
@import url('mediaQueries.css');
        

Die @import-Regel muss immer am Anfang eines Stylesheets stehen und sie unterstützt auch Media-Queries.

BEM – Block, Element, Modifier

BEM steht für "Block, Element, Modifier". Es ist eine Methode zur Strukturierung von HTML- und CSS-Code, die eine einfache und skalierbare Organisation von Markup und Styles ermöglicht.

BEM basiert auf der Idee, dass jede Komponente einer Webseite als einzelnes "Block" organisiert wird, das aus einzelnen "Elementen" besteht. Jedes Element kann dann mithilfe von "Modifikatoren" angepasst werden, um unterschiedliche Aussehen und Verhalten zu erreichen.

Diese Strukturierung hilft Entwicklern, den Code übersichtlicher und leichter wartbar zu gestalten, indem sie die Abhängigkeiten zwischen HTML- und CSS-Komponenten klären. Außerdem ermöglicht es eine bessere Zusammenarbeit im Team, da es eine klare und einheitliche Vorgehensweise für die Organisation des Codes bietet.

Im Allgemeinen ist BEM ein nützliches Konzept für Frontend-Entwickler, da es hilft, den Code sauber, lesbar und einfach zu verwalten.

Wie funktioniert BEM?

Schauen wir uns an, wie ein bestimmtes Element auf einer Seite in BEM implementiert werden kann. Als Beispiel nehmen wir den Farbenauswahl Bereich unserer Teaser.

            .sneakerCard__colors {
  padding-right: var(--sneakerCard-textIndent);
  padding-left: var(--sneakerCard-textIndent);
}

.sneakerCard__color {
  margin-top: 0.625rem;
  width: 1rem;
  height: 1rem;
}

.sneakerCard__color--orange {
	background-color: #ffba53;
}

.sneakerCard__color--red {
	background-color: #b20f0f;
}

.sneakerCard__color--green {
	background-color: #0ef3af;
}

.sneakerCard__color--blue {
	background-color: #1251f1;
}
        

CSS Transformationen

CSS transform ändert die Position, Größe und Form, bevor das Element im Browser gerendert wird. Die Änderungen an den Koordinaten beeinflußt den normalen Fluss der Elemente nicht. Das transformierte Element legt sich unter oder über den benachbarten Inhalt, wenn kein Raum freigeschlagen ist.

Es gibt mehrere Transformations Properties, von welchen wir nachfolgend die üblichsten kennen lernen.

transform translate

Translate versetzt ein Element um den definierten Platz

            div {
  	/* Verschiebt um 40px auf X Achse und 10px auf Y Achse */
	transform: translate(40px,10px);
    /* Verschiebt um 40px auf X Achse */
	transform: translateX(40px);
  /* Verschiebt um 10px auf Y Achse */
	transform: translateY(10px);
}
        

transform rotate

transform:rotate (xdeg) rotiert ein Element im Uhrzeigersinn um seinen Mittelpunkt, anhand von zum Beispiel folgenden Einheiten:

• deg: Ein Grad ist 1/360 eines Vollkreises.

• turn: Eine Umdrehung ist ein Vollkreis. Eine halbe Umdrehung eines Kreises entspricht also 0,5 Umdrehungen oder 180 Grad.

            div {
  	/* Rotiert um 45 Grad (degrees) */
	transform: rotate(45deg);
}
        

transform: scale

transform: scale vergrößert (Werte > 1) bzw. verkleinert ein Element (Werte < 1). Die Transformation passiert aus der Mitte des Elements.

            div {
  	/* Vergrössert um 20% (* 1.2) */
	transform: scale(1.2);
}
        

transform skew

transform: skew (xdeg,ydeg) verzerrt ein Element in horizontaler / vertikaler Richtung um x / y Grad (deg).

            div {
 	/* Verzerrt um 30 Grad auf der X Achse */
	transform:skew(30deg,0deg);
}
        

Transformationen kombinieren

Transformationen können miteinander kombiniert werden. Die Eigenschaften werden nacheinander ohne Komma aufgeführt.

            div {
  	/* Vergrössert um 20% und rotiert um 360 Grad (eine Umdrehung) */
	transform: scale(1.2) rotate(1turn);
}
        

CSS Transition

CSS transition ändert den Wert einer CSS-Eigenschaft "weich" und über die Zeit. Dabei entstehen attraktive Übergänge wie das Ein- und Ausblenden und Bewegen von HTML-Elementen.

Eds gibt circa 50 Eigenschaften von background-color über font-size, text-shadow bis z-index, die sich mit CSS transition animieren lassen. Die Daumenregel lautet: CSS-Eigenschaften mit absoluten Werten wie px oder relativen Werten wie % lassen sich animieren, aber nicht mit Keywords wie top, right, auto.

            div {
	transition-property: transform;
  	transition-duration: 1s;
  	transition-timing-function: ease;
  
  	/* Oder als Kurzform */
	transition: 1s transform ease;
}

div:hover {
  	transform: translateX(20px);
}
        

Quellenangabe