2.v.Anatomy-of-a-Ruleset.md

Anatomia de um Conjunto de Regras

Antes de demonstrar como podemos escrever o nosso conjunto de regras, devemos primeiro nos familiarizar com a terminologia relevante:

[seletor] {
  [propriedade]: [valor];
  [<--declaração--->]
}

Como por exemplo:

.foo, .foo--bar,
.baz {
  display: block;
  background-color: green;
  color: red;
}

Aqui, você pode ver que temos:

• Seletores relacionados na mesma linha; seletores não relacionadas em novas linhas;
• Um espaço antes da nossa chave de abertura ({);
• Propriedades e valores na mesma linha;
• Um espaço após os dois pontos (:) de nossa propriedade e antes de nosso valor;
• Cada declaração em sua própria nova linha;
• A chave de abertura ({) na mesma linha de nosso último seletor;
• A nossa primeira declaração em uma nova linha após a chave de abertura ({);
• A nossa chave de fechamento (}) em sua própria nova linha;
• Cada declaração indentada por dois (2) espaços antes dela;
• Um ponto e vírgula (;) ao final de cada declaração.

Este formato é, em grande maioria, o padrão universal (exceto para variações no número de espaços para indentar o código; contudo, a maior parte dos desenvolvedores prefere utilizar (2) dois).

Dessa forma, o seguinte seria incorreto:

.foo, .foo--bar, .baz
{
	display:block;
	background-color:green;
	color:red }

Os problemas deste trecho incluem:

• Tabs ao invés de espaços;
• Seletores não relacionados na mesma linha;
• A chave de abertura ({) em uma linha abaixo dos seletores;
• A chave de fechamento (}) não está em sua própria linha;
• O ponto-e-vírgula (;) após o último valor do seletor (e, neste caso, opcional) está faltando;
• Não há um espaço após os dois pontos (:).