Como deixar seu CSS Saudável
Paulo Tosi
Desenvolvedor Front-End
Tenho adquirido bastante experiência em front-end, embora atue nessa área há dois ano e meio, aproximadamente. Nesse período fui colaborador em projetos como SPTrans e Coca-Cola. E agora sou um novo colaborador front-end da TV Band.
tosipaulo
paulotosi.com.br
fb.me/tosi.paulo
tosi.paulo@gmail.com
Sinal de fumaça ;)
Por que css é tão difícil de manter?
- Dificuldade em mover elementos sem quebrar os estilos da página
- Complexidade de manutenção
- Impossível reaproveitar algum estilo para outro projeto
- Cada desenvolvedor cria classes CSS de maneira diferente
- Geralmente o CSS se torna gigante 'macarrao.css'
- Existe muita dependência de tags
.nav ul li a {...}
.nav ul li a:hover {...}
Ex.
Como resolver?
Como resolver?
Não existe uma solução única
Não existe uma bala de prata
MAS...
Existem algumas metodologias
HUM INTERESSANTE
CONTE-ME MAIS SOBRE ISSO
Metodologias CSS
- OOCSS
- SMACSS
- BEM
- DRY CSS
- RCSS
Entre outras...
Afinal, qual usar?
A metodologia escolhida vai variar de acordo com o projeto, equipe e padrão de cada empresa.
Usaremos como exemplo a metodologia 'BEM'
B
É uma abordagem baseada em componentes para desenvolvimento web.
A ideia por trás disso é dividir a interface do usuário em blocos independentes.
M
E
bloco
elemento
modificador
???????
B
O bloco é um contexto em que todo elemento se encontra dentro dele.
bloco
São partes que formam o bloco, nome da classe e composto por nome do bloco + dois underline e seu nome.
E
elemento
É o estado do elemento. Será usado quando precisar modificar o estilo desse elemento.
M
modificador
.menu{...}
.menu__item{...}
.menu__item--active{...}
Exemplo #1 - Modo errado
.card {
width: 290px;
overflow: hidden;
border-radius: 5px;
border: 1px solid #d4d4d5;
}
.card img {
display: block;
}
.card div {
background: #fff;
padding: 10px;
}
.card div h1 {
line-height: 3;
font-size: 25px;
}
.card div p {
color: #888
}
<article class="card">
<img src="http://fakeimg.pl/300x250/009EEB/FFF/?text=Imagem.jpg" alt="" />
<div>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
HTML
CSS
Resultado
Exemplo #2 - Modo 'QUASE' Correto
.card {
width: 290px;
overflow: hidden;
border-radius: 5px;
border: 1px solid #d4d4d5;
}
.card__img {
display: block;
}
.card__content {
background: #fff;
padding: 10px;
}
.card__title {
line-height: 3;
font-size: 25px;
}
.card__text {
color: #888
}
<article class="card">
<img class="card__img" src="http://fakeimg.pl/300x250/009EEB/FFF/?text=Imagem.jpg" alt="" />
<div class="card__content">
<h1 class="card__title">Title</h1>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
HTML
CSS
Resultado
Exemplo #3 - Modo Correto
.l-card {
width: 290px;
}
.card {
overflow: hidden;
border-radius: 5px;
border: 1px solid #d4d4d5;
}
.card__img {
display: block;
}
.card__content {
background: #fff;
padding: 10px;
}
.card__title {
line-height: 3;
font-size: 25px;
}
.card__text {
color: #888
}
<div class="l-card">
<article class="card">
<img class="card__img" src="http://fakeimg.pl/300x250/009EEB/FFF/?text=Imagem.jpg" alt="" />
<div class="card__content">
<h1 class="card__title">Title</h1>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
</div>
HTML
CSS
Resultado
Exemplo #4 - Usando Modificador
.l-card {
width: 290px;
}
.card {
overflow: hidden;
border-radius: 5px;
border: 1px solid #d4d4d5;
}
.card__img {
display: block;
}
.card__content {
background: #fff;
padding: 10px;
}
.card__content--disable {
background: #BDADA2
}
.card__title {
line-height: 3;
font-size: 25px;
}
.card__text {
color: #888
}
<div class="l-card">
<article class="card">
<img class="card__img" src="http://fakeimg.pl/300x250/009EEB/FFF/?text=Imagem.jpg" alt="" />
<div class="card__content card__content--disable">
<h1 class="card__title">Title</h1>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
</div>
HTML
CSS
Resultado
Se eu estiver falando muito bla bla bla, ou até mesmo alguma coisa errada, comunique para melhorar esse material ;)
FIM...
Como deixar seu CSS Saudável
By Paulo Tosi
Como deixar seu CSS Saudável
Utilizando metodologia BEM para organizar e estruturar seu CSS.
- 418