35
CSS Best Practices 5 Ratschläge für besseres CSS

CSS Best Practices

Embed Size (px)

Citation preview

Page 1: CSS Best Practices

CSS Best Practices5 Ratschläge für besseres CSS

Page 2: CSS Best Practices

MotivationWarum überhaupt Best Practices? CSS ist doch so einfach. Nicht.

Page 3: CSS Best Practices

#1 Kontext mit Namespaces● generische Namen im globalen Kontext vermeiden● mit Namespaces schreibt man robusteren Code

Page 4: CSS Best Practices
Page 5: CSS Best Practices
Page 6: CSS Best Practices
Page 7: CSS Best Practices

#2 Kurze SelektorenJe kürzer (und damit unspezifischer) Selektoren sind, desto besser.

Page 8: CSS Best Practices
Page 9: CSS Best Practices
Page 10: CSS Best Practices

Spezifitäts-Teufelskreis vermeiden

Page 11: CSS Best Practices
Page 12: CSS Best Practices

#3 (Sinnvolle) KommentareKommentare erleichtern das Code-Verständnis enorm.

Page 13: CSS Best Practices
Page 14: CSS Best Practices
Page 15: CSS Best Practices
Page 16: CSS Best Practices

#4 Unnötigen Code entfernenSollte eigentlich klar sein. Redundanter und damit unnötiger Code ist aber fast immer anzutreffen.

Page 18: CSS Best Practices
Page 19: CSS Best Practices
Page 20: CSS Best Practices
Page 21: CSS Best Practices

#5 Single ResponsibilityLogik kapseln und entkoppeln für → eleganteren Code→ weniger Code→ weniger Redundanz→ bessere Wartbarkeit

Page 22: CSS Best Practices

SMACSS

Page 23: CSS Best Practices
Page 24: CSS Best Practices
Page 25: CSS Best Practices
Page 26: CSS Best Practices
Page 27: CSS Best Practices
Page 28: CSS Best Practices
Page 29: CSS Best Practices
Page 30: CSS Best Practices
Page 31: CSS Best Practices
Page 32: CSS Best Practices
Page 35: CSS Best Practices

Fragen?

?