Criando componentes apenas com css

No dia 20 de abril, realizei uma talk bem descontraída sobre Componentização com CSS na ThoughtWorks em Recife/PE, não pude deixar de notar que a forma de como esta técnica facilita o desenvolvimento e ajuda na peformance, chamou a atênção de muitos dev's. Resolvi deixar algumas considerações finais sobre componentização com css

Uma breve introdução

Apesar de ser desenvolvedor web, sempre fui um carinha apaixonado por front end, principalmente quando o assunto é relacionado à algum efeito Top of the Master.

Me recordo do primeiro desenho que vi com css foi o de Bernad de Luna, quando ele desenhou o Homer Simpsons apenas com css. Depois veio Felipe Fialho e fez um teclado, xadrez e um personagem de jogo de video game (não me recordo do nome... até na talk eu esqueci ¬¬').

Depois de um tempo brincando com desenhos e outras coisas feitas apenas com css, notei como o css nos possibilita a criação de diversas formas, mas eu queria mais que isso. Eu sabia que isto não iria ajudar em soluções reais para projetos, logo comecei a imaginar como aplicar estas técnicas "show" nos meus projetos do dia-a-dia.

Conhecendo as técnicas

Nos meados de 2013~2014, estudando algumas propriedades do css, pude notar algo que me chamou atênção. Lembrei que existe uma propriedade específica para input's do tipo checkbox ou radio, então várias idéias começaram a brotar da minha mente.

Imaginei que se eu posso prever uma ação de clique num campo especifico (claro o :checked existe para quando um campo for checado), eu posso ir muito além de criar simples formulários bonitinhos e estilizados. Então comecei a criar acordeons, dropdowns (só para esudo porque isto também é possivel com o :hover), galerias, modals, carroséis e etc...

Vale lembrar que também podemos obter uma determinada ação de clique atravês do :target

Sempre costumo antes de criar algo "very fuck" com css, pensar em toda a lógica que será utilizada.

ãh? lógica com css???

Não, eu não pirei, shusahushua, imagine comigo, se você quer atribuir um estilo em um elemento quando uma determinada ação acontecer, como você faria? Usaria javascript?

Porque não da uma chance para o nosso amigo css? Vamos pensar um pouco...

Criando o componente

Vejamos uma simples marcação html, com a estrutura de um modal:

<input type="checkbox" id="modal" hidden />
<label for="modal">Teste-me</label>

<article id="my-modal-content">
  <header>
    <h3>Meu Modal</h3>
  </header>

  <p>You fuck man!</p>
</article>

Note que escondemos o input com o atributo hidden do html

Agora vamos aplicar um estilo básico:

* {
  margin: 0;
  padding: 0;
}

label {
  color: #fff;
  display: inline-block;
  padding: 10px;
  background: blue;
  cursor: pointer;
}

#my-modal-content {
  position: absolute;
  top: 30px;
  margin-left: -200px;
  left: 50%;
  background-color: #fff;
  width: 100%;
  border: solid 1px #f3f3f3;
  min-height: 170px;
  max-width: 400px;
  box-shadow: 2px 2px 3px rgba(204, 204, 204, 0.45);
  border-radius: 5px;
}

h3 {
  margin: 0;
  padding: 13px 0 11px;
  font-size: 24px;
  border-bottom: solid 1px #f3f3f3;
  font-weight: 300;
}

p {
  font-size: 18px;
  padding-top: 20px;
}

h3,
p {
  padding-left: 31px;
}

logo o estilo do nosso modal ficaria desta forma:

Teste-me

Agora que tal estilizar os irmãos deste elemento apenas quando ele for checado?

Existe uma propriedade css que nos possibilita selecionar os irmãos de um determinado elemento, que é o acento ~ (til).

Colocarei um opacity:0; visibility:hidden no modal e uma transição para simular um efeito de fadeIn, para que fique escondido e com o pseudo elemento :checked faremos a mágicar acontecer!

#my-modal-content {
  (...)opacity: 0;
  visibility: hidden;
  -webkit-transition: ease-in-out all 0.5s;
  -moz-transition: ease-in-out all 0.5s;
  -ms-transition: ease-in-out all 0.5s;
  -o-transition: ease-in-out all 0.5s;
  transition: ease-in-out all 0.5s;
}

input:checked ~ #my-modal-content {
  opacity: 1;
  visibility: visible;
}

Teriamos um efeito parecido com este:

Teste-me

Perceba como foi simples, fácil, prático e peformático criar o nosso componente.

E a peformance?

Não vou me estender muito em questão de peformance para o post não ficar muito grande, mas só para você ter idéia, um site foi testado no GTMetrix antes de usar componentes apenas com css. Os valores obtidos foram os seguintes:

Page load time: 1.26s
Total page size: 197KB
Total number of requests: 8

Logo depois utilizamos componentes com css, embedamos o css e o carregamento dos icones foi descartado. Obtivemos os seguintes valores

Page load time: 0.75s
Total page size: 58.6KB
Total number of requests: 5

Um impacto de peformance bastante considerável pois simples ajustes que muitas vezes esquecemos de fazer, como diminuir requisições, podem causar um impacto muito maior na perfomance de um projeto.

Algumas fontes...

É sempre bom ter uma outra fonte de estudo. E como referência, não posso deixar de citar o site da MDN (clique aqui). Também encontrei um post da hora no blog do Felipe Fialho (clique aqui).

Frameworks <3

Não é bem componentização, mas engloba tudo... All Animation CSS3 é uma lib que contém várias animações css3 que pode nos auxiliar no desenvolvimento dos nossos componentes com animações css muito da hora.

"A parte boa da coisa sempre fica por ultimo", o Felipe Fialho (Fala felipão! já da pra cobrar pela citação do teu nome no post suhaushauha) criou o Pure CSS Components, uma lib muito bacana que reúne uma série de elementos componentizados com css, que vai desde um simples modal até um carrosel. Recentemente ela foi ré-escrita com o stylus. Vale apena conferir.

Considerações Finais

Sem dúvida o css já nos ofereceu muito e ainda terá muiiiiito a nos oferecer, só basta usar a cabeça e por a criatividade em prática!

É isso ai galera, um enorme abraço e até a próxima :D