Was ist »Atomic Design« bzw. ACSS / Atomic CSS?

Erklärung

Das sog. Atomic Design ist ein Konzept zur Organisation von Web Layouts. Das Ziel von Atomic Design besteht u.a. darin, komplexe Projekte konsistent zu gestalten und übersichtliche Sinneinheiten zu erzeugen. Das wiederum vereinfacht die Zusammenarbeit von mehreren Personen am gleichen Projekt.

Der Begriff Atomic Design wurde von Brad Frost aus der Wissenschaft abgeleitet. In dem von Ihm erfundenen Konzept werden alle Module einer Website aus elementaren Elementen, den sog. Atomen aufgebaut. Dabei folgt das Konzept folgender Philosophie:

Atome

einzelne HTML-Elemente, z.B. ein Link

Moleküle

Gruppen von HTML-Elementen. Ein Teaser wird beispielsweise aus einem Link, einem Textabsatz und einer Überschrift gebildet

Organismen

Gruppen von Molekülen, z.B. ein Bereich mit mehreren Teasern, ein Header oder ein Slider

Templates

Eine einzelne Unterseite bestehend aus verschiedenen Organismen

Seiten

Die komplette Website mit all Ihren Inhalten

ACSS steht für Atomic CSS. Mit Hilfe von ACSS ist es möglich Module wiederverwertbar zu machen und den Code schlank zu halten.