Este artigo foi publicado em 20/04/2015. Por ter sido considerado um dos melhores artigos de 2015, foi republicado hoje.

CSS3 é coisa linda! Apesar de ser suspeito pra falar, acredito que cada vez mais pessoas estão caindo nas graças do CSS. Uma coisa legal que tenho visto, principalmente nos meetups CSS SP, é que uma galera, que muitas vezes nunca havia mexido ou então mexido pouco com CSS, está querendo fuçar, mesmo que para algo pessoal.

Uma coisa que sempre falo é que o CSS3 vem pra melhorar a vida de todo mundo. Nós, desenvolvedores, ganhamos uns fios de cabelos a mais, pois conseguimos fazer coisas que antes precisávamos dar uma volta gigantesca, em poucas linhas; e o usuário pode ganhar uma experiência melhor.

Isso não quer dizer que, só de você usar CSS3, seu código e a UX do seu projeto irão se transformar em uma das 7 maravilhas do mundo. É quase a mesma comparação que o Nando Vieira faz com pré-processadores: ele cita que são apenas ferramentas e que não irão transformar seu código ruim em algo bom.

Componentes, modularização e o mundo real

Cada vez mais, surgem ideias e metodologias de como arquitetar seu CSS. Se você se interessa pelo tema, recomendo a talk do Rafael Rinaldi: Arquitetura CSS. Acredito que, no fim, o objetivo comum seja ter um código modularizado e com componentes bem definidos. No entanto, muitas vezes isso acaba parando por aí e lidamos com componentes estáticos. É normal, muitas vezes navegando pela interwebs da vida, clicarmos em um botão, e um form ou uma mensagem surgir do nada na tela.

Funciona? Sim, funciona. Mas acho que fica um pouco distante do mundo real, e é possível melhorar isso. No mundo real, as coisas não aparecem do nada. Você não vai encher seu copo de água e do nada o copo aparece cheio; existe um fluxo de coisas a acontecerem: você sabe que a água que está caindo ali, em tempo real no seu copo, vem do galão, que, ao mesmo tempo, começa a ficar mais vazio.

Na web, as coisas não precisam ser diferentes. As pessoas estão acostumadas com o mundo real. Coisas aparecendo do nada na tela acabam passando uma sensação/experiência de uma coisa distante do mundo real.

Claro que nada tem que ser ao extremo. Nesse ponto, me guio por uma frase que minha mãe sempre fala: tudo que é em exagero faz mal. E quando falamos de CSS3, precisamos ter essa separação bem definida, sobre o quê, quando e como usar.

A analogia ao Flash

Se tem um monte de coisa legal, por que não usar, certo? Acredito que em partes. Gosto de fazer uma analogia ao Flash nesse ponto. O Flash oferecia um monte de recursos legais. Só que parecia que, em alguns projetos, era requisito que tudo tinha que ser usado ao mesmo tempo, o que acabava tendo um efeito inverso: uma coisa que era pra ser algo legal e, por exemplo, enriquecer a experiência do projeto ou ser um diferencial positivo, acabava por se tornar um ponto negativo, pelo exagero de coisas em um único lugar.

Quando falamos em CSS3, podemos ir pelo mesmo caminho. Temos muitas coisas novas legais como transition, transform, animation…; aí que acredito que temos que ter o mesmo discernimento de saber quais, quando e como usar essas propriedades em prol da experiência do usuário, e não achar que quanto mais coisas forem colocadas, mais cool será o projeto e, com isso, fazer com que nossa aplicação pareça uma árvore de natal.

Os detalhes

Um dos principais pontos que acredito que o CSS3 pode atacar são os *detalhes. Acredito que principalmente os pequenos podem ser responsáveis pelo sucesso de um produto. E, quando falo isso, acho que é de uma forma geral, e não só na web, mas também produtos físicos e até serviços: por exemplo, se você vai a uma loja ou um restaurante e é super bem atendido, esse quesito não conta na experiência que você teve? Você não o levará em conta para uma próxima visita?

Aí é que entra o CSS3 pra nos ajudar com esses detalhes no mundo da web. As propriedades transition, transform e animation facilitam e muito as coisas. Se você gosta do tema, há um tempo, falei sobre a relação de CSS e UX no 7Masters CSS.

Fiz um pequeno exemplo também, pra tentar demonstrar algumas das coisas que falei:  [codepen_embed height=”268″ theme_id=”0″ slug_hash=”ZYrrKP” default_tab=”result” user=”raphaelfabeni”]See the Pen <a href=’http://codepen.io/raphaelfabeni/pen/ZYrrKP/’>CSS list</a> by Raphael Fabeni (<a href=’http://codepen.io/raphaelfabeni’>@raphaelfabeni</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Já que estamos falando de CSS, em maio (dia 09) vai rolar a Conferência CSS Brasil que é o primeiro evento nacional focado em CSS. Tem alguns nomes de peso já confirmados. Corre lá e se inscreve.

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue com a hashtag 1postperweek e vamos conversar.

***

Artigo publicado originalmente em: http://www.raphaelfabeni.com.br/css-ux/