CSS pode ser uma linguagem de marcação extremamente poderosa para designers.
No entanto, o CSS produzido é tão bom quanto os princípios que estão sendo seguidos pelo designer que cria o código.
Embora você possa pensar que qualquer um pode criar CSS, há uma grande diferença entre escrever CSS e produzir CSS de primeira qualidade.
Para garantir que você esteja no caminho certo, aqui estão oito princípios CSS que todo web designer deve seguir.
Se você vai investir tempo na codificação de CSS, só faz sentido ter tempo para validar o código que você cria. No entanto, nunca deixa de me surpreender com o fato de muitos designers pularem essa etapa vital. A validação do seu código permite que você limpe os problemas e garanta que ele funcionará bem para seus visitantes.
Além de validar seu arquivo CSS, você também deve validar seus arquivos HTML ou XHTML. Antes de validar esses arquivos, certifique-se de ter levado algum tempo para declarar o HTML adequado ou DOCTYPE XHTML. Declarar seu DOCTYPE pode parecer um detalhe mundano, mas não posso contar quantas discussões tive com designers frustrados que continuaram tendo problemas com um design, apenas para descobrir que era porque eles haviam declarado um DOCTYPE desatualizado (ou não tinha declarado um DOCTYPE em tudo).
Se você está trabalhando em um projeto sozinho ou com uma equipe de designers, é importante documentar o trabalho que você cria. Você provavelmente pode ver por que isso seria importante dentro do contexto de uma equipe de design, mas você pode estar se perguntando por que seria importante se você estivesse trabalhando em um projeto solo. Bem, há sempre uma chance de que seu projeto solo acabe evoluindo para um projeto em grupo, e se isso acontecer, é muito mais fácil ter documentação à mão do que tentar recuar e criá-lo. No entanto, mesmo no caso de o seu projeto continuar sendo um show de um homem, você pode se surpreender com o quão útil é a documentação quando você decide revisitar um projeto depois de não olhar para ele por um ano.
Quando se trata de criar documentação para código CSS, o impulso natural da maioria dos projetistas é adicioná-lo diretamente ao seu código colocando-o entre / * e * /. Como muitos dos princípios desta lista, não há nada tecnicamente incorreto sobre essa abordagem. No entanto, adicionar comentários diretamente ao seu código CSS aumentará o tamanho do arquivo, o que, por sua vez, poderá aumentar os tempos de carregamento e retardar o desempenho geral do site. Se você é sério sobre como escrever código CSS de alto nível, você deve documentar seu código, mas em um arquivo separado.
Embora eu sinceramente acredite que é mais eficaz documentar em um arquivo separado, sei que há muitos arquivos que simplesmente não concordam com essa prática. Se você se recusar a documentar em um arquivo separado, a próxima melhor coisa que você pode fazer é usar um compressor CSS (na verdade, mesmo se você escolher usar um arquivo separado para documentação, você ainda pode se beneficiar usando um compressor CSS). Você pode usar isso Compressor CSS da CSS Drive Gallery ou simplesmente pesquise no Google para encontrar um compressor CSS alternativo.
Embora hacks tenham se tornado uma prática aceitável para muitos dentro da comunidade CSS, isso não significa que “CSS hacking” seja um princípio que você deveria seguir. O problema com essa abordagem é que você está procurando intencionalmente uma solução complicada para os problemas. Embora você possa pensar que um ou dois hacks de vez em quando não vão machucar ninguém, entrar na mentalidade de “hackear” qualquer problema que você encontrar pode ter um impacto negativo em sua mentalidade geral de design.
Evitar hacks é um conselho que os especialistas têm dispensado há algum tempo. Você pode voltar todo o caminho até 2003 e ver que Peter-Paul Koch (que é um desenvolvedor e autor talentoso) tem alertado os projetistas sobre as implicações dos hacks de CSS por algum tempo: “O monstro da complexidade reapareceu, bem no centro do desenvolvimento da Web moderna. Hoje em dia não se manifesta como uma tabela infinitamente aninhada, mas como um hack CSS infinitamente complicado ”.
Como os divs fornecem um alto nível de flexibilidade, pode ser fácil usá-los em excesso. De fato, este problema tornou-se tão comum entre os designers que a comunidade CSS criou seu próprio termo para rotular esse assunto: divitus. Para evitar ser vítima dessa condição, antes de usar automaticamente uma tag div, você deve sempre se perguntar se existe uma tag HTML real que fará o trabalho por você. Por exemplo, em vez de criar vários divs de cabeçalho, por que você não usa as tags de cabeçalho HTML que já estão disponíveis, como H1 e H2?
Quando você começar a considerar o problema dos divs, verá rapidamente os benefícios de usar a tag HTML apropriada em vez de criar automaticamente um novo div. Não só ele pode reduzir a quantidade de código que você precisa criar (o que economizará tempo, além de reduzir o tempo de carregamento do seu site), mas também dará ao seu código uma estrutura mais lógica.
Se você perguntar a um designer novo ou inexperiente sobre como eles decidem nomear suas classes, eles podem dizer que isso realmente não importa. Embora isso seja tecnicamente verdade, esta é uma visão muito curta de nomeação de classes CSS. Embora haja designers que se encaixam na categoria de não se importar com nomes de classes CSS, também há designers que pensam sobre seus nomes de classes, mas na verdade adotam a abordagem errada.
Desde que eu não quero simplesmente bater-lhe na cabeça com exemplos teóricos, deixe-me explicar isso em termos concretos. Digamos que você esteja criando uma classe para controlar uma das caixas na sua página. A caixa estará localizada na parte inferior da página, conterá comentários dos leitores e você usará o CSS para criar um plano de fundo bege e controlar o preenchimento. Em vez de nomear esta caixa (que é o que muitos designers bem intencionados fariam), nomeie-a como caixa de comentários. A razão pela qual .comment-box é um nome de classe melhor que .tan-box é porque se você decidir mudar a cor do plano de fundo para azul na estrada (ou decidir mover a caixa da parte inferior da página para uma área diferente) , não irá confundir você ou qualquer outro designer que esteja procurando pelo CSS para esse site.
Embora a taquigrafia possa ser confusa para designers que estão apenas começando a escrever seu próprio código CSS, uma vez que você se acostume com o estilo de taquigrafia, ela se torna uma das práticas mais eficazes que você pode seguir como designer .
Existem vários benefícios no uso de taquigrafia. Por um lado, reduz o tamanho dos seus arquivos, o que reduzirá o tempo de carregamento do seu site. Além disso, não só facilita a organização do seu código, mas também torna mais simples se você precisar fazer alterações no seu código no futuro. À medida que você começa a se adaptar à abreviação, você também deve começar a escrever seu código em uma linha (em vez de espalhar declarações em várias linhas).
Como designer, você é muito mais inclinado tecnicamente do que qualquer outra pessoa na população dominante. Como você faz parte de uma minoria que vive e respira tecnologia, há muitos hábitos com os quais a maioria das pessoas nunca pensou. Por exemplo, você provavelmente se esforçou para eliminar o máximo possível da “trilha de papel” em sua vida. No entanto, é importante lembrar que a maioria da população ainda imprime as coisas regularmente. Enquanto você provavelmente marca um item com del.icio.us quando quiser salvá-lo para referência futura, o usuário médio da Internet imprimirá a mesma página.
Como as pessoas ainda imprimem informações da Internet, é importante usar o CSS para tornar sua impressora de conteúdo mais amigável . Os visitantes apreciarão todo o trabalho que você dedicou à criação de um belo layout para o site que estão visitando, mas quando decidirem imprimir uma página desse site, eles o apreciarão ainda mais quando perceberem que sua impressão contém apenas o site. texto que eles querem (e nenhum dos gráficos incríveis que ficam ótimos em seu computador, mas que desperdiçariam uma tonelada de tinta de sua impressora). Como o CSS torna bastante simples garantir que o conteúdo seja formatado adequadamente quando impresso, não há desculpa para um verdadeiro projetista negligenciar essa etapa do processo de design.
Você pode pensar que este princípio final soa clichê, mas é sem dúvida o mais importante de toda a lista. Se você se dedica a ser o melhor designer possível, precisa garantir que está sempre trabalhando para expandir seu conhecimento de CSS . Felizmente, isso é fácil de fazer se você tiver o desejo e a vontade de se comprometer com a continuidade de sua educação em CSS. Embora a educação continuada possa ser uma tarefa difícil para indivíduos em muitas indústrias que são de natureza não técnica, porque a Internet é literalmente a base para o CSS, a quantidade de recursos livres que você pode aprender é literalmente infinita. Se você acha que estou exagerando, basta digitar "CSS" no Google e você verá que há 483.000.000 resultados para você navegar.
Além de aprender com recursos online (e recursos de impressão, se preferir), você pode aprender muito com outros designers de CSS. Quer você analise o trabalho deles, ouça os conselhos que eles estão dando online ou fale com eles em situações face a face, você pode ganhar muito valor interagindo e potencialmente colaborando com outros designers que estão comprometidos em seguir os princípios de design de CSS de primeira linha e produzindo peças incríveis de trabalho.