Não escreva títulos em CSS
Apenas divida as seções em arquivos. Qualquer comentário CSS, deve ser apenas isso, comentários.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
Use um script para combiná-los em um; se necessário. Você também pode ter uma boa estrutura de diretórios e fazer com que seu script procure recursivamente .cssarquivos.
Se você precisar escrever títulos, tenha um sumário no início do arquivo
Os títulos no sumário devem ser perfeitamente iguais aos títulos que você escrever mais tarde. É doloroso procurar títulos. Para adicionar ao problema, como exatamente alguém deve saber que você tem outro cabeçalho após o primeiro cabeçalho? ps. não adicione documentos * (estrela) no início de cada linha ao escrever TOCs, apenas torna mais irritante selecionar o texto.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
Escreva comentários com ou dentro das regras, fora do bloco
Primeiro, quando você edita o script, há uma chance de 50/50 de prestar atenção ao que está fora do bloco de regras (principalmente se for uma grande quantidade de texto;)). Em segundo lugar, não há (quase) nenhum caso em que você precise de um "comentário" do lado de fora. Se estiver fora, é 99% das vezes um título, então mantenha-o assim.
Dividir a página em componentes
Os componentes devem ter position:relative, não paddinge não margin, na maioria das vezes. Isto simplifica% governa um monte, bem como permitindo muito mais simples absolute:position'ing de elementos, uma vez que se há um recipiente posicionado absoluto o elemento posicionado absoluta usará o recipiente quando computação top, right, bottom, leftpropriedades.
A maioria dos DIVs em um documento HTML5 geralmente é um componente.
Um componente também é algo que pode ser considerado uma unidade independente na página. Em termos de leigos, tratam algo como um componente se faz sentido tratar algo como uma caixa preta .
Indo com o exemplo da página QA novamente:
#navigation
#question
#answers
#answers .answer
etc.
Ao dividir a página em componentes, você divide seu trabalho em unidades gerenciáveis.
Coloque regras com efeito cumulativo na mesma linha.
Por exemplo border, margine padding(mas não outline), todos aumentam as dimensões e o tamanho do elemento que você está estilizando.
position: absolute; top: 10px; right: 10px;
Se eles não são tão legíveis em uma linha, pelo menos os coloque bem próximos:
padding: 10px; margin: 20px;
border: 1px solid black;
Use taquigrafia quando possível:
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
Nunca repita um seletor
Se você tiver mais instâncias do mesmo seletor, é provável que você acabe inevitavelmente com várias instâncias das mesmas regras. Por exemplo:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
Evite usar TAGs como seletores, quando você puder usar id / classes
Primeiro, as tags DIV e SPAN são a exceção: você nunca deve usá-las! ;) Use-os apenas para anexar uma classe / ID.
Este...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
Deve ser escrito assim:
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
Como os DIVs pendentes extras não adicionam nada ao seletor. Eles também forçam uma regra de tag desnecessária. Se você mudasse, por exemplo, .answerde um divpara um, articleseu estilo seria quebrado.
Ou se você preferir mais clareza:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
A razão de ser a border-collapsepropriedade é uma propriedade especial que só faz sentido quando aplicada a a table. Se .statisticsnão é um table, não deve ser aplicado.
Regras genéricas são más!
- evite escrever regras genéricas / mágicas se puder
- a menos que seja para redefinição / redefinição de CSS, toda a sua mágica genérica deve ser aplicada a pelo menos um componente raiz
Eles não economizam seu tempo, fazem sua cabeça explodir; além de tornar a manutenção um pesadelo. Ao escrever a regra, você pode saber onde elas se aplicam, no entanto, isso não garante que sua regra não irá mexer com você mais tarde.
Para adicionar a isso, regras genéricas são confusas e difíceis de ler, mesmo se você tiver alguma idéia do documento que está estilizando. Isso não quer dizer que você não deve escrever regras genéricas, apenas não as use, a menos que realmente pretenda que sejam genéricas, e mesmo elas adicionem o máximo possível de informações de escopo ao seletor.
Coisas assim ...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
... tem o mesmo problema que o uso de variáveis globais em uma linguagem de programação. Você precisa dar a eles espaço!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
Basicamente, lê-se como:
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
Gosto de usar IDs sempre que um componente que conheço é um singleton em uma página; suas necessidades podem ser diferentes.
Nota: Idealmente, você deve escrever apenas o suficiente. Mencionar mais componentes no seletor, no entanto, é o erro mais perdoador, comparado a mencionar menos componentes.
Vamos supor que você tenha um paginationcomponente. Você o usa em muitos lugares do seu site. Este seria um bom exemplo de quando você escreveria uma regra genérica. Digamos que você vincule display:blocko número da página individual e forneça a eles um plano de fundo cinza escuro. Para que eles sejam visíveis, você precisa ter regras como esta:
.pagination .pagelist a {
color: #fff;
}
Agora, digamos que você use sua paginação para obter uma lista de respostas, você pode encontrar algo parecido com isto
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
Isso tornará os links brancos em preto, o que você não deseja.
A maneira incorreta de corrigi-lo é:
.pagination .pagelist a {
color: #fff !important;
}
A maneira correta de corrigi-lo é:
#answers .header .pagination .pagelist a {
color: #fff;
}
Comentários "lógicos" complexos não funcionam :)
Se você escrever algo como: "esse valor depende de blá-blá combinado com a altura do blá-blá", é inevitável que você cometa um erro e tudo cairá como um castelo de cartas.
Mantenha seus comentários simples; se você precisar de "operações lógicas", considere uma dessas linguagens de modelagem CSS, como SASS ou LESS .
Como você escreve um palete de cores?
Deixe isso para o fim. Tenha um arquivo para todo o palete de cores. Sem esse arquivo, seu estilo ainda deve ter algumas paletas de cores utilizáveis nas regras. Seu palete de cores deve substituir. Você encadeia seletores usando um componente pai de nível muito alto (por exemplo #page) e depois escreve seu estilo como um bloco de regras auto-suficiente. Pode ser apenas cor ou algo mais.
por exemplo.
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
A idéia é simples: seu palete de cores é uma folha de estilo independente do estilo base, no qual você cascata .
Menos nomes, requer menos memória, facilitando a leitura do código
Usar menos nomes é melhor. Idealmente, use palavras muito simples (e curtas!): Texto, corpo, cabeçalho.
Eu também acho que a combinação de palavras simples é mais fácil de entender do que tomar uma sopa longa de palavras "apropriadas": corpo de post, cabeçalho, informações do usuário etc.
Mantenha o vocabulário pequeno, dessa maneira, mesmo que algum estranho que esteja lendo sua sopa de estilo (como você depois de algumas semanas;)) precise entender apenas onde as palavras são usadas e onde todos os seletores são usados. Por exemplo, eu uso .thissempre que um elemento é supostamente "o item selecionado" ou "o item atual" etc.
Limpe depois de si mesmo
Escrever CSS é como comer, às vezes você deixa uma bagunça para trás. Certifique-se de limpar a bagunça, ou o código do lixo ficará acumulado. Remova as classes / IDs que você não usa. Remova as regras CSS que você não usa. Verifique se tudo está bem e que você não tem regras conflitantes ou duplicadas.
Se você, como sugeri, tratou alguns contêineres como caixas-pretas (componentes) em seu estilo, usou esses componentes em seus seletores e manteve tudo em um arquivo dedicado (ou dividiu adequadamente um arquivo com um sumário e cabeçalhos), o trabalho é substancialmente mais fácil ...
Você pode usar uma ferramenta como a extensão do firefox Dust-Me Selectors (dica: aponte-o para o seu sitemap.xml) para ajudá-lo a encontrar alguns dos itens ocultos nos seus munições e bombas css.
Mantenha um unsorted.cssarquivo
Digamos que você esteja criando um site de controle de qualidade e já tenha uma folha de estilo para a "página de respostas", a qual chamaremos answers.css. Se você agora precisa adicionar muitos css novos, adicione-o à unsorted.cssfolha de estilo e refatorá-lo answers.css.
Várias razões para isso:
- é mais rápido refatorar depois que você terminar, é procurar regras (que provavelmente não existem) e injetar código
- você escreverá as coisas que removerá, injetar código apenas dificulta a remoção desse código
- anexar ao arquivo original facilmente leva à duplicação de regra / seletor
simplicity,complexity,maintenance,structureerefactoring.