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

63

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?

Restabelecer Monica
fonte
38
O que é um desenho, se não um monte aleatório de números mágicos (pense em traços entre 2 (x, y) pontos ou em matrizes de pixels etc.) que tenham uma boa aparência?
68
CSS possui variáveis? SVG?
Oded
36
É por isso que muitos projetos maiores têm um pré-processador CSS como SASS ou LESS que suporta variáveis.
Ixrec
2
@Oded Para CSS, existe um suporte global de 40% para variáveis ​​(portanto, não é recomendado, a menos que você queira dizer a todos os visitantes da Microsoft que eles não são bem-vindos). A Microsoft provavelmente seguirá a tendência no Edge, e os dispositivos móveis acabarão por se atualizar. O SVG, por outro lado, tem o conceito de variáveis ​​em algum documento de status de rascunho abandonado, mas elas provavelmente nunca serão implementadas.
Phyrfox 07/04/16
12
Por quê? Porque eles não são números mágicos. CSS contém dados, diferentemente de um programa que contém instruções. Embora o CSS esteja praticamente completo, não é uma linguagem de programação.
Derek朕會功夫

Respostas:

117

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.

JacquesB
fonte
16
Alguns valores são realmente escolhidos porque "eles parecem bons". Mas o exemplo que o OP vinculado contém o mesmo valor várias vezes, mas não está claro se eles representam a mesma coisa ou apenas têm o mesmo valor por coincidência. Também usa um valor 198pxcuja diferença é o tamanho de outra coisa ( 200px) e uma 2pxborda.
CodesInChaos
11
@CodesInChaos: Sim, existem alguns casos em que variáveis ​​ou algum tipo de expressão de dependência seriam legais.
precisa saber é o seguinte
21
Note-se que CSS faz variáveis de apoio
phihag
28
@phihag Nas especificações, sim, mas na natureza , nem tanto (eu não considero o suporte global de 40% no momento deste comentário como "amplamente suportado". No entanto, você está certo ao dizer que, no futuro , teremos variáveis CSS e eu aprendi algo novo hoje, por isso obrigado por que..
phyrfox
2
@JaredSmith É bom para um webapp de escala relativamente grande, no entanto, para páginas comuns (talvez estáticas), incluindo um enorme polyfill, é um exagero.
Derek朕會功夫
80

É 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.

Karl Bielefeldt
fonte
22
+1 porque: "É aceitável porque esses formatos não são código, mas dados".
Pieter B
11
"É verdade que há situações em que é bom evitar duplicações, como se você tem uma cor que é repetida com frequência e pode querer mudar para mudar de tema". - Provavelmente melhor feito com as classes de qualquer maneira: .main_color { color: .. }e usando essa classe é o método de deduplicação
Izkata
11
O código que determina a aparência de um aplicativo ainda é código e não dados.
ESR
25

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 .

candied_orange
fonte
4
Se você tinha objetos suficientes para precisar de uma variável, possui objetos suficientes para criar uma nova classe.
Jaketr00
11
Esta é a melhor resposta, pois mostra o ponto: esses não são números mágicos.
TheBlastOne
2
"5 objetos em que todos tinham a mesma largura e cada um codificava sua largura independentemente, eu venceria com um pedaço de pau". Bem-vindo ao mundo divertido do web design.
Whatsisname
2
Os números mágicos não são apenas problemáticos por causa de "Tomar decisões em um só lugar" (também conhecido como DRY), mas também porque são difíceis de entender.
sleske
Existe uma alternativa para ser espancado com um pau?
djechlin
10

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 :-)

Dorus
fonte
Por que importa onde está a redundância? A manutenção não será um problema, não importa onde esteja?
Peter Mortensen
@PeterMortensen Essa é sempre uma consideração entre baixo tempo de desenvolvimento ou alta capacidade de manutenção. É fácil desenvolver alta redundância, porque você pode mudar rapidamente as coisas aqui e ali; baixa redundância é fácil na manutenção, porque é possível alterar rapidamente o estilo global. Na prática, você deseja estar em algum lugar entre os dois, porque, com um estilo global, é muito mais fácil adicionar novas páginas, mas ter todos os últimos recursos obscuros aderidos a qualquer mudança possível de estilo global leva uma eternidade para se desenvolver.
Dorus
É bom que o CSS tenha recursos nas duas direções. E cabe ao desenvolvedor da web decidir quanto tempo gastar na redução da redundância e no aumento da capacidade de manutenção, ou tempo para analisar novas páginas / recursos. Interessante o suficiente, o mesmo vale para qualquer outra linguagem de programação em que você pode passar meses para criar o design perfeito, ou dias para encerrar o programa e meses para caçar bugs impossíveis.
Dorus
Interessante o suficiente, acabei de me deparar com essa questão que fala sobre levar a abstração longe demais e perder tempo de manutenção e de desenvolvimento.
Dorus
5

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.

Jackson
fonte