Metodologias de CSS são práticas utilizadas para organizar e manter o código CSS de um projeto de forma mais eficiente e escalável. Entre as diversas metodologias existentes, duas das mais populares são o BEM e o SMACSS.
BEM (Block Element Modifier) é uma metodologia que se concentra em dividir o código em blocos, elementos e modificadores. Os blocos são as principais seções do site, como cabeçalho, rodapé, menu etc. Os elementos são partes desses blocos, como os botões dentro de um menu ou um formulário dentro de um bloco de conteúdo. Os modificadores são variações de um bloco ou elemento, como um botão que muda de cor ao passar o mouse por cima.
SMACSS (Scalable and Modular Architecture for CSS) é uma metodologia que se concentra em dividir o código em cinco categorias: base, layout, módulos, estado e tema. A base inclui as propriedades que se aplicam a todo o site, como fontes, cores e espaçamento. O layout inclui as regras que definem a estrutura do site, como a largura da página e as colunas. Os módulos são partes do site que podem ser reutilizadas em vários locais, como um bloco de conteúdo ou um formulário. O estado inclui as variações de um módulo, como um botão que muda de cor ao passar o mouse por cima. O tema inclui as variações visuais do site, como um tema escuro ou claro.
aqui está um exemplo básico de código utilizando a metodologia BEM:
php<!DOCTYPE html>
<html>
<head>
<title>Exemplo BEM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="block">
<div class="block__element">Elemento 1</div>
<div class="block__element">Elemento 2</div>
<div class="block__element block__element--modifier">Elemento 3</div>
</div>
</body>
</html>E aqui está o arquivo style.css correspondente:
css.block {
background-color: #ccc;
padding: 10px;
}
.block__element {
background-color: #fff;
padding: 10px;
margin-bottom: 5px;
}
.block__element--modifier {
background-color: #f00;
color: #fff;
}Nesse exemplo, temos um bloco .block com três elementos filhos .block__element. O terceiro elemento recebe uma classe modificadora .block__element--modifier que muda a cor de fundo e a cor do texto. A metodologia BEM utiliza essa convenção de nomeação de classes para deixar o código CSS mais claro e organizado.
Segue abaixo um exemplo de código utilizando a metodologia SMACSS:
css/* Base styles */
.header {
background-color: #333;
color: #fff;
font-size: 24px;
padding: 10px;
}
/* Layout styles */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Module styles */
.featured-product {
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
padding: 20px;
}
.featured-product__image {
width: 50%;
margin-right: 20px;
}
.featured-product__title {
font-size: 36px;
}
.featured-product__description {
font-size: 18px;
}
/* State styles */
.featured-product--highlighted {
background-color: #ffc107;
color: #fff;
}Nesse exemplo, temos as seguintes divisões:
- Base styles: estilos que definem as características básicas dos elementos;
- Layout styles: estilos que definem o layout dos elementos na página;
- Module styles: estilos que definem as características dos módulos da página;
- State styles: estilos que definem os diferentes estados dos elementos, como :hover, :active, etc.
Dessa forma, é possível organizar melhor o código e torná-lo mais fácil de manter e atualizar. Além disso, a metodologia SMACSS ajuda a evitar problemas de especificidade e torna o CSS mais escalável e reutilizável.