CSS SCSS Beispiel Datei|Projekt für Atomic Design

Karsten_bln · 18.02.2019

Halli Hallo in die Runde,

vielleicht kann mir ja einer von den CSS Experten hier weiter helfen.
Wir versuchen seit geraumer Zeit Atomic Design in unserer Agentur umzusetzen. Es gibt immer wieder Punkte an denen wir uns nicht wirklich einig sind, wo ein Atom endet und man die SCSS Anweisungen in das Molekül oder den Organismus schreibt.
Wir haben uns schon so einige Beiträge zum Thema durchgelesen bzw. besprochen und auch das Periodensystem zu rate gezogen aber manchmal bin ich unsicher was ich wohin schreiben "sollte" und Diskussionen im Team sind zeitraubend und nicht immer zielführend.
Kennt vielleicht jemand hier komplexere Projekte auf einer Plattform wie github wo man sich mal ein Beispiel mit Dateien anschauen kann?

dn3d_fanboy · 18.02.2019

Wo genau liegt denn jetzt das Problem? Ihr wisst nicht, wie ihr Elemente per CSS ansprechen sollt (also über das Element selbst oder über die Elternelemente)?

Ich muss ehrlicherweise gestehen, dass ich von Atomic Design noch nie etwas gehört oder gelesen habe.
Aber eigentlich wird da einem logischen HTML/CSS-Aufbau doch nur irgendwelche Fantasienamen verpasst.

Das schrieb t3n u.a. in einem Beitrag (Quelle: https://t3n.de/news/atomic-design-baukastensystem-721010/) zum Thema:

„Atomic Design“ ist wörtlich gemeint. Es geht vom Atom als kleinstem Bestandteil eines Designs aus. Ein Atom ist beispielsweise ein HTML-Tag oder ein Font oder eine andere, nicht weiter verkleinerbare Einheit im Design-System. Ein Molekül ist dann ein Konglomerat mehrerer Atome, die gemeinsam (als Molekül) eine Aufgabe lösen. Das könnte zum Beispiel ein vollständiges HTML-Formular sein. Die nächstgrößere Einheit bezeichnet Frost als Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle. Ein Organismus könnte beispielsweise ein kompletter Seitenheader oder -footer oder der Bereich mit aktuellen News sein. Ich denke, du kannst dir vorstellen, was gemeint ist.

Meiner Meinung nach ist es ziemlich egal, wie ich das ganze nenne und wie ich das in seine Einzelteile runterbreche.

Myhar · 19.02.2019

Genau darum geht es doch, dass eben keine Fantasienamen vergeben werden. Es geht darum, dass Klassen danach vergeben werden, je nachdem, wie "klein" die Komponente ist.
Wir verwenden auch atomic approach in einigen (größeren) Projekten, aber ehrlich gesagt: Wirklich einfach und auf den ersten Blick logisch ist es nicht wirklich. Vor allem deshalb, weil ein Projekt ja auch wächst und sich ändert, da kann es mal vorkommen, dass ein Atom dann besser zu einem Molekül passt.
Um solch zeitraubende Diskussionen auszubremsen: Jeder soll nach bestem Wissen und Gewissen eine Komponente mit in Molekül, Atom etc. einbauen. Idealerweise hat man die einzelnen Objekte ja in separate Ordner getrennt, also einen Ordner /atoms/, einen Ordner /molecules/ und einen /ogranisms/. Natürlich soll es auch einen Projektleiter geben der das letzte Wort hat. Ist ein Element also im falschen Ordner dann muss das css/html von einem in den anderen geschoben werden und die Klassennamen angepasst werden, kein all zu großer Aufwand. Bzw. wenn vor dem Start kurz abgeklärt wird, wo man es hineingibt und der Leiter eben sagt "Ja" oder "Nein". Wirklich schlimm ist es auch nicht, wenn ein Objekt im falschen Ordner liegt, hauptsache man weiß, wo man es findet und wie man es einfach einbauen kann.
Zusammengefasst: Je kleiner eine Komponente, desto eher kommt sie in "atoms". Verschieben von Objekte soll bei einer ordentlichen Projektstruktur kein all zu großer Aufwand sein, es darf halt nicht vergessen werden, die Klassen auch in anderen Komponenten dann anzupassen. Auch hat hier jedes Team so einen eigenen Ansatz, so lange es für euch funktioniert dann passt es schon.

Karsten_bln · 19.02.2019

Danke für die Antwort @dn3d_fanboy nur wenn mehrere Leute an einem Projekt arbeiten und es größer wird macht eine Strukturierung von CSS schon Sinn. Ich finde es sogar bei einfacheren Projekten sinnvoll weil du die SCSS SASS oder LESS Dateien sauber in anderen Projekten nutzen kannst. Atomic Design ist ja nur eine Variante die man nutzen kann und wenn mehrere Leute dran arbeiten spart das schon Zeit.

@Myhar thanks. Ja so arbeiten wir Order -> generell > atoms > molecules > organismus > usw..... wenn es zuviel wird auch nochmal mit klar benannten Unterordnern und weil genau diese Frage (ist es noch ein Molekül oder Organisnmus / molekül oder Atom kommt der border mit ins atom?... ) immer wieder aufkommt wollte ich mir mal ein größeres Projekt das irgendwo öffentlich zugänglich ist anschauen. Und nen bisschen mit den Augen stehlen.