CSS: do ‘Odeio essa m**’ a ‘pode deixar comigo!’

• traduzido e adaptado do excelente post do Ignacio Piantanida no blog do 10pines, de 24 de janeiro de 2017

Me lembro dos meus primeiros dias como desenvolvedor web, quando peguei uma tarefa que parecia tão simples: “nós precisamos adicionar um pequeno botão vermelho abaixo desse formulário. Ele precisa estar alinhado à direita. Ah! E verticalmente centralizado também”. Eu estava condenado. Algumas horas gastas quebrando o layout, consertando-o e quebrando-o novamente a cada mudança no CSS que eu fazia… todos nós já passamos por isso antes.

Felizmente, depois de ler esse post você aprenderá algumas dicas para ajuda-lo(a) no seu caminho para dominar CSS plenamente.

Bora lá!

0. Esqueça os navegadores antigos

Não chamaria isso exatamente de dica, ainda mais a 0, mas é algo que sempre levo em consideração ao iniciar um novo projeto.

Tente evitar ter que dar suporte a navegadores antigos. Dê uma olhada nas estatísticas de uso, e balanceie a relação maior alcance de usuários x custos extra no desenvolvimento. Dar suporte a coisas mais velhas que o IE 10 dá muita dor de cabeça.

É claro, nem sempre isso será possível. Eu conheço uma empresa que obriga todos os seus colaboradores que não trabalham diretamente com T.I. a usa o IE 7, então todas as ferramentas internas devem funcionar no dito-cujo. Se este é o seu caso, eu realmente sinto muito por você. Não poderei ajuda-lo(a).

Se você já possui um site e as estatísticas dele, observe como as versões e navegadores se comportam dentro do contexto do negócio. Por exemplo, em um dos projetos em que trabalhei, a porcentagem de usuários de IE era baixa em termos de visitas. Mas quando você olhava para dados como os de conversão de vendas por navegador, os usuários de IE tinham uma taxa de conversão muito maior, o que representava uma boa porcentagem de vendas.

Dê suporte àquilo que vale a pena.

1. Entenda as regras de precedência

Eu não posso deixar de frisar isso. Se você não entende porque uma certa propriedade está sendo aplicada sobre outra, estará sempre em guerra com frameworks, bibliotecas e até mesmo com o monte de CSS dos seus próprios projetos.

Digamos que você tem os seguintes códigos HTML e CSS:

<div id="container" class="my-container">
  I want my <span class="text red">color</span>
</div>

<style>
#container span {
  color: blue;
}

.my-container .text.red {
  color: red;
}
</style>

Qual você acha que será a cor do texto?

Se sua resposta foi “eu não ligo, simplesmente vou colocar um !important no que eu quero”, bem, lhe desejo uma vida regada a muito IE 6.

Para o resto das pessoas que ligam, a resposta é azul. Não interessa quantos seletores você adicionar na segunda regra, você nunca fará com que o texto fique vermelho.

A chave é que os diferentes tipos de seletores ( #id ,  .class , element or inline ) possuem diferentes precedências. Cada seletor possui um ‘peso’, e o maior peso ganha.

Uma boa fonte de estudo e compreensão sobre o assunto é o curtíssimo post do Steven Bradley, (Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade).

2. Utilize um pré-processador

Hoje em dia é difícil achar uma webapp que use só o CSS puro sem o uso de um pré-processador, mas se você está iniciando um novo projeto, adicione um pré-processador o quanto antes. Mixins, variáveis, herança e import ajudarão a manter seus estilos modulares e sem repetições (princípio DRY) do começo ao fim.

Eu sempre escolho Sass, que atualmente é o pré-processador CSS mais utilizado, seguido pelo Less.

3. Abrace o Flexbox para posicionamento

Com flexbox você pode construir um layout responsivo consistente, com apenas um pequeno conjunto de regras. Depois de usa-lo pela primeira vez, você nunca mais irá querer usar um float ou o grid system do bootstrap novamente.

Eu adoro esse joguinho, o flexboxfroggy.com, para aprender o básico.

Você deverá tomar muito cuidado com a compatibilidade de cada navegador e seus prefixos. O que nos leva à próxima dica…

4. Não escreva os prefixos de navegador manualmente

Adicionar os prefixos de cada navegador implica em duplicação, o que é tedioso a leva a erros.

Autoprefixer é uma ferramenta que lhe ajudará a lidar com as pequenas diferenças entre os navegadores. Baseado no CanIUse, você define quais versões de navegador você deseja dar suporte e o autoprefixer procurará nos seus arquivos CSS e adicionará as propriedades necessárias para cada navegador. Esqueça toda essa porcaria de -moz ou  -webkit.

Independente de qual stack você utilize durante o desenvolvimento, webpack, gulp ou grunt, é muito simples integra-lo.

Se você não quer mudar nada no seu pipeline, ao menos utilize alguma coisa tipo o Bourbon, uma biblioteca de mixins Sass que adicionam todos os prefixos para você.

5. Não utilize qualquer nome para classes, utilize uma metodologia

Conforme o projeto cresce, o número e grau de complexidade das suas páginas de estilo podem se tornar um problema. Se não for cuidadoso(a), adicionar uma simples propriedade a uma classe pode ter um gigantesco impacto em outras partes do site que você nem sequer imagina.

Usar uma metodologia específica irá prevenir esse tipo de erro. Ao mesmo tempo, definirá um padrão para sua base de código, garantindo consistência entre tantos estilos de diferentes desenvolvedores.

Há diversas técnicas para lidar com isso como BEM, OOCSS, SMACSS, etc… a única com a qual essou bem familiarizado é a BEM.

Com BEM (Box, Element, Modifier), você define classes do tipo  .bloco__elemento — modificador. Por exemplo, se você tem um cabeçalho com o logo da empresa e um botão de login, você terá classes como  .cabecalho__logo-empresa ,  .cabecalho__btn-logar ou  .cabecalho__btn-logar — oculto. Assim, toda vez que olhar para um seletor numa folha de estilos, você saberá em qual elemento ele está interferindo e onde encontra-lo.

Além disso, a BEM sugere uma estrutura chapada de classes (ao invés de aninhar tudo como  .cabecalho .btn-logar ). Dessa forma, você desacopla seus estilos das estruturas no HTML e seu estilo sempre funcionará da mesma forma (exceto para propriedades herdadas, é claro).

6. Entenda as diferentes unidades de medida

Você sabe a diferença entre px , em e  rem?

Você sabe o que as unidades de viewport ( vw e vh ) são?

Adicionar unidades além do px e % na sua caixa de ferramentas lhe permitirá expandir o que poderá fazer, especialmente ao lidar com sites responsivos. Aprenda mais sobre elas aqui.

7. Entenda todos os diferentes valores do POSITION

Já se perguntou porque às vezes você define o position como absolute e o elemento voa direto para o topo da página e outras vezes simplesmente permanece no mesmo lugar?

A chave é como os valores do position interagem entre si. absolute , relative , fixed ou static possuem seus próprios casos de uso e você deve entender onde cada um deles deve ser usado.

8. Pseudo-seletores

Os seletores CSS não são só as classes, ids e elementos. A cada nova versão da especificação CSS, um novo pseudo seletor aparece e permite realizar coisas com CSS puro que antes só podiam ser realizadas com Javascript ou processamento no servidor.

:last-of-type ,  :last-child ,  ::before são alguns dos exemplos de pseudo seletores que são usados a todo tempo. Este site mostra uma lista gigantesca de pseudo seletores incluindo definição, exemplos e o suporte em cada versão de navegador.

Não há muitos segredos aqui, mas assegure-se de que entende tudo o que as abas Styles e Computed têm a oferecer. Elas são muito úteis para entender onde certas propriedades estão sendo sobre-escritas e testar coisas novas rapidamente.

Além disso, garanta no seu fluxo de desenvolvimento que os source maps estão sendo gerados, assim você poderá ver em qual arquivo/linha aquela propriedade está sendo definida, diretamente pelo navegador.

Conclusão

Após compreender todos esses 9 pontos, você possuirá um vasto conhecimento de como controlar seus estilos, especialmente em questão de layout, que na minha opinião é a parte mais complexa.

É claro que o mundo do CSS é muito mais do que layout e há muitos outros tópicos mais avançados para cobrir, como animações, transições, transformações, o novo grid layout, etc… mas quanto a isso, você precisará entender o que cada propriedade faz e o que são os seus diferentes valores, mas tudo que tratamos aqui servirá como uma base sólida.

Tornar-se profissional em CSS necessita de muito tempo e prática, mas com uma base sólida não será uma jornada difícil.

E no final desse artigo, aliás, nenhum post sobre CSS pode ser completo sem esse GIF. Ele nunca fica velho!

https://medium.com/media/9ee5b80578406d432a1906ea570676ac/href