Jaké přístupy k psaní CSS znáte?

— BEM (Blok, Element, Modifikátor) — komponentní přístup, kde jsou styly popsány pro nezávislé bloky, jejich prvky a modifikátory. Zlepšuje čitelnost a udržovatelnost.

— CSS Modules — lokalizuje CSS podle výchozího nastavení, předchází konfliktům jmen. Každý CSS soubor se stává modulem.

— Styled Components / Emotion — knihovny CSS-in-JS. Umožňují psát CSS přímo v kódu JavaScript/TypeScript, pomocí označených šablonových literálů. Zajišťují enkapsulaci stylů na úrovni komponent.

— Utility-first CSS (například Tailwind CSS) — zaměřuje se na použití předdefinovaných utility tříd (například flex, pt-4, text-center) pro tvorbu rozhraní přímo v markupu. Rychlý vývoj, ale může vést k nafouklému HTML.

— OOCSS (Object-Oriented CSS) — odděluje strukturu a vzhled, stejně jako kontejner od obsahu. Podporuje opakované použití CSS.

— SMACSS (Škálovatelná a modulární architektura CSS) — organizuje styly podle kategorií (Base, Layout, Modules, State, Theme) pro škálovatelnost.

Každý přístup má své výhody a nevýhody, volba závisí na velikosti projektu, týmu a preferencích. BEM je vhodný pro klasické CSS, CSS Modules a CSS-in-JS jsou populární s komponentními frameworky, Utility-first je vhodný pro rychlé rozvržení.