Konsistente UIs mit Tailwind CSS

Ein Einblick in Utility-First CSS

Transcript

1. Konsistente UIs mit Tailwind CSS Ein Einblick in Utility-First CSS
2. Heutiger Standard Semantische Klassen, Komponenten (BEM), Pre-Processors (SASS/ LESS)
3. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern

4. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt.
5. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt. —> Braucht viel Zeit, generische Namen oder passen mit der Zeit nicht mehr.
6. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt. —> Braucht viel Zeit, generische Namen oder passen mit der Zeit nicht mehr. —> Semantik geht verloren.
7. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt. —> Braucht viel Zeit, generische Namen oder passen mit der Zeit nicht mehr. —> Semantik geht verloren. —> führt zu viel neuem CSS und mit der Zeit zu Inkonsistenz.
8. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt. —> Braucht viel Zeit, generische Namen oder passen mit der Zeit nicht mehr. —> Semantik geht verloren. —> führt zu viel neuem CSS und mit der Zeit zu Inkonsistenz.
9. Heutiger Standard - Schwierigkeiten Component-First: Für alles wird eine Komponente definiert
 Geeignete Namen finden ist schwierig
 Komponenten für andere Anwendungszwecke „missbrauchen“
 Komponenten erstellen anstatt Bestehende ändern
 —> obwohl diese vielleicht nur einmal vorkommt. —> Braucht viel Zeit, generische Namen oder passen mit der Zeit nicht mehr. —> Semantik geht verloren. —> führt zu viel neuem CSS und mit der Zeit zu Inkonsistenz.
10. Was ist Utility-CSS Eine Funktion pro Klasse, möglichst kein neues CSS schreiben, UI wird nur mit Utility- Klassen zusammen- gesetzt
11. Limitierte Auswahl von verfügbaren Styles
 Vordefiniertes, überschaubares Set von CSS-Klassen
 Single Responsibility
 Schnelle Erarbeitung eines Resultats
 Vorteile von Utility-CSS
12. Limitierte Auswahl von verfügbaren Styles
 Vordefiniertes, überschaubares Set von CSS-Klassen
 Single Responsibility
 Schnelle Erarbeitung eines Resultats
 Vorteile von Utility-CSS —> ermöglicht mehr Konsistenz
13. Limitierte Auswahl von verfügbaren Styles
 Vordefiniertes, überschaubares Set von CSS-Klassen
 Single Responsibility
 Schnelle Erarbeitung eines Resultats
 Vorteile von Utility-CSS —> ermöglicht mehr Konsistenz —> dem gesamten Team bekannt, klar was die einzelnen Klassen bewirken
14. Limitierte Auswahl von verfügbaren Styles
 Vordefiniertes, überschaubares Set von CSS-Klassen
 Single Responsibility
 Schnelle Erarbeitung eines Resultats
 Vorteile von Utility-CSS —> ermöglicht mehr Konsistenz —> dem gesamten Team bekannt, klar was die einzelnen Klassen bewirken —> Wartung des CSS einfacher
15. Limitierte Auswahl von verfügbaren Styles
 Vordefiniertes, überschaubares Set von CSS-Klassen
 Single Responsibility
 Schnelle Erarbeitung eines Resultats
 Vorteile von Utility-CSS —> ermöglicht mehr Konsistenz —> dem gesamten Team bekannt, klar was die einzelnen Klassen bewirken —> Wartung des CSS einfacher —> Prototypen werden gefördert, Designing in the browser
16. Utility-First Tailwind CSS
17. Utility-First Component-friendly Tailwind CSS
18. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
19. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
20. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
21. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
22. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
23. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
24. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
25. Customizing
 —> Alles ist individuell konfigurierbar in einer JavaScript-Datei Tailwind CSS
26. Vorgehen / Best Practices —> Grundsätzlich das Styling mit Utilities vornehmen —> Sobald sich Wiederholungen abzeichnen, diese in Komponenten auslagern —> Möglichst wenig neues CSS schreiben, Komponenten mit bestehenden Utilities (@apply) erstellen Tailwind CSS
27. Weitere Informationen Über Tailwind CSS tailwindcss.com fullstackradio.com Über Utility-CSS https://adamwathan.me/ css-utility-classes-and- separation-of-concerns/ Über mich www.benigartenmann.ch @benigartenmann