Metodologia Atomic Design e Bem.txt

O BEM é uma metodologia CSS utilizada para melhorar a maneira como organizamos nossos arquivos e classes:

https://blog.alura.com.br/criando-componentes-css-com-padrao-bem/

Nesse post, explicamos e entramos em mais detalhes sobre a metodologia e como ela deva ser aplicada.

documentação: https://en.bem.info/methodology/

---------------
Metodologia Atomic Design.

utilizar seletores CSS mais simples;

a organizar a estruturar os arquivos css do projeto;

Vamos revisar o que aprendemos durante o projeto. Nós criamos um projeto referente a um site de receitas chamado Fruta e Fruto, contendo um cabeçalho, um banner, informações sobre o site, uma listagem de receitas, as pessoas que estão por trás do site e, por fim, um rodapé com informações de contato.

No desenvolvimento do projeto, usamos boas práticas de CSS para que a manutenção do nosso código fique o mais fácil e simples possível. Vimos que é interessante utilizar uma metodologia chamada BEM (Block, Element, Modifier) para nomear as nossas classes CSS.

Nessa metodologia, o "block" representa um componente "pai"; os elementos são os "filhos" desse componente; e os modificadores são classes que modificarão esse componente.

Também utilizamos a metodologia Atomic Design, criando um arquivo para cada CSS e, dessa forma, mantendo nossos códigos curtos e simples, facilitando a manutenção. O conceito do Atomic Design lembra a química, onde os átomos formam moléculas, que por sua vez formam organismos.

Aprnedemos que é interessante organizarmos as propriedades dos nossos arquivos CSS em ordem alfabética, facilitando a busca em nosso código. Por exemplo, se estamos no color e queremos alterar o margin-right, sabemos que ele estará mais abaixo.

Também vimos que é recomendado utilizar apenas seletores de classes, em detrimento dos seletores de ID, de TAG ou seletores alinhados. Isso porque os seletores de classes facilitam as edições caso seja necessário sobrescrevê-los.

artigo: https://www.alura.com.br/artigos/criando-componentes-css-com-padrao-bem