Porque odiamos CSS?
Meu intuito nesta breve jornada quase que espiritual é explicar porque o CSS pode se tornar uma tecnologia tão difícil de entender e, principalmente, de amar.
Prazer, CSS
Se você está lendo este artigo, você provavelmente já sabe que CSS, além de ser o demônio sorrateiro que mora no front-end e está sempre pronto para infernizar nosso dia, é o que usamos para pintar e estilizar os elementos de uma página HTML.
Durante este artigo iremos entender o que há de errado com esta introdução acima e realmente conhecer o CSS da forma correta.
Entendendo o ódio
Ódio é uma palavra muito forte…
E é por isso que eu falo que eu odeio CSS.
Podemos definir dois pontos importantíssimos que contribuem para o ódio contra o CSS:
1) Joga pedra na Geni!
Você já passou por aquela situação de um amigo falar tanto mal de uma pessoa que você passa a não gostar dela mesmo antes de conhecê-la?
CSS é exatamente essa pessoa.
Diferente de outras tecnologias, onde aprendemos desde cedo que “esta linguagem é incrível!” ou “aprender aquilo ali é super fácil”, CSS sempre é o vilão de toda história da nossa infância na programação.
2) “Mas eu coloquei float: left e não tá indo pra esquerda…”
O segundo ponto, e o que mais nos leva a odiar o CSS, é justamente como ele é ensinado.
Tente se lembrar de todas as vezes que você estudou CSS e você vai chegar na conclusão que a maior parte, se não todas, as aulas, artigos lhe ensinou apenas e exatamente os seguintes tópicos: qual estilo você usa para fazer X tarefa ou como aplicar o estilo que você quer usar.
Se lhe parece errado aprender uma tecnologia apenas com base nesses dois princípios, então você está começando a entender que nós aprendemos errado CSS, por isso é tão difícil entendê-lo.
Não é difícil ver também os cursos e conteúdos online geralmente não ensinam da melhor maneira. A maior parte deles focam em ensinar separadamente todos os principais estilos usados, mas não em ensinar CSS em si.
É como se um curso de JS focasse apenas em ensinar como manipular o DOM, mas nunca ensinar sobre funções anônimas, loops, escopo de variáveis e outros conceitos primordiais da linguagem.
Entendendo a origem deste ódio, você pode se libertar dele
Compreendendo que o CSS não é um vilão, mas apenas mais uma tecnologia no nosso dia a dia, e sabendo que como você pensa sobre e como você usa o CSS está errado, porque lhe foi ensinado errado, você pode começar a olhar para ele com outros olhos.
Prazer, CSS (2)
A primeira impressão é a que fica, e estamos justamente aqui para desconstruí-la. Então, diferente da primeira introdução neste artigo, vou apropriadamente introduzir o CSS.
CSS (Cascate Style Sheet ou Folha de Estilo em Cascata) é uma linguagem de folha de estilos que é utilizada para definir como e quando os elementos da sua aplicação devem ser exibidos em uma ou mais mídias.
Perceba como faz toda a diferença como esta tecnologia nos é apresentada e, igualmente, como nós olhamos para ela.
Agora que compreendemos como é nossa relação com o CSS, vamos entender alguns pontos chave sobre o CSS em si.
CSS não é estilo
CSS é uma linguagem com suas próprias regras, conceitos e particularidades.
CSS não é simples
Há uma série de conhecimentos que você deve ter para poder utilizar o CSS da forma correta e da melhor maneira possível:
- Precedência e especificidade
- Box Model
- Estilos padrões dos navegadores
- Animações
- Media queries
- Pseudo elementos
- Unidades de medidas
- Seletores
E muito, muito mais.
Uma coisa leva a outra
Cada propriedade de um estilo (float, width, etc.) de um elemento pode influenciar as propriedades de outros elementos da tela, e vice-versa.
Interpretação é tudo
Você deve sempre lembrar que o CSS é interpretado, então o comportamento do CSS pode mudar de acordo com quem o interpreta e o renderiza.
Também você pode utilizar ferramentas como o Can I Use? ou o HTML5 Please para te ajudar a conhecer e entender o suporte dos navegadores, conhecer bugs, ficar por dentro de novidades e até testar estilos em navegadores (e versões) diferentes.
Porque CSS é tão estranho?
Provavelmente para você o CSS ainda lhe soa um pouco diferente ou estranho, então para ajudar a entender (e a amar) ainda mais o CSS podemos olhar não só para ele, mas para a web toda.
A incrível Miriam Suzanne (site, twitter) ensina no curto vídeo abaixo porque o CSS funciona do jeito que ele funciona e como ele evoluiu até este ponto.
Onde aprender CSS (sem ódio)?
A única referência que eu me sento confortável em recomendar no momento é a documentação oficial da MDN.
Ele possui uma secção de aprendizado de CSS onde é ensinado muito bem, e com bastante exemplos, e de quebra você já aprende diretamente em uma das documentações mais completas e oficiais sobre o assunto.
A MDN aborda CSS com base na seguinte linha de conteúdo, apesentada no menu do lado esquerdo do tutorial deles:
CSS first steps: Introduções e alguns conceitos estruturais.
CSS building blocks: É aqui que você vai aprender a maior parte dos principais conceitos e coisas novas que você talvez não saiba.
Styling text: A aplicação de estilos e conceitos específicos quando o assunto é texto e fonte.
CSS layout: Diferentes métodos e conceitos de estilização e aplicação de layout na web, com referência a diferentes tipos de mídias, suporte de navegadores e até uma breve explicação sobre mobile first layouts.
Recomendo seguir todos os tópicos em ordem, mesmo já conhecendo o conteúdo de um ou outro tópico, visto que há muitos detalhes que é passado e que as vezes nós não lembramos ou não conhecemos.
Conclusão
Os cursos ou conteúdos sobre CSS na internet, e até as aulas web em graduações ou cursos presenciais, não ensinam CSS, mas sim a aplicar estilos, e geralmente ajudam a espalhar o ódio contra esta tecnologia, o que apenas ajuda a criar mais uma barreira para quem está tentando aprender.
Então, quando falta conhecimento sobre determinada tecnologia ou quando você aprende a odiá-la, obviamente ela se tornará mais complexa e será desagradável de usa-la. E ao tentar passar este conhecimento seu adiante, você vai, sem saber, ensinar um conteúdo raso ou incorreto e também continuar o ciclo do ódio.
Ao parar e tomar conhecimento de tudo isso, podemos não só aprender melhor uma tecnologia e assim aumentar a qualidade dos nossos softwares, mas também podemos melhorar o seu trabalho e seus estudos, tornando uma coisa complexa e ruim em algo lógico e natural.
