» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

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.

Otimizar 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”.



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

Otimizar CSS


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.
Otimizar CSS


» Iceyboard



» Focaliza isso

Site brasileiro que também otimiza arquivos Javascript
Otimizar CSS




Este post foi atualizado em 27/11/2013
Como Organizar e Otimizar o CSS do seu Blog Como Organizar e Otimizar o CSS do seu Blog Reviewed by Aurea R C on 11/27/2013 Rating: 5

4 comentários:

  1. Olá, Áurea.
    Muito 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...

    ResponderExcluir
    Respostas
    1. Olá Sidinei,
      O 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

      Excluir
  2. Olá Aurea,

    ó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!

    ResponderExcluir
    Respostas
    1. Olá Claudio,

      Que 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,

      Excluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.