Todos podem escrever código CSS, mesmo que ele esteja funcionando em seu projeto agora. Mas o CSS poderia ser melhor? Embora webjx.com introduza uma variedade de técnicas nesta área, comece a usar esses cinco aspectos para melhorar seu CSS, o que fará com que você pareça mais profissional e torne seu código melhor!
1. Redefinir
Em primeiro lugar, deixe-me dizer muito a sério que você sempre terá que redefinir certas categorias. Quer você use Eric Meyer Reset, YUI Reset ou escreva seu próprio código de redefinição, basta usá-lo.
Ele pode remover facilmente o preenchimento e a margem de todos os elementos:
html, corpo, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pré, formulário, conjunto de campos, tabela, th, td {margem: 0;
Eric Meyer Reset e YUI Reset são muito poderosos, mas para mim vão longe demais. Acho que eventualmente você precisará redefinir tudo e depois redefinir as propriedades de todos os elementos. É por isso que Eric Meyer recomenda um uso mais eficiente (redefinir folha de estilo) e você não apenas usa a folha de estilo redefinida, arrasta e solta em seu projeto. Ajuste-a (a folha de estilo de redefinição) e crie sua própria folha de estilo de redefinição.
Ah, por favor, pare de usar:
* {margem: 0;
Passe mais tempo fazendo isso, o que você acha que acontecerá com os botões de opção quando você remover o preenchimento? Os elementos do formulário às vezes podem fazer coisas estranhas, então a maneira mais eficaz é torná-los independentes.
2. Classificação
Um pequeno teste: Este exemplo fará você pensar em como encontrar o atributo de margem certo com mais rapidez?
Exemplo #1
div#cabeçalho h1 {
índice z: 101;
cor: #000;
posição: relativa;
altura da linha: 24px;
margem direita: 48px;
borda inferior: 1px sólido #dedede;
tamanho da fonte: 18px;
}
Exemplo #2
div#header h1 { border-bottom: 1px sólido #dedede; tamanho da fonte: 18px; altura da linha: 24px;
Você não pode me dizer que o Exemplo 2 não consegue encontrar a propriedade da margem correta mais rapidamente. Classifique as propriedades do seu elemento em ordem alfabética. Criar seu CSS de forma consistente ajudará você a economizar tempo procurando uma propriedade específica.
Sei que algumas pessoas organizam seus códigos de uma forma e outras de outra, mas na minha empresa tomamos uma decisão consensual de que todo o código seria organizado em ordem alfabética. Definitivamente ajuda trabalhar com outras pessoas organizando seu código dessa maneira. Eu me encolho toda vez que encontro uma folha de estilo em cascata cujas propriedades não estão classificadas em ordem alfabética.
3. Organização
Você deve organizar suas folhas de estilo de forma que o conteúdo relacionado fique próximo, facilitando a localização do que procura. Use anotações mais eficientes. Por exemplo, é assim que estruturo minha folha de estilo em cascata:
/*****Reset*****/Remove o preenchimento e a margem do elemento.
/*****Elementos Básicos*****/Define o estilo dos elementos básicos: body, h1-h6, ul, ol, a, p, etc.
/*****Classes genéricas*****/ Define estilos simples, como flutuar um lado, remover a margem inferior de um elemento, etc. Claro, a maioria deles não está relacionada à semântica que queremos, mas eles são É necessário processar o código de forma eficiente.
/*****Layout Básico*****/Defina modelos básicos: cabeçalho, rodapé, etc. Ajude a definir os elementos básicos do layout da página web
/*****Cabeçalho*****/Define todos os elementos do ouvinte
/*****Conteúdo*****/Define todos os elementos na caixa de conteúdo
/*****Rodapé*****/Define todos os elementos do rodapé
/*****Etc*****/Define outros seletores. Ao anotar e categorizar elementos semelhantes em grupos, você encontrará o que deseja com mais rapidez.
4. Consistência
Não importa como você decida escrever o código, seja consistente. Estou cansado de todo o debate CSS de 1 linha versus multilinha. Não há necessidade de discutir. Todo mundo tem uma opinião, então escolha uma forma de trabalhar que você goste e seja consistente em todas as suas folhas de estilo.
Pessoalmente, eu usaria uma combinação de ambos. Se um seletor tiver mais de 3 atributos, irei truncá-lo e escrevê-lo em várias linhas.
div#header { float: esquerda;
div#header div.coluna {
borda direita: 1px sólido #ccc;
float: direitadireita;
margem direita: 50px;
preenchimento: 10px;
largura: 300px;
}
div#header h1 { float: posição esquerda: largura relativa: 250px;
Portanto, encontre uma maneira que você goste de trabalhar e seja consistente.
5. Comece do lugar certo
Não tente chegar perto da sua folha de estilo até que a linguagem de marcação esteja completa.
Quando me preparo para dividir uma página da web, antes de criar o arquivo CSS, preciso visualizar e marcar todos os documentos entre a tag de abertura do corpo e a tag de fechamento do corpo. Não adicionarei DIVs, IDs ou seletores de classe adicionais. Vou adicionar alguns DIVs gerais, como ouvinte, conteúdo, rodapé, porque sei que essas coisas existem.
Marcando o documento primeiro, você não terá os problemas já condenados de divities1 e classes2 /*Você só precisa adicionar essas coisas depois de começar a escrever o CSS e perceber que precisará de outro gancho para usá-lo! realize o que você está tentando alcançar.*/(Texto original não traduzido).
Use seletores filhos CSS para especificar elementos filhos, não apenas adicione mecanicamente uma classe ou seletor de ID a um elemento. Lembre-se: CSS não vale nada sem um documento bem formatado (ou estrutura de marcação).
Resumir
Isso pode me ajudar a escrever melhor o código CSS. Mas isso não significa o fim desta lista. A seguir, trarei alguns outros para compartilhar com você. Fique atento ao webjx.com.