Organizando o CSS No Seu Projeto

ENTRAR MATRICULE+SE
TODOS OS NOSSAS PARA DEV

CURSOS FORMAÇÕES EMPRESAS EM 5T6
Artigos > Front-end
Organizando o CSS no
seu projeto
Yuri Padilha
Atualizado em 30/09/2021
COMPARTILHE
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:


<a class="box" href="#">
<img class="image" src="#">
<h3 class="title">Curso de HTML
</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 HTMLV
carreiras.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width
<title>Alura | Carreiras</title>
<link href="/css/carreiras.css" rel
</head>
<!-- todo código HTML aqui incluindo o
.
.
.
courses.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Alura | Cursos</title>
<link href="/css/courses.css" rel
</head>

.
.
.
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>
<title>Alura | Carreiras</title>
<link href="/css/box.css" rel="styl
<link href="/css/carreiras.css"
</head>
.
.
.
courses.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
.
.
.
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>
<link href="/css/base.css" rel=
</head>
.
.
.
É 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 href="#" class="item">Cursos
<a href="#" class="item">Carreiras
</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.
Yuri Padilha
Yuri é desenvolvedor full-stack, formado em

Tecnologia de Informação pela USP. Como instrutor
de cursos presenciais AFront-end, Java e PHP, Spring
e MySQLI sumarizou mais de 1 000 horas de aulas
ministradas.
Artigo Anterior Próximo Artigo
Nomes de classes no JavaScript:

CSS convertendo String
para número
Leia também:
Criando componentes CSS com o padrão BEM
Nomes de classes no CSS
Criando Layouts com CSS Grid Layout
Colocar as propriedades no CSS em ordem
alfabética é melhor pra performance?
Criando pseudo-elementos mais rapidamente
com Sass
Veja outros artigos sobre

Front-end
Quer mergulhar em
tecnologia e aprendizagem?
Receba a newsletter que o nosso CEO

escreve pessoalmente, com insights do
mercado de trabalho, ciência e
desenvolvimento de software
Escreva seu email
ME INSCREVA
Nossas redes e apps
Institucional
Sobre nós
Trabalhe conosco
Para Empresas
Para Escolas
Política de Privacidade
Compromisso de Integridade
Termos de Uso
Status
A Alura
Como Funciona
Todos os cursos
Depoimentos
Instrutores(as)
Dev em UTV
Conteúdos
Alura Cases
Imersões
Artigos
Podcasts
Artigos de educação
corporativa
Fale Conosco
Email e telefone
Perguntas frequentes
Novidades e Lançamentos
mariaquinyas@gmail.com ENVIAR
CURSOS
Cursos de Programação
Lógica | Python | PHP | Java | .NET |
Node JS | C | Computação | Jogos | IoT
Cursos de Front-end
HTML, CSS | React | Angular | JavaScript |
jQuery
Cursos de Data Science

Ciência de dados | BI |
SQL e Banco de Dados | Excel |
Machine Learning | NoSQL | Estatística
Cursos de DevOps
AWS | Azure | Docker | Segurança | IaC |
Linux
Cursos de UX & Design

Organizando o CSS No Seu Projeto

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Organizando o CSS No Seu Projeto

Enviado por

Direitos autorais:

Formatos disponíveis

ENTRAR MATRICULE+SE

TODOS OS NOSSAS PARA DEV

Artigos > Front-end

Quando nosso projeto começa a crescer e ter

Conflitos de nomes de classes

Falta de padrão nos nomes das

A gente aqui na Alura já pensou e repensou

Vamos pegar um componente que representa

Esse HTML representa um link de curso da

Agora veja bem, em uma plataforma de cursos

Ele aparece na página de todos os cursos:

Quanto na página de carreiras:

Claro, o estilo varia um pouco mas em suma é

Então como podemos de fato reaproveitá-lo?

Para escrevermos CSS temos que começar

<!-- todo código HTML aqui incluindo o

Ok, apesar disso funcionar qual ainda é o

O que temos em comum entre essas duas

Veja que também mantemos o courses.css no

E se eu quiser agora usar o estilo do box em

Poxa maravilha, foi assim que fizeram na Alura

Em parte sim, mas ainda tem mais coisas!

Existem por exemplo códigos CSS que são

No nosso caso, também temos o famoso

É claro, no exemplo acima só coloquei o HTML

Antes de mais nada vamos recapitular aqui:

!" Temos várias páginas na Alura.

$" Para estilos do componente que são

%" Para estilos comuns a todas as

Esses 3 conceitos foram extraídos do

Base é o que chamei de base.css, que

Layout é o estilo específico de cada

Module é o estilo de componentes

E calma lá, vamos entrar agora no state!

State, mais conhecido em pt-br como estado,

Digamos que o usuário clica no link Cursos do

!" O usuário é redirecionado para a

$" O item do menu fica pintado de uma

Quando o item do menu fica nesse estado

E oras, como podemos fazer esse item mudar

Se clicamos no item do menu, o nosso

Bam! Mudamos o estado dele, agora ele fica

Legal, então temos esse outro mandamento

Por fim, antes de falar do Theme que é o

Dado que o menu é usado em algumas

Se você optou por C você acertou! Ele é um

Agora falando sobre o Theme do SMACSS,

Essa parte é basicamente para organizar CSS

Legal gente, agradeço quem leu até aqui,

Yuri é desenvolvedor full-stack, formado em

Artigo Anterior Próximo Artigo

Nomes de classes no JavaScript:

Veja outros artigos sobre

Receba a newsletter que o nosso CEO

Escreva seu email

Nossas redes e apps

Cursos de Data Science

Cursos de UX & Design

Você também pode gostar