Entrar Ainda não tem acesso?

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

1
resposta

[Dúvida] Não entendo estruturas CSS como a SMACSS e a BEM

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Seletores e posicionamento e atividade Para saber mais: Class

por Levi Lima Santana
| 139.6k xp | 396 posts

estou com duvidas em estruturas css e nao compreendi lendo todos os artigos.Alguem poderia me dar alguma dica de como usa-las.

1 resposta
por Maria Eduarda Gonçalves
| 1959.9k xp | 6655 posts
Instrutor

Olá, Levi! Tudo bem com você?

A SMACSS é uma metodologia de escrita de CSS que visa tornar os estilos mais organizados, escaláveis e fáceis de manter em projetos grandes ou complexos. Ela divide os estilos em cinco categorias principais: Base, Layout, Módulos, Estados e Temas. Cada categoria tem um propósito específico e ajuda a estruturar o CSS de forma mais eficiente.

Dicas:

  • Comece dividindo seus estilos em categorias: o que são estilos básicos compartilhados em todo o site (Base), como os elementos são dispostos na página (Layout), quais componentes modulares você tem (Módulos), como eles podem estar em diferentes estados (Estados) e, se aplicável, como aplicar temas diferentes (Temas).
  • Utilize classes descritivas para nomear seus estilos, evitando estilos com nomes genéricos que podem gerar conflitos no futuro.
  • Pratique a separação de responsabilidades. Evite colocar regras de layout dentro de módulos, por exemplo, mantendo a estrutura clara e organizada.

BEM é outra abordagem para escrever CSS que tem como objetivo tornar o código mais claro e reutilizável. Ele utiliza uma convenção de nomenclatura especial para nomear as classes dos elementos HTML de forma hierárquica. Cada nome de classe é composto por três partes: Bloco, Elemento e Modificador.

Dicas:

  • Entenda a estrutura da nomenclatura BEM: .bloco__elemento--modificador. Isso ajuda a identificar visualmente a hierarquia dos elementos na página.
  • Pense nos componentes como "blocos" independentes que podem ser reutilizados em diferentes contextos, e os elementos internos do bloco como "elementos".
  • Utilize modificadores para estilos variantes de um bloco ou elemento, evitando a criação de classes específicas para cada caso.

Espero ter conseguido ajudar! Se precisar estou aqui.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA