Das Dokument behandelt die Prinzipien von Clean Code in CSS, einschließlich Struktur, Namenskonventionen und Wartbarkeit. Es gibt Beispiele für gutes und schlechtes CSS sowie Richtlinien zur Verwendung von Einheiten und Konventionen, um unordnung und ineffizienten Code zu vermeiden. Des Weiteren werden Methoden und Tools vorgestellt, um Clean Code zu schreiben und anzuwenden, wie BEM, SMACSS und CSS-Module.

1. CSS Clean Code
Rick Jäger, ETECTURE

2. Warum Clean Code?
- Struktur
- Naming
- Wartbarkeit
- Wiederverwendbarkeit
- Konventionen

3. Naming
Was ist ein guter Name?
- Ein Name beschreibt.
- Ein Name ist eindeutig.
- Ein Name ist einfach.
- Keine Abkürzungen
Don’t do this: .red-btn
Instead do this: .button-primary

4. Clean Code Beispiele
- Vermeide Globale und Element-Selektoren:
*, p, button, h1, [type=checkbox]
- Verkette keine Klassen:
.message.warning
- Vermeide id Selektoren:
#sidebar
- Vermeide CSS “Hacks”
- Benutze Einheitliche Einheiten (der Einheit wegen)
NEXT: Chaos ist vorprogrammiert!

5. Einheiten
in - inches (1in = 96px = 2.54cm)
px - pixels (1px = 1/96th of 1in)
pt - points (1pt = 1/72 of 1in)
pc - picas (1pc = 12 pt)
em - Relative to the font-size of the
element
ex - Relative to the x-height of the
current font
ch - Relative to width of the "0"
rem - Relative to font-size of the root
element
vw - Relative to 1% of the width of the
viewport
vh - Relative to 1% of the height of
the viewport
vmin - Rel. to 1% of viewports smaller
dimension
vmax - Rel. to 1% of viewports larger
dimension
% - Relative to the parent element

6. Wie schreibe ich Clean Code?

7. Konventionen

8. Spaghetti CSS
- “zufällige” Anordnung von CSS-Properties
- Naming irgendwie so das es passt
- Unkontrolliertes Wachstum
- Copy & Paste
- CSS Frameworks
- Dead Code

9. So geht es besser

10. Code Style Konventionen
Interne Code Style-Guide (Team / Projekt)
- Schreibweisen (Camel Case, Pascal Case, usw.)
- logische vs alphabetische Sortierung der Attribute
- oder...

11. https://codesandbox.io/s/zwxl8xljvm
Christmas CSS

12. Code Style “Helper”
- CSS Linter
- Prettier (https://prettier.io/)
- PostCSS (https://postcss.org/)

13. Konventionen
- Externe Code Style Guides (Community getrieben)*
- BEM / SMACSS
- SASS / LESS / Stylus
- CSS Modules
* Google Style Guide: https://google.github.io/styleguide/htmlcssguide.html
Github: https://styleguide.github.com/primer/
Website Style Guide Resources: http://styleguides.io/

14. BEM (Block, Element, Modifier)
1. Block
Beschreibt Elemente, die unabhängig von ihrem Einsatzort verwendet
werden.
z.B. <nav>, <header>, <footer>
2. Element
Elemente sind immer an einen Block gebunden
3. Modifier
Variante eines Elements, wie z.B. :hover, :active

15. SMACSS (Scalable and Modular Architecture for CSS)
1. Base
Elementares Styling von HTML-Elementen
2. Layout
Unterteilung der Website in grobe Sinnabschnitte wie Header, Footer,
Content etc.
3. Module
Wiederverwertbare Bereiche des Layouts – z. B. Boxen, Formulare, Slider
etc.
4. State
Zustände von Elementen
5. Theme

16. CSS Modules
Laut Offizieller Definition:
“A CSS Module is a CSS file in which all class names and animation names are
scoped locally by default.” (https://github.com/css-modules/css-modules)
- Live in one place
- Only apply to that component and nothing else
- BEM/SMACSS not required

17. Und was bringt mir das überhaupt?

18. Performance*

19. CSS Render Speed
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* Element -> Class -> ID*/
.main-navigation { } /* Class */
ul li a.current { } /* Element -> Element -> Class */
ul { } /* Tag */
ul li a { } /* Tag -> Tag -> ...*/
* { } /* Universal (Slowest) */
#content [title='home'] /* Universal */

20. CSS Render Speed
#main-nav > li { } /* Slower than it might seem */
ul#main-navigation { } /* Don’t do this */
html body ul li a { } /* efficiency disaster */
Nicht so:
#main-navigation li a { font-family: Georgia, Serif; }
Sondern so:
.main-navigation { font-family: Georgia, Serif; }

21. Cascade Order
Embedded/External Styles
Tags
Classes
ID
Inline Styles !important
Style Sheet
Inline Styles

22. .presentation::after {
content: “Vielen Dank!”;
}