In CSS gibt es grundlegend zwei Möglichkeiten Elemente zu animieren: `animation` und `transition`. In diesem Artikel schauen wir uns an, welche Eigenschaft welche Vorteile hat und wann man welche verwenden sollte.

Es gibt immer wieder den Anwendungsfall Bilder auszublenden. Wenn das Ausblenden mit `display: none` erfolgt gibt es den großen Nachteil, dass das Bild trotzdem vom Browser heruntergeladen wird.

BEM ist eine Methode zur Strukturierung von CSS Stylesheets. Was BEM im Detail ist und wo die Vorteile sind wird in diesem Artikel beschrieben.

Wenn man sich bereits mit BEM vertraut gemacht hat wird man im Alltag einigen Problemstellungen begegnet sein. In diesem Artikel geht es darum möglichst viele dieser Problemstellungen zu beheben.

Im Internet findet man immer wieder Lösungen für [CSS Only Navigation](https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/), [Slider](https://codepen.io/dudleystorey/full/kFoGw/), [Tooltip](https://www.freecodecamp.org/news/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346/) und diverse andere Dinge die nur mit CSS umgesetzt worden sind, die auf den ersten Blick gut aussehen. Doch die CSS Only Lösungen haben alle eins gemeinsam: Sie funktionieren nur gut für den Sehenden Benutzer, der nicht auf Screen Reader angewiesen ist. Doch fangen wir erst mal von vorne an.

## Was ist @at-root?

Damit eine Webseite oder App gut aussieht werden heutzutage viele Animationen mit der `transition` Property verwendet. Doch damit es wirklich rund wirkt sollten die Animationen bis auf wenige Ausnahmen die gleiche Dauer und das gleiche Timing haben. Die Frage wie man das in großen Projekten sicherstellen kann wird in diesem Artikel beantwortet.

Es gibt laut Phil Karlton zwei komplizierte Dinge die Programierern begegnen.

_In diesem Artikel beziehe ich mich auf CSS bzw. SCSS. Das Prnzip kann auf weitere Bereiche übertragen werden._

[Keyframes ist eine Erweiterung für Chrome](https://chrome.google.com/webstore/detail/keyframes/dalaiblmpeklkjnpeocmaojcfldmbfck) (und weitere auf Chromium basierende Browser). Diese erlaubt es auf eine sehr einfache Art `@keyframe` zu erstellen.

Es kommt vor, dass Module angelegt werden, bei denen man zunächst fest davon ausgeht, dass diese immer Links beinhalten werden. So gibt es Teaser mit dem Element Link.

Mikrooptimierung beschreibt die Verbesserung von Performance in einem Kontext ohne konkreten Anlass dafür. Ein Beispiel dafür wäre die Funktion for von Javascript nicht zu verwenden und stattdessen eine eigene Funktion dafür zu schreiben, weil man sich davon eine Performancesteigerung verspricht.

In großen Projekten werden Buildscripte mit diversen Plugins dazu verwendet die Javascript und CSS Dateien zu minimieren. Das dient dazu, dass der Benutzer einer Webseite schneller die Seite benutzen kann, weil er zum Beispiel keine Leerzeilen und Kommentare herunterlädt, die für die Entwicklung wichtig sein können, den Broswer aber nicht interessieren.

Maps sind ein wunderbares Mittel in Sass um Key Value Inhalte abzubilden. Manchmal reichen die Inhalte einer Map nicht aus um das gewünschte Verhalten abzubilden. Aber zunächst die Grundlagen.

## Definition von `font-weight`

Ich komme aus einem Kontext, in dem das Styling eine sehr große Rolle eingenommen hat. Daher bin ich von Methoden wie BEM sehr angetan. Nun bin ich im Kontext von React unterwegs und viele meiner Glaubenssätze müssen über Board geschmissen werden. Natürlich könnte man weiterhin wie gewohnt eine SCSS Datei pflegen in der man nach BEM arbeitet. Da bietet das Tooling run um React aber eher wenig Hilfe.

Um den Besuchern einer Webseite möglichst viel Komfort zu bieten geht der Trend dazu Teaser vollflächig zu verlinken, um die Clickfläche möglichst groß und klar zu gestalten, anstatt nur den "mehr" Link als Clickfläche anzubieten.

Wenn es früher darum ging Teile von Elementen auszuschneiden hat man oft zum Pseudo-Element als Lösung gegriffen. Dabei hat man die Pseudoelemente an den ausgeschnittenen Stellen platziert und in der Hintergrundfarbe eingefärbt.

Es gibt viele Anwendungsfälle für Farbverläufe, welche teilweise transparent dargestellt werden. Jedoch gibt es ein Problem mit Safari, und somit auch iOS, welches man immer bedenken muss.

Wenn es darum geht Elemente anzuordnen ist Flex-box ein sehr mächtiges Werkzeug. Leider gibt es aber keine Möglichkeit zu bestimmen, welches Element das Letzte in einer Zeile sein soll.