Při každé aplikaci je nutné se zamyslet jaký směr z pohledu CSS zvolíme. Špatná cesta může znamenat nepřehlednost kódu, přepisování stylů a déle trvající vývoj. Atomic design nám dáva způsob jak vytvářet udržatelné CSS design systémy a znovu použitelné komponenty.
Stejně aj v našich webových systémech se komponenty skládají z menších komponent či elementů. To znamená, že můžeme začat od toho nejmenšího a rzovíjet design směrem nahoru. To je základní podstata a myšlenka Atomic Design.
Nedesignujeme stránky, designujeme systém komponent - Stephen Hay
Úrovně v Atomic design
Základní rozdělení atomic designu je do 5 kategorií. Atoms, molecules, organisms, templates a pages.
Atoms
Atom je nejmenší entita v rozhraní. Jsou základním kamenem celého designu. Mohou to být elementy jako label, input, button nebo odstavec textu. Nebo také klidně animace.
Molecules
Molekuly jsou složeny z atomů. Spojením atomů nám vzniká větší použitelná entita, například input s labelem. Nebo uživatelova fotka s jménem.
Organisms
Rovnako, jak jsme budovali molekuly z atomů, tak organismy tvoříme spojením molekul. Organismy vytvářejí relatívně komplexné uživatelské rozhraní. Organismy nám již začínají výrazně napovídat celkový vzhled a rozložení stránek.
Templates
V templates vzniká kompletní layout webu nebo jednotlivé sekce. Templates spojují různé organismy do soudržného celku a vytvářejí konzistnení designový systém. Neobsahují žádná data ale sdělují nám uspořádaní finálního produktu.
Pages
Pages jsou specifickou instancí templates. Zde již vidíme obsah, který tvoří hotový produkt pro uživatele spolu se všechnými komponentami. Pages tvoří v hierarchií nejvyšší stupínek, protože právě pages jsou komponentou, která ovlivní další správaní uživatele na webu.
Stránky jsou zásadní i ve skutečnosti, že nám ukazují efektivitu nášho zvoleného design systému. Ukazují nám jak jsme navrhli naše komponenty, jak vypadá web s nadpisem o délce 30 znaků, nebo o délce 130 znaků. Jak vypadá web s reálnými obrázkami uživatelů nebo obsahem redaktorů.
Struktura složek
Atomic design říka o atomoch, molekulách, organismoch jako o hlavních komponentách, kteřé pak tvoří jednotlivé templates a pages. Můžeme si teda v složke components vyrobit složky atoms / molecules a organisms.
src
components
atoms
molekules
organismsVýhody a nevýhody Atomic design
Atomic Design poskytuje jednoduchou ale efektivní myšlenku jak rozvíjet design systémy na webu. Při dodržení jeho princípů nám vznikají znovu použitelné komponenty a díky nim i zachování konzistence designu skrz celý web. Modularita systému jde naproti Atomic Designu, dokážete lehce přidávat, měnit nebo odstranovat atomy do molekul a rychle tak vytvářet organismy. Díky tomu, že rozdělujeme komponenty na stále menší dokáže na projektu pracovat více vývojářu a zrychluje proces vývoje.
Jako všechno má i Atomic design své nevýhody. Jednou z nich může být potřebná znalost celého systému, každý člen musí vědet základní koncepty tohoto systému. Další nevýhoda může být, že tenhle systém vyžaduje, aby byl dobře naplánován už od samého začátku projektu, jinak se nám nemusí podařit dosáhnout požadovaného výsledku.
BEM a Atomic Design
Atomic design je metodologie, která nám ale neříka nic o tom, jaké zvolit názvoslový pro náš systém z pohledu HTML a CSS. Zde má uživatel svobodu, osobně doporučuji známy BEM (block__element--modifier). Dokonce i BEM má svou odnož pro Atomic Design - ABEM. Hlavní rozdlíl je v tom, že přidávate prefix pro jednotlivé komponenty na základě toho do které skupiny v rámci Atomic design patří [a/m/o].
Příklad v klasickem BEMu: blockName__elementName--modifierName
Takhle by to vypadalo v ABEM: [a/m/o]-blockName__elementName--modifierName
Atomic Design BEM je samostatná kapitola, pokuď vás to zajíma, tak doporučuji super článek na CSS Tricks.
Co dál?
Nejvíc co můžete udelat je, že si Atomic design vyzkoušíte ve vašem přištím projektu. Nebo se také můžete podívat na video o Atomic Design na YouTube od Brada Frosta.
Pro ty, které systém zaujal existuje i knižka od samotného autora a to jak v tištěné podobě, tak v e-booku.
Zdroje
https://bradfrost.com/blog/post/atomic-web-design/
https://blog.logrocket.com/applying-atomic-design-next-js-project/
https://css-tricks.com/abem-useful-adaptation-bem/
https://dev.to/sanfra1407/how-to-organize-your-components-using-the-atomic-design-dj3
https://ozdemirdamla.medium.com/atomic-design-and-css-naming-conventions-e79abcba175b