🎨 Semântica CSS

Introdução

A semântica CSS está relacionada à criação de códigos organizados, claros e fáceis de compreender.

Diferente do HTML, onde a semântica define o significado do conteúdo, no CSS ela está ligada à forma como criamos nomes de classes, estruturas e estilos.

O que é Semântica?

Semântica significa atribuir significado aos elementos.

CSS Não Semântico

Um exemplo de código difícil de entender:

.red {

 color:red;

}


.box1 {

 margin:20px;

}

Os nomes não explicam a finalidade do elemento.

CSS Semântico

Classes devem representar o papel do elemento.

.menu-principal {

 background:#333;

}


.card-produto {

 padding:20px;

}

O nome explica sua utilização.

Nomeando Classes corretamente

Metodologia BEM

BEM significa:

• Block - componente principal.
• Element - parte do componente.
• Modifier - variação.

.menu {

}


.menu__item {

}


.menu__item--ativo {

}

Exemplo utilizando BEM

.card {

 border:1px solid #ccc;

}


.card__titulo {

 font-size:24px;

}


.card--destaque {

 background:#eee;

}

Organização de Arquivos CSS

css/

│

├── reset.css

├── layout.css

├── components.css

├── pages.css

└── responsive.css

A separação facilita encontrar e alterar estilos.

Separação de Responsabilidades

CSS Reutilizável

Criar classes reutilizáveis evita repetição de código.

.botao {

 padding:10px;

 border-radius:5px;

}


.botao-principal {

 background:blue;

}

Benefícios da Semântica CSS

Boas Práticas

• Criar nomes descritivos.
• Evitar nomes relacionados a cores.
• Separar componentes.
• Organizar arquivos.
• Manter padrão de escrita.

Erros Comuns

Resumo Final