Como usar o BEM na Refatoração de codigos com CSS/Sass

𝙃𝙤𝙟𝙚 𝙚𝙝 𝙙𝙞𝙖 𝙙𝙚 𝙢𝙖𝙡𝙙𝙖𝙙𝙚? 𝙣𝙖𝙤 𝙨𝙚𝙞, 𝙨𝙤𝙝 𝙨𝙚𝙞 𝙦𝙪𝙚 𝙫𝙖𝙢𝙤𝙨 𝙛𝙖𝙡𝙖𝙧 𝙙𝙤 𝘽𝙀𝙈!

🌟 Vamos falar sobre algo que pode transformar sua abordagem ao desenvolvimento frontend: 𝙖 𝙚𝙨𝙩𝙞𝙡𝙞𝙯𝙖𝙘𝙖𝙤!

Você já parou para pensar na importância do CSS na experiência do usuário? Se sim, prepare-se para mergulhar no padrão BEM!

BEM, que significa 𝗕𝗹𝗼𝗰𝗸, 𝗘𝗹𝗲𝗺𝗲𝗻𝘁, 𝗠𝗼𝗱𝗶𝗳𝗶𝗲𝗿, é uma metodologia incrível para nomear suas classes em CSS. Pense assim:

• 𝗕𝗹𝗼𝗰𝗸: A base, como um header ou container.
• 𝗘𝗹𝗲𝗺𝗲𝗻𝘁: As partes que fazem sentido dentro do bloco, como menu__item.
• 𝗠𝗼𝗱𝗶𝗳𝗶𝗲𝗿: As variações, como menu--hidden.

𝙋𝙤𝙧 𝙦𝙪𝙚 𝙫𝙤𝙘𝙚̂ 𝙙𝙚𝙫𝙚 𝙪𝙨𝙖𝙧 𝘽𝙀𝙈? Aqui vão algumas razões:

• 𝗟𝗲𝗴𝗶𝗯𝗶𝗹𝗶𝗱𝗮𝗱𝗲: Suas classes falam por si mesmas, tornando a relação entre CSS e HTML clara.
• 𝗜𝗻𝗱𝗲𝗽𝗲𝗻𝗱𝗲̂𝗻𝗰𝗶𝗮: Blocos que podem ser reutilizados sem se preocupar com interferências.
• 𝗦𝗲𝗺 𝗖𝗮𝘀𝗰𝗮𝘁𝗮: Adeus, sobreposições indesejadas!

Imagine que você está trabalhando em uma equipe grande. Com 𝗕𝗘𝗠, 𝗰𝗮𝗱𝗮 𝗱𝗲𝘀𝗲𝗻𝘃𝗼𝗹𝘃𝗲𝗱𝗼𝗿 𝗰𝗼𝗻𝘀𝗲𝗴𝘂𝗲 𝗲𝗻𝘁𝗲𝗻𝗱𝗲𝗿 𝗮 𝗲𝘀𝘁𝗿𝘂𝘁𝘂𝗿𝗮 𝗱𝗼 𝗰𝗼𝗱𝗶𝗴𝗼 𝗿𝗮𝗽𝗶𝗱𝗮𝗺𝗲𝗻𝘁𝗲, sem medo de quebrar estilos.

🔧 E se você está utilizando frameworks como 𝗥𝗲𝗮𝗰𝘁, 𝗩𝘂𝗲 𝗼𝘂 𝗔𝗻𝗴𝘂𝗹𝗮𝗿, BEM se encaixa perfeitamente na sua jornada de componentização, mantendo a consistência e a escalabilidade.

Quer um exemplo prático? Dê uma olhada nesta estrutura de card na imagem com o código

Mesmo sem o CSS, dá para ver a lógica clara por trás da estrutura, certo?

E você deve estar se perguntando: "𝗠𝗮𝘀 𝗲 𝗼 𝗧𝘆𝗽𝗲𝗦𝗰𝗿𝗶𝗽𝘁?" A mágica acontece quando você combina a lógica do TypeScript com a estilização do 𝗕𝗘𝗠.

O resultado? Um 𝘤𝘰𝘥𝘪𝘨𝘰 𝘧𝘳𝘰𝘯𝘵𝘦𝘯𝘥 𝘳𝘰𝘣𝘶𝘴𝘵𝘰, 𝘮𝘢𝘯𝘶𝘵𝘦𝘯𝘪𝘷𝘦𝘭 𝘦 𝘴𝘶𝘱𝘦𝘳 𝘭𝘦𝘨𝘪𝘷𝘦𝘭.

E você já conhecia ou já adotou o 𝗕𝗘𝗠 nos seus códigos? 💪✨

𝘼𝙟𝙪𝙙𝙚 𝙘𝙤𝙢𝙥𝙖𝙧𝙩𝙞𝙡𝙝𝙖𝙣𝙙𝙤 𝙤 𝙥𝙤𝙨𝙩. 𝘾𝙤𝙢𝙚𝙣𝙩𝙚 𝙚 𝙙𝙚𝙞𝙭𝙚 𝙨𝙪𝙖 𝙤𝙥𝙞𝙣𝙞𝙖̃𝙤, 𝙥𝙤𝙞𝙨 𝙢𝙪𝙞𝙩𝙤 𝙞𝙢𝙥𝙤𝙧𝙩𝙖𝙣𝙩𝙚 𝙥𝙖𝙧𝙖 𝙩𝙧𝙖𝙯𝙚𝙧 𝙢𝙖𝙞𝙨 𝙘𝙤𝙞𝙨𝙖𝙨.