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; preenchimento: 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. Classificar
um pequeno teste
Este exemplo é para fazer 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#cabeçalho h1 { borda inferior: 1px sólido #dedede; cor: #000; tamanho da fonte: 18px; altura da linha: 24px; margem direita: 48px; posição: relativa; índice z: 101; } |
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:
| /*****Reiniciar*****/ Remova o preenchimento e a margem de um elemento. /*****Elementos Básicos*****/ Defina estilos para elementos básicos: body, h1-h6, ul, ol, a, p, etc. /*****Classes genéricas*****/ Definir 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 são necessários para 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 da web /*****Cabeçalho*****/ Definir todos os elementos do ouvinte /*****Contente*****/ Defina todos os elementos dentro da caixa de conteúdo /*****Rodapé*****/ Definir todos os elementos do rodapé /*****Etc*****/ Defina 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 no 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.
Ao marcar o documento primeiro, você não terá os problemas já condenados das divisões1 e classes2!
/*Você só precisa adicionar essas coisas depois de começar a escrever o CSS e perceber que precisará de outro gancho para realizar o que 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).