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.
» 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
» Focaliza isso
Site brasileiro que também otimiza arquivos JavascriptEste post foi atualizado em 27/11/2013
Como Organizar e Otimizar o CSS do seu Blog
Reviewed by Aurea
on
11/27/2013
Rating:

Olá, Áurea.
ResponderExcluirMuito interessante e oportuno teu artigo, porém estou com uma dúvida: como procedo se nem tenho mais o template original? Aliás já fiz tanta mudança no mesmo ao longo dos anos que tá pra um frankplate que template!
Se eu fizer o backup do template, abro ele no bloco de notas e copio o conteúdo do arquivo na tela do styleneat?
É isso?
Depois copio de volta e faço upgrade para o blog?
Ou tem um outro jeito mais simples?
No aguardo...
Olá Sidinei,
ExcluirO ideal é você copiar o arquivo CSS que se encontra entre estas tags <b:skin>...</b:skin> no seu editor de HTML colar em um destes sites para organizar ou otimizar seu código.
Depois colar novamente entre estas tags.
Eu ainda não fiz a otimização do código inteiro CSS+HTML, somente do CSS que já ajuda bem a identificar os comandos do blog. Até mesmo porque o novo editor deixou o HTML bem legal.
Att,
Áurea
Olá Aurea,
ResponderExcluirótima dica, eu já utilizei e também recomendo o CLEANCSS, confesso que os outros serviços ainda não conhecia, mas com certeza estarei testando.
Abraço e sucesso!
Olá Claudio,
ExcluirQue alegria receber você aqui no meu espaço!
Realmente estes sites são muito úteis para todos os que trabalham com códigos. Gosto muito!
Saiba que é sempre bem vindo ao meu espaço e que também gosto muito do seu espaço. Sempre estou por lá aproveitando suas ótimas dicas!
Grande abraço,