CSS para programadores

Quando alguém fala sobre CSS, muitos programadores fazem cara feia, dizem que não são designers e saem da sala. E os programadores que fazem isso são os mesmos que cometem erros básicos quando precisam usar CSS em um dos seus projetos.

Os frameworks CSS fizeram com que os programadores não precisassem mais se preocupar em como o CSS funciona na vida real. O Bootstrap, YUI, 960.gs, YAML, e outros frameworks, foram desenvolvidos e testados por quem entende da dupla dinâmica CSS + Navegadores, isso quer dizer que esses caras já tiveram todo o trabalho de deixar tudo funcionando para nós. E dentro dos sites deles já existem vários exemplos de como começar a usá-los, na maioria das vezes os exemplos funcionam com um simples CTRL-C + CTRL-V.

Só que isso deixa uma grande lacuna, os programadores não sabem qual a melhor maneira de usar esses frameworks em projetos reais, projetos onde a manutenção do CSS vai ser sempre necessária e a atualização do framework será constante.

Mas então como os programadores deveriam tratar o CSS? Exatamente igual a como tratam as classes em uma linguagem orientada a objetos.

A afirmação parece não ter muito sentido, mas vamos a explicação que tudo vai ficar mais claro:

Imagine que você tem um HTML, index.html, e um CSS, estilo.css.

Aí você precisa criar um bloco que tem o visual e o comportamento parecido com um modal do Bootstrap, com a diferença que o seu bloco tem que ter 200px de altura e largura. Para resolver esse problema você adiciona a estrutura do modal no HTML e no seu CSS personaliza o seu bloco.

index.html
<html>
  <head>
    <title>Minha página</title>
    <link type="text/css" rel="stylesheet" src="bootstrap.css" />
    <link type="text/css" rel="stylesheet" src="estilo.css" />
  </head>
  <body>
    <div class="modal">
      <!-- Conteúdo do modal -->
    </div>
  </body>
</html>

estilo.css
.modal {
  width: 200px;
  height: 200px;
}

Ok! Você conseguiu fazer o que você queria. Mas você acabou de causar um efeito colateral. Vamos comparar como seria essa abordagem se o modal fosse uma classe no Python.

bootstrap.py
>>> class Modal(object):
>>>     def __init__(self, width, height):
>>>         self.width = width
>>>         self.height = height

css.py
>>> from modal import Modal as BaseModal
>>>
>>> class Modal(BaseModal):
>>>     def __init__(self):
>>>         super(Modal, self).__init__(200, 200)

index.py
>>> from bootstrap import Modal
>>> from css import Modal
>>> modal = Modal()

O problema dessa abordagem é que se você quiser criar uma nova instância de Modal, ela sempre terá 200px de altura e largura, você sobrescreveu a classe pai e não tem uma forma elegante de usá-la novamente.

Isso acontece também no CSS, todo <div> com classe "modal" que estiver dentro do HTML terá 200px de altura e largura.

E qual a melhor solução? Adicione uma classe a mais no modal que você quer personalizar, por exemplo "custom-modal", e personalize ele através dessa nova classe.

estilo.css
.custom-modal {
  width: 200px;
  height: 200px;
}

Isso equivale a fazer o seguinte código em Python:

bootstrap.py
>>> class Modal(object):
>>>     def __init__(self, width, height):
>>>         self.width = width
>>>         self.height = height

css.py
>>> from modal import Modal as BaseModal
>>>
>>> class CustomModal(BaseModal):
>>>     def __init__(self):
>>>         super(Modal, self).__init__(200, 200)

index.py
>>> from bootstrap import Modal
>>> from css import CustomModal
>>> modal = CustomModal()
>>> modal_original = Modal()

Dessa forma você consegue usar a classe CustomModal e Modal quando quiser.

No CSS isso quer dizer que as classes "modal" e "custom-modal" estarão disponíveis para você usar no HTML. Além disso você ganha um nível de abstração sobre o framework que você está usando e vai ser muito mais fácil corrigir erros de compatibilidade quando houver uma atualização no framework.