Por que grandes quantidades de números mágicos são aceitáveis em CSS e SVGs?

Primeiramente, os valores mágicos são evitados na programação usando variáveis ou constantes. O CSS não suporta variáveis, portanto, mesmo que os valores mágicos tenham sido desaprovados, você não tem muita escolha (exceto usar um pré-processador como SASS, mas você não faria isso por um único trecho).

Em segundo lugar, os valores podem não ser tão mágicos em um idioma específico do domínio, como o CSS. Na programação, um número mágico é um número em que o significado ou intenção não é óbvio. Se uma linha diz:

x += 23;

Você perguntará "por que 23"? Qual é o raciocínio? Uma variável poderia esclarecer a intenção:

x += defaultHttpTimeoutSeconds;

Isso ocorre porque um número único pode significar absolutamente qualquer coisa no código de propósito geral. Mas considere CSS:

background-color: #ffffff;
font-size: 16px;

A altura e a cor não são mágicas, porque o significado é perfeitamente claro do contexto. E a razão para escolher o valor do spefic é simples porque os designers pensaram que ficaria bem. Introduzir uma variável não ajudaria em nada, já que você nomearia algo como " defaultBackgroundColor " e " defaultFontSize " de qualquer maneira.

É aceitável porque esses formatos não são código , mas dados . Se você removesse todos os "números mágicos", você basicamente duplicaria cada etiqueta e terminaria com arquivos ridículos como:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Sempre que você precisar alterar alguns dados, precisará procurar em dois lugares. Concedido, há situações em que é bom evitar a duplicação, como se você tivesse uma cor que é repetida com freqüência e você pode querer mudar para alterar os temas. Existem pré-processadores e extensões propostas para lidar com essas situações, mas, em geral, é desejável ter números em conjunto com a estrutura em um formato de dados.

A proibição de números mágicos é a versão primordial deste princípio de design:

Tome decisões em um só lugar .

Mas estes não são números mágicos . Pelo menos, não tanto quanto qualquer guia de estilo de codificação que conheço está em causa.

width: 200px;
height: 200px;

Eles são claramente rotulados. Claro, os números são os mesmos. Mas a largura é a largura e a altura é a altura. Eles são projetados para variar de forma independente.

Agora, se você tiver 5 objetos que todos tiveram para ter a mesma largura e cada um deles codificar de forma independente sua largura, eu o vencerei com o indireto stick.

Eu não os chamaria de números mágicos se eles fossem rotulados, mas eu ainda batia em você com a indireção pau.

Como o CSS não é uma linguagem de programação, é o arquivo de configuração que contém os dados variáveis do seu programa.

Atualmente, o CSS é tão poderoso que você pode programá-lo, mas isso está além do ponto. Em essência, ainda é um idioma da folha de estilos .

Vamos dar um passo atrás. Imagine que temos uma linguagem de programação que pode desenhar em uma tela. Imagine que queremos programá-lo para pintar uma página da web.

Primeiramente, nós inserimos muitos números mágicos em nosso código. A largura da margem, a altura do texto, recuos, etc., etc.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Então, extraímos os números mágicos e os colocamos no topo do nosso arquivo.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Agora isso é um pouco feio. Nós preferimos ler nossos números de variáveis a partir de um arquivo de configuração.

margin 100
table 500
text size 12

Mm, isso é um pouco incerto ... O que esses números significam? O que esses nomes significam? Vamos formalizar um pouco.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Mas você sabe, nós queremos expandir nosso programa um pouco. Também queremos desenhar páginas com várias tabelas, páginas sem tabelas, páginas com parágrafos ou botões e mais. Vamos adicionar seletores ao nosso arquivo de configuração para que possamos especificar qual parágrafo deve ter uma fonte maior ou uma cor de texto diferente, talvez possamos suportar elementos aninhados, talvez possamos usar uma propriedade geral em nosso arquivo de configuração e substituí-la por um específico um em alguns elementos aninhados.

Você sente onde isso está indo, eventualmente você chega como CSS. (E um navegador para renderizá-lo.)

Devemos adicionar recursos ao nosso arquivo de configuração para que possamos evitar números mágicos novamente? Adicionar variáveis? Adicionar um arquivo de configuração para o nosso arquivo CSS? Parece um pouco inútil se você se lembrar do nosso arquivo CSS é o mesmo arquivo de configuração.

Mas isso não é verdade, claro; seu arquivo CSS cresce cada vez mais e, eventualmente, você se depara com os mesmos problemas dos números mágicos originais, o mesmo número repetido em todo o lugar, às vezes com pequenas transformações, etc.

CSS moderno, no entanto, permite muitas maneiras de evitar essa repetição. Você pode usar classes que se aplicam a muitos elementos, você pode definir o estilo para todos os div s, mas, em seguida, substituir um especificamente, e CSS 3 ainda permite algum tipo de uso variável.

Isso não significa que você precise começar a usar a variável CSS em todos os locais possíveis. Use-o onde fizer sentido e use-o onde você evita a duplicação ou onde outras técnicas também estão disponíveis.

No final, você não quer muitos números mágicos no seu arquivo de configuração: -)

Why is it [a bunch of seemingly random hard-coded values] OK for CSS/SVG?

Não está bem. É possível escrever e manter arquivos ".css" simples, mas, eventualmente, valores codificados aleatórios se tornarão um fardo predominante.

Para qualquer coisa além de páginas da Web extremamente simples, você terá que desenvolver uma estratégia disciplinada de "localizar e substituir" ou usar um pré-processador de CSS com variáveis ou definir estilos via JavaScript.