CSS/ACSS

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

  1. Atomic Web Design von Brad Frost, 06.10.2013
  2. Challenging CSS Best Practices von Thierry Koblentz, 21.10.2013
  3. OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? von Hilja Studio
  4. Atomic CSS as a tool set von Alma Madsen 31.01.2014
  5. The “Other” Interface: Atomic Design With Sass von Robin Rendle, 02.08.2013