Organizando o CSS no seu projeto
Quando nosso projeto começa a crescer e ter uma quantidade significativa de páginas diferentes, a gente precisa encontrar uma maneira de organizar o nosso código, e começamos a ver um cenário muito comum de:
- Código duplicado
- Conflitos de nomes de classes
- Falta de padrão nos nomes das classes
A gente aqui na Alura já pensou e repensou sobre como resolver esses problemas na hora de organizar nosso CSS. Nesse post vou trazer aqui um pouco desse processo pra vocês!
Vamos pegar um componente que representa um curso da Alura, por exemplo:
<!-- começo do componente box -->
<a class="box" href="#">
<img loading="lazy" class="image" src="#">
<h3 class="title">Curso de HTML CSS >
</a>
Esse HTML representa um link de curso da Alura. Ele contém uma imagem e um título, e visualmente deve ficar assim:
Agora veja bem, em uma plataforma de cursos online qual é o problema em cima desse componente? Ora, ele é usado em vários lugares da aplicação! O que isso cheira? Duplicação de código!
Ele aparece na página de todos os cursos:
Quanto na página de carreiras:
Claro, o estilo varia um pouco mas em suma é o mesmo código. Ou seja, boa parte do CSS desse componente pode ser reaproveitado!
Então como podemos de fato reaproveitá-lo? Vamos ver isso agora.
Para escrevermos CSS temos que começar criando um arquivo .css. Veja que neste caso temos duas páginas, tanto a /courses quanto a /carreiras, ou seja, podemos ter dois arquivos .css, um para cada página, assim nosso código fica mais organizado.
courses.css
.box {}
.image {}
.title {}
carreiras.css
.box {}
.image {}
.title {}
E no HTML:
carreiras.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura | Carreiras</title>
<link href="/css/carreiras.css" rel="stylesheet">
</head>
<!-- todo código HTML aqui incluindo o html dos componentes box -->
.
.
.
courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura | Cursos</title>
<link href="/css/courses.css" rel="stylesheet">
</head>
<!-- todo código HTML aqui incluindo o html dos componentes box -->
.
.
.
Ok, apesar disso funcionar qual ainda é o problema? Os estilos se repetem! Como reaproveitar então?
O que temos em comum entre essas duas páginas é que ambas tem o componente que chamamos de 'box'. Podemos então isolar seu css em um arquivo 'box.css' e depois importá-lo nas duas páginas.
box.css
.box {}
.image {}
.title {}
E agora o html
carreiras.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura | Carreiras</title>
<link href="/css/box.css" rel="stylesheet">
<link href="/css/carreiras.css" rel="stylesheet">
</head>
<!-- todo código HTML aqui incluindo o html dos componentes box -->
.
.
.
courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura | Cursos</title>
<link href="/css/box.css" rel="stylesheet">
<link href="/css/courses.css" rel="stylesheet">
</head>
<!-- todo código HTML aqui incluindo o html dos componentes box -->
.
.
.
Veja que também mantemos o courses.css no courses.html e carreiras.css no carreiras.html, Assim podemos colocar nesses .css o estilo particular a cada página, enquanto deixamos o estilo do box em si isolado no box.css
E se eu quiser agora usar o estilo do box em outra página? Ora, basta importar o box.css no html dessa outra página!
Poxa maravilha, foi assim que fizeram na Alura então?
Em parte sim, mas ainda tem mais coisas!
Existem por exemplo códigos CSS que são usados em basicamente TODAS as páginas da aplicação. O reset.css, que ajuda a remover particularidade de estilo de navegadores diferentes, é um deles.
No nosso caso, também temos o famoso ‘container’, que cria um espaçamento lateral no conteúdo das nossas páginas. Para ele e casos similares criamos um base.css que é importado em toda a Alura, simples assim!
courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura | Cursos</title>
<link href="/css/base.css" rel="stylesheet">
<link href="/css/box.css" rel="stylesheet">
<link href="/css/courses.css" rel="stylesheet">
</head>
<!-- todo código HTML aqui incluindo o html dos componentes box -->
.
.
.
É claro, no exemplo acima só coloquei o HTML da /courses importando o base.css mas ele deve ser importado em TODAS as páginas do projeto.
Antes de mais nada vamos recapitular aqui:
- Temos várias páginas na Alura. Quando temos um componente que vemos que se repete, a gente isola ele em um arquivo separado e o importa nessas páginas. Ex: box.css para o componente box.
- Para estilos do componente que são particulares a uma página, criamos um arquivo css para ela e adicionamos esses estilos dentro dele. Ex: courses.css para courses.html
- Para estilos comuns a todas as páginas, criamos um base.css que importamos em todos os HTMLs
Esses 3 conceitos foram extraídos do SMACSS, esse guia de boas práticas divide seus mandamentos em: 1. Base 2. Layout 3. Module 4. State 5. Theme
- Base é o que chamei de base.css, que é o estilo base de todas as páginas ( reset, container, etc )
- Layout é o estilo específico de cada página ( courses.css, carreiras.css, etc )
- Module é o estilo de componentes que se repetem em várias páginas ( box.css )
E calma lá, vamos entrar agora no state!
State, mais conhecido em pt-br como estado, se relaciona com os estados dos nossos componentes. Pense no seguinte componente de menu de navegação.
<navbar class="navbar">
<a href="#" class="item">Home</a>
<a href="#" class="item">Cursos</a>
<a href="#" class="item">Carreiras</a>
</navbar>
Digamos que o usuário clica no link Cursos do menu, o que deveria acontecer?
- O usuário é redirecionado para a página courses.
- O item do menu fica pintado de uma cor diferente, normalmente uma cor mais forte para indicar em que página o usuário está.
Quando o item do menu fica nesse estado diferente após clicado, dizemos que ele está agora no estado ativo.
E oras, como podemos fazer esse item mudar de estado? Perceba que mudar sua cor é basicamente código CSS, ou seja, para alterar estado do item podemos simplesmente colocar uma classe nele com a cor diferente!
Se clicamos no item do menu, o nosso javascript deve colocar nesse elemento a classe
.active {}
Bam! Mudamos o estado dele, agora ele fica de uma cor diferente!
Legal, então temos esse outro mandamento do SMACSS, crie uma classe para seu estado, coloque ou tire ela do elemento conforme você precisar modificar o estado.
Por fim, antes de falar do Theme que é o último mandamento do SMACSS, vamos fazer um exercício aqui:
Dado que o menu é usado em algumas páginas, mas não todas, como ele é classificado no SMACSS pelo que a gente viu até agora?
- Base
- Layout
- Module
Se você optou por C você acertou! Ele é um module (pode chamar de componente). Aonde quisermos usar o menu importamos o CSS dele no HTML!
Agora falando sobre o Theme do SMACSS, eles mesmos na documentação citam que é pouco usado,e sinceramente não usamos na Alura.
Essa parte é basicamente para organizar CSS quando lidamos com projetos que podem ter toda a sua interface visual modificada rapidamente por outra. Imagina sites que você pode alterar uma opção e mudar para o tema DARK do site, que muda todo o visual.
Legal gente, agradeço quem leu até aqui, conseguimos organizar a estrutura dos nossos arquivos CSS para não ficar repetindo código e etc mas ainda temos uns problemas que precisamos enfrentar.