Desenvolvendo CSS eficiente e simplificado
CSS pode ser comparado ao conjunto de ferramentas de um escultor; Como escultores no trabalho, nós designers usamos CSS para criar layouts estruturados de sites.
Com o passar dos anos, esse processo se tornou mais organizado; regras foram postas em prática para criar melhores práticas de codificação.
Neste artigo, vamos dar uma olhada em algumas idéias que você pode usar ao escrever folhas de estilo para acelerar seu código.
CSS eficiente é fácil de gerenciar e fácil de ler e pode ser um recurso para web designers. Organizar-se é um grande passo, mas usar CSS pode ser um pouco mais complicado do que isso.
Ao ler este artigo, tenha em mente suas próprias preferências; O melhor conselho que você pode obter de qualquer desenvolvedor é encontrar seu próprio jeito de trabalhar. Combine algumas das técnicas aqui com seus próprios métodos para obter o máximo benefício.
Por que se preocupar simplificando CSS?
Muitos designers confundem as linguagens front-end e back-end ao falar sobre o código de análise. CSS e HTML são linguagens de design de front-end usadas para formatar e estilizar elementos em um site. Os arquivos são baixados e analisados pelo navegador do visitante, o que significa que o código front-end tem um tempo de carregamento substancial.
Código baixado e analisado pelo navegador leva tempo para ser lido e computado, assim como o código escrito em linguagens de back-end (como PHP ou Ruby). O CSS simplificado pode beneficiar muito um site, pois pode reduzir o tempo de carregamento e acelerar a estruturação de elementos de página.
Os benefícios podem não ser óbvios com as conexões de alta velocidade e os sistemas operacionais avançados atuais. Você pode querer olhar para o seu site em um navegador móvel para comparar os tempos de carregamento e ver como o site é carregado.
Quando o CSS é codificado de forma eficiente, você deve ver a forma e o estilo dos elementos do site conforme eles são processados. Isso pode parecer diferente de navegador para navegador, mas ainda acontece. Quanto mais você testar o código do seu site, mais você o verá.
Mantenha seu código padronizado e simples. Se você está atualizando seu blog ou site pessoal alguns meses após o desenvolvimento inicial, agitar os estilos CSS com os quais está familiarizado é mais fácil do que lidar com os novos. Adaptando-se a padrões estabelecidos ajuda a longo prazo.
Como trabalhar com código eficiente
Para começar a codificar estilos com a máxima eficiência, você terá que adotar algumas novas ideias. Estas são técnicas básicas de CSS sendo usadas hoje por sites de Internet de primeira linha e desenvolvedores de aplicativos.
Mantenha seu código simples
Isso pode ser facilmente esquecido. Ao mapear um conjunto de dados para seus estilos, mantenha-o simples. Crie conjuntos de dados em uma pilha de colunas, se necessário.
Comece criando uma lista de diferentes seções para trabalhar em seus estilos. Você pode incluir texto, formulários, caixas de layout, cabeçalhos, rodapés e qualquer outra coisa que possa precisar. Para realmente se organizar, você pode dividi-lo em alguns estilos conhecidos, como um id ou class para links de navegação.
Este primeiro passo ajuda a criar um plano para o seu site usando palavras simples, antes de entrar em qualquer linguagem de estilo. Depois, sentar-se para escrever o código será muito mais simples; ter a lista de recursos à sua frente irá ajudá-lo a derramar o código a uma taxa quase sobre-humana.
Mantenha blocos de código delineados e esparsos
Há um debate em andamento sobre como o código CSS deve ser escrito. Quando comecei, usei notação de bloco porque era tudo que eu já tinha visto. Mas a notação de linha única é muito mais rápida quando se trata de analisar o texto e torná-lo legível.
Eu não estou fazendo um caso para ignorar o CSS estilo de bloco, longe disso. Quando você está lidando com um elemento importante ou id que contém seis ou sete propriedades principais, mantê-lo em forma bloqueada será mais fácil. Você estará isolando as partes importantes do seu estilo, tornando-as mais fáceis de encontrar rapidamente.
Ler estilos longos em notação de bloco também é mais fácil, pois a maioria dos editores de texto envolve linhas longas, e a leitura de pares de valor de propriedade pode ser confusa quando você tem 10 ou mais para passar. Sendo o web designer, você tem que fazer a chamada sobre como espaçar o código CSS. Mantenha a eficiência em mente e use seu melhor julgamento.
Trabalhando com outros desenvolvedores
Se você é um web designer profissional ou quer ser um, é provável que trabalhe com uma equipe mais cedo ou mais tarde. Isso pode ser uma bênção ou uma maldição, dependendo da equipe.
Designers são muitas vezes relutantes em fazer grandes mudanças em seu trabalho. O código CSS é um pouco diferente porque você está tentando criar um layout bonito usando apenas valores de propriedade, e os arquivos podem ficar confusos quando passados entre algumas mãos. Então, fique organizado.
Comentários são uma grande ajuda. Se linhas ou blocos de código puderem confundir ou enganar outras pessoas, os comentários economizarão horas. Explique tudo o que você coloca na folha de estilo da maneira mais elegante possível.
Certifique-se de que nenhum estilo duplicado ou anexado seja sobrescrito. Imagine que o h1 para h4 cabeçalhos são estilizados no alto de um documento CSS, mas alguns códigos mais baixos mudam suas fontes. Isso pode ser extremamente confuso para quem não escreveu o código e agora precisa corrigir o bug.
A comunicação também é crítica. Você pode escrever o código mais eficiente, mas a falta de comunicação prejudicará sua equipe. Concentre-se na tarefa em mãos e trabalhe com as ideias criativas produzidas coletivamente pela equipe (e não apenas a sua).
Acompanhe os documentos CSS separados
Outra maneira de manter o código limpo e organizado é manter os tipos de estilos separados. Isso funciona bem para sites grandes em que manter todos os estilos em um único documento seria irrealista.
O Facebook é um bom exemplo. É provável que tenha muitos estilos diferentes para todas as suas várias páginas: perfil, pesquisa, registro, fotos, etc. Se os estilos fossem todos consolidados em um arquivo, eu não gostaria de ser o cara que precisa classificar o código apenas para consertar um bug simples.
O Facebook recebe muito mais tráfego do que o seu site, mas os princípios são os mesmos. Se a organização é uma preocupação, as folhas de estilo separadas podem percorrer um longo caminho. Os designers da Web geralmente organizam código com base no aspecto do documento que ele estrutura (por exemplo, layout.css , text.css , forms.css ).
Nem todos os estilos precisam ser carregados em todas as páginas. E aqui está o benefício: o método permite uma maior personalização na construção do seu site. Você reduzirá o tempo de análise tremendamente apenas criando visões e estilos separados.
Teste de suporte para o IE
Os desenvolvedores da Web sempre pintaram o Internet Explorer como o vilão, especialmente com o CSS. Felizmente, você pode aplicar comentários condicionais (que se parecem com comentários regulares para a maioria dos navegadores) ao HTML.
Você pode usá-los para aplicar estilos no Internet Explorer. Confira os comentários condicionais se você não estiver familiarizado com eles; Eles podem ser inestimáveis quando as propriedades CSS não funcionam corretamente e você precisa de uma alternativa.
Com o lançamento de Internet Explorer 9 Beta , estamos chegando mais perto de uma experiência unificada da Internet. O único problema é o número de pessoas que ainda estão executando navegadores tão antigos quanto o IE6 e o IE7, que têm sérios erros de processamento (devido a mecanismos de renderização defeituosos) e às vezes exigem estilos externos. Felizmente, o suporte melhorou e a Microsoft parece estar mudando as coisas.
Adicionando um índice
Este passo é opcional, mas acho que funciona maravilhas para minhas folhas de estilo. Você pode armazenar a tabela fora do próprio documento CSS, mas acho que isso é um pouco contraproducente - especialmente porque adicionar comentários em linha é muito fácil.
As principais razões para colocar um índice em seus estilos é que ele facilita o acesso e agiliza o processo de edição. Coloque marcadores no início do seu documento para separar o código em divisões lógicas.
Criar suas próprias chaves é uma boa abordagem. Por exemplo, se você planeja dividir sua tabela de acordo com as principais áreas do documento (layout, fonte, cabeçalho, navegação, etc.), poderá digitar as seções com caracteres exclusivos.
Você poderia usar =!layout e =!font para delinear as seções de layout e fonte, respectivamente. Você provavelmente não encontrará essas sequências exatas de caracteres em nenhum lugar do código, portanto, adicioná-las à sua tabela e ao início de cada seção de comentários deve ser seguro. Em seguida, use a função de pesquisa em seu editor de texto para pular para a seção desejada.
Essa também é uma boa estratégia para projetos em que muitas pessoas estarão olhando para o código. Mantém tudo organizado e acessível.
Há muitas maneiras de otimizar o código e torná-lo mais eficiente, e essas dicas são um ótimo começo. O CSS está evoluindo e muitas novas ideias estão sendo construídas.
Você precisa de paixão e dedicação para fazer isso na indústria do design. Se você puder manter sua paixão pelo design digital, acompanhar as melhores práticas de CSS não será difícil. Atingir os outros nesta enorme comunidade global de web designers pode ser uma grande ajuda; Especialistas do setor geralmente ficam felizes em compartilhar suas técnicas e inovações.
Este post foi escrito exclusivamente para Webdesigner Depot por Jake Rocheleau , um web designer apaixonado e entusiasta de mídia social. Jake adora ler e escrever sobre as últimas tendências digitais e da Internet e fazer contatos com a comunidade de design. Para ouvir mais sobre seu trabalho, encontre-o no Twitter @ jakerocheleau .
Quais são os seus métodos para simplificar o CSS? Alguma sugestão para desenvolvedores de CSS novatos? Quais novos recursos ou suporte adicional você gostaria de ver em futuras iterações de CSS?