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

Muitas vezes, vejo perguntas na lista Hot Network Questions como esta que basicamente perguntam "como faço para desenhar essa forma arbitrária em CSS". Invariavelmente, a resposta é um par de blocos de dados CSS ou SVG com um monte de valores codificados aparentemente aleatórios que formam a forma solicitada.

Quando olho para isso, penso: 'Eca! Que bloco feio de código. Espero nunca ver esse tipo de coisa no meu projeto '. No entanto, eu vejo esses tipos de perguntas e respostas com bastante frequência e com um grande número de votos positivos; portanto, a comunidade não pensa que é ruim.

Mas por que isso é aceitável? Vindo da minha experiência de back-end, isso não faz sentido para mim. Então, por que está tudo bem para CSS / SVG?

Em primeiro lugar, 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 sejam desaprovados, você não tem muita opção (exceto usar um pré-processador como SASS, mas não faria isso por um único trecho).

Em segundo lugar, os valores podem não ser tão mágicos em uma linguagem específica de domínio como CSS. Na programação, um número mágico é um número em que o significado ou a intenção não são óbvios. 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 uso 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 a partir do contexto. E a razão para escolher o valor spefic é simples, porque os designers pensaram que ficaria bem. A introdução de uma variável não ajudaria em nada, já que você poderia nomear 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", duplicaria todos os rótulos e acabaria com arquivos de aparência ridícula, como:

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

Toda vez que você precisava alterar alguns dados, precisava procurar em dois lugares. É verdade que há situações em que é bom evitar duplicação, como se você tem uma cor que é repetida com frequência e pode querer mudar para mudar de tema. Existem pré-processadores e extensões propostas para resolver essas situações, mas, em geral, é desejável ter números junto 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:

Tomar 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 eu conheça.

largura: 200 px;
altura: 200 px;

Eles estão claramente rotulados. Certamente, 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ê tem 5 objetos que todos tinham que ter a mesma largura e cada hardcoded independentemente da sua largura eu iria bater-lhe com o engano vara.

Eu não os chamaria de números mágicos se fossem rotulados, mas ainda assim venceria com o manche indireto .

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 realmente programar nele, mas isso está além do ponto. Em essência, ainda é uma linguagem de folha de estilo .

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.

Inicialmente, inseriríamos toneladas de números mágicos em nosso código. A largura da margem, a altura do texto, os 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 em cima 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. Preferimos ler nossos números de variáveis ​​em um arquivo de configuração.

margin 100
table 500
text size 12

Hum, isso é um pouco claro ... 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, queremos expandir um pouco nosso programa. Também queremos que ele desenhe 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 uma específica um em alguns elementos aninhados.

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

Devemos então 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 já é o mesmo arquivo de configuração.

Mas isso não é verdade, é claro; seu arquivo CSS aumenta 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, definir estilo para todos os divs, mas substituir um especificamente, e o CSS 3 ainda permite algum tipo de uso de 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 para evitar duplicação ou onde outras técnicas também estão disponíveis.

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

Por que [um monte de valores codificados aparentemente aleatórios] está OK para CSS / SVG?

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

Para algo que não seja páginas da Web extremamente simples, você terá que desenvolver uma estratégia disciplinada de "localizar e substituir", ou usar um pré-processador CSS com variáveis ​​ou definir estilos via JavaScript.