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