Estruturando um projeto com atomic design
Arquitetura css — part.2
Hoje vamos falar um pouco sobre o que é o atomic design e como podemos usar ele ao nosso favor quando pensamos em estrutura de projetos. Irei contextualizar e dar alguns exemplos práticos de estutura, vamos lá?
Contextualizando
O que é Atomic Design?
Atomic Design é um conceito muito utilizado por alguns designers para poderem fazer style guides na criação de protótipos e é uma metodologia criada para design systems. Assim, ela possui 5 níveis distintos:
- Átomos;
- Moléculas;
- Organismos;
- Templates;
- Páginas;
Átomos
Os Átomos são basicamente os blocos mais básicos da nossa aplicação, podemos pensar por exemplos nas tags HTML, tipogafria, botões, labels, ícones, inputs (checkbox, radio button, switch), animações, cores. Dessa forma, geralmente usamos os átomos quando nos referimos à coisas que podem ser globais no nosso projeto.
Moléculas
As moléculas são grupos de átomos, ou seja, juntamos dois átomos e construímos uma molécula que tenha algum significado e funcionalidade. Por exemplo, quando queremos fazer um simples form de envio, um botão e um input só trabalhariam legal se estiverem juntos pois um precisa do outro para ter a funcionalidade correta e assim se forma uma molécula.
Nesse caso agrupamos 4 átomos, uma label, tipografia, input e botão.
Organismos
Os organismos são grupos de moléculas e que podem ter diferentes ou parecidas moléculas para construir componentes autônomos ou reutilizáveis. Por exemplo, podemos ter um logo, um menu com opções de navegações e um componente que nos ajuda a procurar coisas no site:
Templates
Os templates é quando construímos algo que faz mais sentido para o cliente, vendo do lado de desenvolvimento seria um wireframe que com o tempo aumenta a fidelidade para entrega do produto final.
Páginas
As páginas são basicamente a parte mais específica dos templates, aonde colocamos coisas reais do nosso site, nesse estágio teríamos um wireframe de alta fidelidade.
Frontend com Atomic Design
Agora que temos todos conceitos claros sobre atomic design, o que isso interfere no nosso desenvolvimento frontend? Bom, primeiramente tudo o que citei acima é usado para construção de um design system que futuramente será desenvolvimento e colocado em produção. Assim, podemos simplesmente usar isso ao nosso favor e separar nosso projeto em elementos.
Muitos desenvolvedores tem costumes de quando vai fazer, por exemplo, uma landing page usar apenas o style.css para colocar todos estilos e isso é um problema, pelo o simples fato de você acabar em algum momento se perdendo em tanto código. Para isso usaremos o atomic design, para quebrar nosso estilo em partes.
Benefícios
Para ficar mais claro, podemos dar destaque a boa organização do seu código como um benefícios e consequentemente, quando for fazer alguma manutenção no seu projeto, será muito mais fácil de mexer em pequenos arquivos do que procurar em um arquivo gigante de 200 linhas ou mais.
Estrutura
Peguei um projeto do FrontendMentor para um exemplo breve, o layout é bem simples e é basicamente fazer alguns cards:
Para isso separei minha estrutura da seguinte forma:
- Cor azul claro: seria o nosso átomo
- Cor azul: seria o nosso organismo
A partir disso eu separei a minha estrutura com os seguintes arquivos:
Nesse eu vi cada pedaço da minha aplicação, pensando na metodologia de atomic design para quebrar o necessário e ter algo que faça sentido. Separando dessa forma meu código ficou muito mais organizado e quando eu for fazer alguma manutenção futura eu não preciso ficar caçando alguma propriedade, se eu quiser mudar algo no card eu saberei aonde está, se eu quiser mudar algo na tipografia eu sei aonde ir.
Nesse caso, eu usei CSS com SASS mas não muda nada quando uso apenas CSS, segue o mesmo fio:
Nesse caso separei mais com organismos que estavam na página.
No primeiro exemplo observem que eu nomeio os arquivos com um _ na frente (_variables-mixins), isso é uma convenção que usamos quando dizemos que aquele arquivo está sendo importado e não chamando diretamente ele.
Todos os arquivos que eu uso essa convenção eu uso o @import e importo todos no meu style.css principal, assim quando eu for chamar meu css no meu index.html não preciso chamar diversos arquivos css, chamo apenas um:
E assim teremos um css muito mais organizado, dê fim na scrollagem infinita no seu style.css!
Você pode separar seus arquivos de acordo com a sua necessidade, podem ser vários átomos, organismos ou moléculas, para termos um resultado mais agradável, tornando seu código mais profissional e usando boas práticas.
Lembre-se: sempre é bom quebrar! Códigos muito extensos dificultam a manutenção.
Agradecimento
Obrigada por ler meus artigos, espero que tenha gostado, quase queira deixe um feedback e sugestões para futuros artigos no link abaixo:
https://2ruj8qjr61d.typeform.com/to/pWiJmFy2
Se sinta a vontade para dar sua opinião! ;)
Série Arquitetura CSS
Você também pode acompanhar meu primeiro post sobre essa série:
