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.

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.

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.

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.

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.