CSS/ACSS
Unter ACSS (Atomic CSS) versteht man einen neuen Ansatz in der Webseitengestaltung, vorgestellt 2013 von Brad Frost in seinem Artikel Atomic Web Design[1].
Atomic Web Design
Danach lässt sich jede Webseite aus unteilbaren Elementen, den Atomen, zusammenstellen:
- Atome: einzelne HTML-Elemente, z. B. ein Link oder ein input-Feld
- Moleküle: zusammengehörende Gruppen wie ein input-Feld mit label und button
- Organismen: Gruppen von Molekülen, z. B. eine Navigation mit mehreren Unterlisten
- Templates: Der wireframe einer Seite
- Seiten: Die komplette Website mit dem gesamten Layout
Atomic CSS
Aus diesem Ansatz heraus stellt Thierry Koblentz den Grundsatz der Trennung von Inhalt und Design infrage[2][3]. Er kritisiert, dass das Bilden von Klassen nach semantischen Gesichtspunkten zu aufgeblähtem und schwierig zu veränderndem Code führt und propagiert eine Vielzahl von stilorientierten Klassen [4], wie z. B.:
.mt-20 {
margin-top: 20px;
}
.fl {
float: left;
}
Problematisch an diesem Ansatz ist, dass solche Klassen nicht durch media queries an verschiedene Viewports angepasst werden können.
Atomic Design kann auch in SASS verwendet werden[5].
Weblinks
- ↑ Atomic Web Design von Brad Frost, 06.10.2013
- ↑ Challenging CSS Best Practices von Thierry Koblentz, 21.10.2013
- ↑ OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? von Hilja Studio
- ↑ Atomic CSS as a tool set von Alma Madsen 31.01.2014
- ↑ The “Other” Interface: Atomic Design With Sass von Robin Rendle, 02.08.2013
