-------------------------------------
7 Princípios de um limpo e otimizado código CSS
Uma das coisas que você pode lembrar, são dos dias quando 30KB era recomendado como tamanho máximo de uma página web, o valor inclui HTML, CSS, JavaScript, Flash, e imagens. Em cada novo projeto eu vou até o bit mais leve da complexidade, é não muito antes aquele ideal de 30 KB é bem fora do meu alcance. Com a popularidade dos layouts CSS e JavaScript enriquecendo a experiência da página web, isso não é incomum, particularmente para sites grandes, onde CSS sozinhas ultrapassam 30KB.
Mas lá estão alguns princípios para considerarmos durante e depois que vocês ecrever seu CSS, ajudando a mantê-lo pequeno e otimizado. Otimização não é apenas diminuir o tamanho do arquivo - Isto é também sendo organizado, sem misturas e eficiente. Você verá que o maior conhecimento que você tem sobre práticas de otimização CSS, pequenos arquivos, serão inevitavelmente conseguidos como um resultado direto de sua implementação. Você pode já estar familiarizado com alguns dos princípios mencionados abaixo, mas vale a pena dar uma olhada neles. Familiarizando-se com os conceitos ajudará você a escrever um código CSS otimizado e fazê-lo melhor entre os web designer.
1.Use "Abreviações" / Atalhos
Se você já não usa "escrever abreviado", você está atrasado para a festa. Mas sorte sua, a festa nunca termina. Usar prorpiedades de abreviação é uma forma simples e fácil de fazer diminuir seu código (e o tempo de codificação). Não há melhor hora que o presente para iniciar ou rever essa prática eficiente de codificação.
Margin, border, paddin, background, font, list-style, e mesmo outline são propriedades que permitem abreviações (e essa não é mesmo uma lista extensa!).
Abreviação CSS significa que no lugar de diferentes declarações para propriedades relatadas...
1. p { margin-top: 10px;
2. margin-right: 20px;
3. margin-bottom: 30px;
4. margin-left: 40px; }
... você pode usar propriedades abreviadas para combinar aqueles valores como:
1. p { margin: 10px 20px 30px 40px; }
Por especificar um número diferente de valores, browsers podem interpretar as regras de maneira diferente, ilustrada no diagrama abaixo..
Ilustração de como uma declaração abreviada pode ser interpretada dependendo de como muitos valores são especificados para uma propriedade. Essa ordem também se aplica a padding e border-width entre outras propriedades.
Font é outra propriedade contemplada pela abreviação que ajuda a salvar algumas tecladas.
Exemplo de abreviação da propriedade font. Nota: deixando alguns valores não especificados significará que essas propriedades serão resetadas seus valores iniciais.Estas são apenas alguns dos exemplos de abreviações, mas não significa que deve ser considerado como um guia compreensivo. Mesmo se vocês estiver familiarizado com as regras acima, tenha certeza de dar uma olhada nos artigos mencionados abaixo para melhor ajudá-lo a lembrar suas propriedades poderosas que ajudam mantes seu código sucinto. Porque o número de linhas e caracteres salvos, vão de uma versão anterior de um arquivo CSS que não usa propiedades abreviadas para uma que faz o uso total de abreviações, pode ter um efeito dramático no tamanho do arquivo.
Veja o guia de abreviações CSS (dustindiaz.com) e CSS eficiente com propriedades abreviadas (456berestreet.com) para mais informações sobre propriedades abreviadas.
2. Se utilize dos Hacks
No blog de Jon Hick hickdesign.co.uk/journal faz-se o uso de comentários condicionais"Hacks contra browsers mortos são salvadores, mas hacks contra os vivos não são. Nenhum deles. Sempre.
Mantenha o CSS simples - Peter - Paul Koch (digital-web.com)"
Se você é como eu, estas palavras do artigo de Peter-Paul Koch's aproximadamente a 5 anos podem fazer você sentir-se um pouco embarassado. Depois de tudo, quem não tem servido hacks para o Internet Explorer 6 ou mesmo Internet Explorer 7? Tão mau como nós queremos que o IE6 pudesse ser colocado 6 pixels abaixo do chão, a verdade é que ele está longe de estar morto.
Mas agora nós sabemos que usar comentário condicional para servir de correção de declaração para o IE6 e IE7 é uma prática aceitável, mesmo recomendada pela equipe de desenvolvimento do Microsoft IE . Usando comentários condicionais para servir regras de CSS específicas podem adicionar benefícios servindo um limpo, e então pequeno, arquivo CSS default para a maioria dos browsers, enquanto somente esses browsers que precisam do "haked daiquiri" (i.e. IE) farão o download da página adicional.
Aqui como usuar o comentário condicional para servir estilos somento no Internet Explorer 6:
# &!--[if IE 6]amp
# &link rel="stylesheet" type="text/css" href="ie6.css"amp
# &![endif]--amp
Para o IE7, você pode usar o mesmo que acima, substituindo apenas o "6" por "7".
Alternativamente, se o "hack-less / hacks leves" for(rem) uma forma de atingir o resultado desejado usando CSS, com todas as outras coisas sendo iguais, vá para ele! Os hacks leves que você deve escrever, o simples e iluminado código.
3. Use espaços em branco sabiamente
Espaços em branco, incluindo espaços, tabs, e linhas extra de quebra, são importantes para a legibilidade do código CSS. Porém, espaços em branco podem adicionar, mesmo que minúsuculos possam ser, para o tamanho da página. Cada espaço, quebra de linha, e tab que você possa eliminar é como ter menos um caractere.
Mas isso é uma área onde eu poderia não encorajar você a resumir para ter um arquivo pequeno. Essa tranquilidade é importante para que você escreva em um caminho que seja legível para você (e esperançosamente para os outros), e se aquilo incluir uso de espaços em branco para a formatação, então que assim seja. Depois de tudo, se você não por lê-lo, você irá perder um grande tempo aplicando os princípios mencionados nesse artigo. Apenas esteja ciente do fato que espaços em branco são como ar - você pode até não vêlo, mas ele pesa algo.
A figura abaixo mostra os diferentes extremos no estilo de formatação, com muito espaço em branco, e ou outro com muito pouco. Eu sou a favor da linha simples de formatação sem tabs, assim eu posso procurar os seletores mais facilmente, e desenvolver usando a largura completa do meu monitor widscreen. Mas isso é para mim. Você pode gostar que seus seletores apareçam aninhados, e suas declarações em cada linha.
Ilustração dos dois extremos na formatação CSS: muitos espaços em branco vs. poucos espaços em branco.Usar espaços em branco eficientemente é ótimo, e uma prática recomendade para gerenciar facilmente código, mas esteja ciente que menos espaços em branco que você tenha, menos será o arquivo. Mesmo que escolha trabalhar com espaços em branco no seu arquivo de trabalho, você pode escolher removê-los para a versão de produção do seu arquivo CSS, então seus arquivos ficarão finos com o que realmente importa.
4. Pode frameworks e resets
Nathan Smith's 960 Grid System CSS framework usa a regra de resetSe você escolheu usar um framework CSS (incluindo um que você mesmo tenha desenvolvido), pegue um tempo para reavaliar a documentação, bem como cada linha do arquivo CSS. Você pode descobrir que o framework inclui algumas regras que você não se importa em usar no seu projeto atual, e que eles podem ser removidos. Também, você pode achar que o framework inclui um caminho mais elegante e conciso de de conseguir uma apresentação detalhada do que aquilo que você normalmente usa, e sabendo que eles pode ajudar a previnir regras duplicadas involuntariamente.
Isso demostra que o reset é uma boa opção. YUI grid CSS usa um reset, e o Reset de Eric Meyer's também é muito popular. Resets são legais de usar por conta deles ajudarem a neutralizar o estilo padrão do site. Mas se você conhece a natureza dos site você pode construir, pode encontrar algumas declarações de que você sabe que nunca irá precisar.
provavelmente não serão mais usados no blog da minha Tia Martha. Um portfólio de design provavelmente não deseje nunca usar
Como eu disse na página reset, aqueles estilos não são suportados para serem deixados sozinhos por qualquer um. Eles são o ponto de partida. Crafting Ourselves - Eric Meyer (meyerweb.com)
Usando um framework e/ou um conjunto de regras podem ajudar você a manter o trabalho organizado, mas eles devem não serem aceitos no seu estado padrão. Considerando cada declaração e cortando o que não for necessário, pode ajudar ainda mais a você manter seus arquivos CSS magros e legíveis.
5. CSS à prova de futuro
O CSS da stopdesign.com de Doug Bowman's revela seletores criados e usados no layout.Outro caminho para otimizar seu código é separar declarações do layout-específico do resto de suas regras. Eu tenho ouvido opções de separar a tipografia e cores das regras de layout-específico no arquivo CSS. Eu nunca encontrei isso na prática, como eu não quero ter o cuidado de repetir seletores apenas por eu ter diferentes tipos de declarações para associar com eles.
Entretanto, eu estou preparando uma idéia de separação dos estilos de layout do resto dos estilos, e dando seu próprio arquivo ou pelo menos sua própria seção. Isto também é defendido por "Andy Clarke's Transcendin CSS". No livro, Clarke nos lembra do seguinte:
"Layouts completamente em CSS sempre foram um compromisso. As especificações atuais CSS nunca foram concebidas para criar a interface visualmente rica e complexa que layouts modernos WEB demandam. Os métodos correntes - flutuante e posicionamento - como nunca tiveram como ferramentas de layout. Transcending CSS - Andy Clarke."
Um caminho para interpretar isso é que posicionamento e flutuante estabelecem barras laterais e colunas são, bem, layouts hacks. E embora nós não tenhamos uma alternativa, vamos esperar que uma vez aprovado os browsers comecem a suportá-lo. Quando isso acontecer, isso deverá ser fácil para alterar os modelos de propriedades hackeadas. Pensando isso será antes que novos módulso de layout estejam aqui, usando as propriedades corretas para levar o layout ao invés de compensar com as loucuras nosso conjunto limitado de propriedades que serão mais condensados ajudando o peso da página.
6. Documente seu trabalho
David Shea's markup guia ilustra o bom uso de tags HTML e como essas estão representadas em seu site, mezzoblue.com. Mesmo sem sites HTML dinâmico pode ter este guia simples e eficaz (utilizando o seu próprio arquivo CSS, é claro!) Como ponto de partida da documentação.Para uma equipe de designer,a comunicação regular é extremamente importante, então marcações e regras são criadas em um caminho consistente, e também na criação de padrões de site. Por exemplo, se alguem vem com uma definição de marcação para uma interface de tabela para o site, a documentação impedirá outros de duplicar aquele esforço, prevenindo que o código se espalhe no HTML e CSS.
Documentação, incluindo guias de marcação e guias de folhas estilos, não são apenas para grupos - eles são importantes apenas para um grupo de design de um home só. Depois de tudo, depois de um ano de trabalho em outras coisas, revisando um dos seus próprios projetos você pode sentir-se como um entrageiro. Seu próprio futuro poderia lhe lembrar de como seu framework de CSS trabalhou, ou quais páginas já tem um tratamento para uma segunda ação de um botão, e isso salvará você ou alguém mais de acrescentar regras redundantes e desnecessárias ao seu CSS.
A escolha de usar documentação tem o lado bônus de ser um grande lugar para estacionar explicações que de outra maneira devem estar incluídas como comentários de CSS. Comentários CSS são ótimos para o seccionamento de pedaços de arquivos CSS longos, mas comentários verbosos que são usados para explicar as escolhas de design podem aumentar o tamanho de arquivo, e poderiam ser melhor ajustadas à guia de estilo. Documentando seu código usando comentários CSS com seu arquivo de trabalho é mais que definitivamente melhor que nada, mas abrigar o material separado da documentação é uma ótima forma de manter o foco no código e libertá-lo.
7. Faça uso da compressão
Algumas ótimas aplicações tem sido criadas para comprimir e otimizar o CSS pra você, permitindo uma não leitura humana, mas deixando arquivos amigáveis para os browsers que são uma fração da cópia original de trabalho. Aplicações como CSSTidy e YUI Compressor podem comprimir espaços em branco, detectar em corrigir propriedades CSS que são sobrescritas por outra, e atentam para a oprotunidade de usar atalhos CSS que você possa ter esquecido. (Esses tipos de aplicação são excelentes fontes para se conhecer, se por não outra razão, para aprender o quê você pode fazer futuramente na mão)
Mesmo editores de texto populares como o BBEdit, TextMate, e TopStyle, podem ajudá-lo a formatar seus arquivos CSS da forma que vocẽ gosta. Eles também servem de opções de versões de zip para seus arquivos de CSS usando PHP. Você pode achar mais compressores de CSS e otimizadores no artigo List of CSS Tools.
Isso é importante para notar que essas aplicações fazem deles melhores para minimizar erros, mas eles não são perfeitos. Eles também trabalho melhor quando hacks de broswer não são incluídos no conjunto de arquivos (que ainda é outra razão para mantes aqueles hacks externos)
Há um tipo último da aplicação que pode ajudar a podar o tamanho de arquivo CSS que eu gostaria de mencionar. Ele pode rastrear um Web site e o log de regras CSS e as declarações que não estão sendo aplicadas e então trazê-los à sua atenção. Infelizmente essa ferramenta não foi inventada ainda, mas eu pagaria sorrindo para ter tal aplicação.
Eu posso recordar momentos quando temi eliminar certas regras porque elas não tinham nenhuma documentação que me explicasse que aqueles selecionadores erão as sobras de iterações prévias do desenvolvimento. Se uma aplicação trouxer aquelas regras para minha atenção, me ajudariam a manter um arquivo de CSS magro.
Conclusão
Um código limpo e otimizado é importante não apenas quando arquivos são pequenos, mas sua manutenção e boa leitura sejam boas. Os princípios mencionados acima são boas considerações não apenas para CSS, mas podem ser aplicadas no HTML, JavaScript, e outras linguagens de programação. Os arquivos de CSS não são tão proeminentes como a interpretação do seu Web site a um usuário final, mas a consideração dos princípios acima mencionados podem ajudar com ambas experiências de usuário (na forma de pequenos tamanhos de arquivo) e a experiência de desenvolvedor (código mais limpo). Aplique esses princípios aos seus projetos atuais e futuros, e você apreciará seguramente os esforços.
--------------------------------
Sua ajuda é bem vinda, melhore a tradução/adaptação, comente aqui! ;)
