Como Organizar e Otimizar o CSS do seu Blog

CSS é a abreviatura para Cascading Style Sheets = Folha de Estilos em Cascata

É uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.

HTML pode ser usado ou não para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. É suportado por todos os navegadores atuais.

Fonte:http://pt-br.html.net/tutorials/css/lesson1.php

A diferença entre HTML e CSS é que o HTML é usado para estruturar conteúdos e o CSS é usado para formatar conteúdos estruturados.

Organizando o CSS

Muitas vezes quando encontro um template que me interesso e vou estudar o seu código CSS me deparo com comandos um pouco confusos. Todos os comandos numa mesma linha, etc. (Isso é a compactação dos comandos CSS para otimizar os códigos e facilitar no carregamento das páginas.)

Para organizar e entender melhor o que as linhas de comandos querem dizer encontrei na internet alguns sites que organizam os códigos CSS.

Para utilizá-lo é muito fácil: você só precisa copiar e colar o código CSS para dentro da caixinha do site e em seguida clicar no botão “Organize CSS”.

Link: http://styleneat.com/

Otimizando o Seu Código CSS

Se o CSS do seu site estiver com muitos espaços em branco e muito extenso isso pode atrasar o seu carregamento.
Então, após ajustar todos os comandos do seu blog/site sugiro que você Compacte e Otimize o seu código CSS para que não demore para carregar.
Estas ferramentas deixam seu arquivo bem menor e corrigem possíveis erros.
Para isso você pode utilizar alguns serviços on-line:

» CleanCSS

Link: http://www.cleancss.com/

OBS: Neste site tem uma Nota Importante dizendo que o código CSS deve ser bem formado.
E que este site não é um validador que aponta erros em seu código CSS.
Para certificar-se de que o seu código é válido, utilize um Validador de CSS.
É aí que entra o W3C Validator. Veja abaixo▼

» W3C Validator.

Analisa folhas de estilo em cascata (CSS).
Segundo a seção Sobre do site:

A finalidade da ferramenta validador CSS é a de auxiliar o desenvolvedor na tarefa de verificar e corrigir quando necessário as folhas de estilo por ele desenvolvidas.

Link: http://jigsaw.w3.org/css-validator/

» ProCSSor

Este site tem várias opções, tanto de organizar o código CSS quanto de otimizar diminuindo espaços, etc... Basta colar o código CSS na caixinha destinada para tal, selecionar em options o que deseja e clicar em process. O apenas clique em clear para otimizar seu código.

Link: http://procssor.com/

» Iceyboard

Link: http://iceyboard.no-ip.org/projects/css_compressor

» Focaliza isso

Site brasileiro que também otimiza arquivos Javascript

Link: http://focalizaisso.com.br/compactador-de-js-e-css/

Este post foi atualizado em 27/11/2013