Padrões de Desenvolvimento em CSS

Observamos que, a cada site visitado, a cada código analisado, podemos nos convencer que boas práticas e organização no código tem sido uma das menores preocupações. Não me refiro tanto a códigos de programação, já que existem várias convenções sobre formatação destes, mas principalmente quando tratamos de formatação de layout através de CSS.

Podemos acreditar que alguns motivos sejam os principais responsáveis por isso:

1 - A preocupação de finalizar logo o trabalho, achando que posteriormente poderemos rever o código e ajustar de uma melhor forma;

2 - A falta de experiência do desenvolvedor;

3 - A intenção de realmente complicar o máximo possível o código para torná-lo menos entendível para outros desenvolvedores, caso o cliente não continue a utilizar seus serviços.

Vamos analisar cada uma destas questões:

1 - Pode estar certo que isto não acontecerá. Você não irá ajustar posteriormente o código, por vários motivos. Quando você finalizar o projeto e o cliente lhe pagar, é muito improvável que você continue a trabalhar no projeto dele, a não ser que ele continue lhe pagando através de um serviço de manutenção. Também, é muito improvável que você abra mão de um novo projeto que está a sua frente pensando - "Infelizmente não poderei pegar esse projeto de R$ 5.000,00 porque tenho que organizar o código do outro site que finalizei". E também, um outro motivo é que o envolvimento com diversas outras atividades posteriores a finalização da formatação do layuout, lhe trará dificuldade de lembrar-se facilmente de onde se aplicam determinadas partes do código, e isso poderá lhe causar problemas ao tentar reajustar o código.

2 - Muitas vezes a inexperiência elimina a preocupação de tentar deixar o código o mais organizado possível, tanto para sua utilização futura, quanto para outros desenvolvedores. Faltas de comentários no código, referenciando cada área a que se aplica o código; falta de ordenação nos elementos de formatação, dificultando encontrar de forma simples e fácil o que se quer alterar.

3 - Este é um erro fatal, pois se o cliente não deseja fazer algum tipo de manutenção com você, não espere que complicar ao máximo a vida dele caso ele tenha que fazer com outra pessoa uma alteração, vá lhe ajudar muito a conseguir um projeto futuro. Ao contrário, você estará contribuindo fortemente para que o próximo desenvolvedor fale tão mal do seu código que o cliente vai passar a ter uma aversão imensa ao seu trabalho, por melhor profissional que seja, e, as possíveis indicações que poderiam surgir a partir dele, esqueça.

Bem, conforme disse, existem diversas convençõe e boas práticas de desenvolvimento para diversas linguagens de programação, porém, padrões de formatação de códigos CSS dificilmente encontramos. Desta forma, vou apenas demonstrar de que forma costumo desenvolver meu código, quando é necessário que eu desenvolva algo:

Cógido do arquivo formatacao.css:

--- /*************************************************************/
--- /* --- --- --- --- Área de formatação geral --- --- --- */
--- /************************************************************/

--- * {
--- --- background-color: #000;
--- --- color: #fff;
--- --- font-family: verdana, arial, sans-serif;
--- --- margin: 0px;
--- --- padding: 0px;
--- }

--- body {
--- --- background-color: #ccc;
--- --- text-align: center;
--- }

--- /***************************************************************/
--- /*--- --- --- --- Área principal do site --- --- --- --- --- */
--- /**************************************************************/

--- #container {
--- --- color: #fff;
--- --- font-size: 1em;
--- --- margin: 0 auto;
--- --- width: 780px;
--- }

--- --- /**************************************************************/
--- --- /* --- --- --- Área do topo do site--- --- --- --- --- --- */
--- --- /*************************************************************/

--- --- #topo {
--- --- --- height: 20px;
--- --- --- width: 780px;
--- --- }

--- --- /***************************************************************/
--- --- /* --- --- --- --- Área do menu do site--- --- --- --- --- */
--- --- /**************************************************************/

--- --- #menu {
--- --- --- font-size: .8em;
--- --- --- float: left;
--- --- --- text-decoration: underline;
--- --- --- width: 180px;
--- --- }

--- --- .lista_itens {
--- --- --- color: #f0cc87;
--- --- }

--- --- --- --- /*************************************************************/
--- --- --- --- /*--- --- --- --- Área do sub-menus do site--- --- --- */
--- --- --- --- /************************************************************/

--- --- --- --- .font_sub_menus {
--- --- --- --- --- font-size: .7em;
--- --- --- --- }

--- --- --- --- .lista_itens_sub {
--- --- --- --- --- color: #f0cc16;
--- --- --- --- }

--- --- /*************************************************************/
--- --- /* --- --- --- Área do centro do site --- --- --- --- --- */
--- --- /************************************************************/

--- --- #content {
--- --- --- font-size: .9em;
--- --- --- width: 600px;
--- --- }

--- --- /*************************************************************/
--- --- /*--- --- --- Área do rodape do site--- --- --- --- --- */
--- --- /************************************************************/

--- --- #rodape {
--- --- --- width: 780px;
--- --- }


Bem, a princípio talvez não consiga ver nada diferente, porém, eu procurei estabelecer meus padões de organização da forma mais clara possível, onde qualquer desenvolvedor diante do código consiga entender sem nenhuma dificuldade. Algumas convenções de organização que procurei seguir foram:

1 - Iniciar cada seção do meu código com um comentário perceptível, onde logo de cara qualquer um consiga visualizar e entender que se trata de um delimitador de área para o código;

2 - Procuro sempre desenvolver meu código de CSS com a mesma estrutura do XHTML do site, sendo inicialmente os elementos comuns, depois as áreas específicas, pois primeiro eu desenvolvo um container, e dentro dele tem um topo, uma área de menu, uma área de sub-menu e um rodapé;

3 - Uma outra coisa a ser observada é a identação das área de formatação. Por exemplo, se você observar o CSS acima, verá que o sub-menu está identado em relação ao menu, da mesma forma que provavelmente estará no código XHTML. Dessa forma, fica mais fácil navegar dentro da estrutura do CSS também;

4 - Tento dar uma ordenação alfabética aos elementos e das classes. Se puder observar, e eu lhe pedir para achar o color do id container, você provavelmente não terá dificuldade para isto; e se eu lhe pedir para achar o tamanho de fonte utilizada no sub-menu, conseguiria sem dificuldades? Se você puder observar, os elementos dentro de cada id ou classe estão em ordem alfabética, então, em qualquer parte do código a estruturação seguirá a mesma, e se por acaso você tiver muitos elementos dentro de um id, não terá dificuldades para encontrá-lo, pois da mesma forma que você sabe que a letra w vem depois da letra c, você saberá que o color estará antes do width.

Com respeito a este último paragráfo, nem sempre é possível fazer isso, então na medida do possível eu procuro deixar apenas os elementos de maior prioridade a frente, e logo após continuo com a minha regra de ordenação normalmente.

Espero que com este post tenha lhe ajudado a ajustar alguns conceitos de formatação de código e fica a minha sugestão de padronização, caso já não tenha achado a sua.

Código Correto vs Código Semântico

Existe uma grande discussão hoje sobre a importância de códigos válidados nos padrões W3C, porém, apesar de todas estas preocupações é notório o desconhecimento de muitos desenvolvedores de que nem sempre um código válido é um código semântico.

Como podemos entender isto? Vejamos na prática.

Podemos supor inicialmente que o código abaixo descreve uma página com um topo, uma área central e um rodapé. Na área central serão exibidos 3 parágrafos, e no rodapé, alguns links de navegação.

A pergunta que surge é: O código abaixo está correto?

A resposta a pergunta é: Sim, está correto, pois este código poderá ser validado de acordo com os padrões do W3C, porém, o ponto que queremos destacar é: É um código com uma semântica correta?

A resposta a pergunta acima é: Não, não está semântico, pois os elementos do código não estão sendo utilizados da melhor forma para que a "máquina" entenda de forma clara o que se refere esta parte do código. Podemos comparar isto a fornecer um livro em um idioma espanhol para alguém que fala português; é bem possível que se consiga fazer a leitura com algum esforço, mas a probabilidade de que não seja totalmente compreendido é grande.

De que forma poderíamos então exibir este código validado e semanticamente correto? Vejamos uma das formas abaixo:

Não estou dizendo através deste post que esta é a única forma correta de desenvolver este código de uma forma válida e com uma semântica correta, porém, é uma das formas de se fazer isso.

Fica como sugestão sempre fazer esta pergunta ao desenvolver suas aplicações:

" Seu código está correto e semântico? "