¿Por qué son aceptables grandes cantidades de números mágicos en CSS y SVG?

Muchas veces veo preguntas en la lista de preguntas de Hot Network como esta que básicamente preguntan "¿cómo dibujo esta forma arbitraria en CSS". Invariablemente, la respuesta es un par de bloques de datos CSS o SVG con un montón de valores codificados aparentemente aleatorios que forman la forma solicitada.

Cuando miro esto, pienso '¡Qué asco! Qué bloque de código tan feo. Espero nunca ver este tipo de cosas en mi proyecto '. Sin embargo, veo estos tipos de preguntas y respuestas con bastante frecuencia y con una gran cantidad de votos a favor, por lo que claramente la comunidad no cree que sean malos.

Pero, ¿por qué es esto aceptable? Viniendo de mi experiencia de back-end, esto no tiene sentido para mí. Entonces, ¿por qué está bien para CSS / SVG?

En primer lugar, los valores mágicos se evitan en la programación mediante el uso de variables o constantes. CSS no admite variables, por lo que incluso si los valores mágicos estuvieran mal vistos, no tienes muchas opciones (excepto usar un preprocesador como SASS, pero no harías eso por un solo fragmento).

En segundo lugar, los valores podrían no ser tan mágicos en un lenguaje específico de dominio como CSS. En programación, un número mágico es un número donde el significado o la intención no son obvios. Si una línea dice:

x += 23;

Usted preguntará "¿por qué 23"? ¿Cuál es el razonamiento? Una variable podría aclarar la intención:

x += defaultHttpTimeoutSeconds;

Esto se debe a que un número solitario podría significar absolutamente cualquier cosa en el código de propósito general. Pero considere CSS:

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

La altura y el color no son mágicos, porque el significado es perfectamente claro desde el contexto. Y la razón para elegir el valor específico es simple porque los diseñadores pensaron que se vería bien. La introducción de una variable no ayudaría en nada, ya que de todos modos simplemente la nombraría como " defaultBackgroundColor" y " defaultFontSize".

Es aceptable porque estos formatos no son código , sino datos . Si eliminara todos los "números mágicos", esencialmente duplicaría cada etiqueta y terminaría con archivos de aspecto ridículo como:

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

Cada vez que necesita cambiar algunos datos, debe buscar en dos lugares. De acuerdo, hay situaciones en las que es bueno evitar la duplicación, como si tiene un color que se repite con frecuencia y es posible que desee cambiar para cambiar los temas. Hay preprocesadores y extensiones propuestas para abordar esas situaciones, pero en general, es deseable tener números junto con la estructura en un formato de datos.

La prohibición de los números mágicos es la versión primordial de este principio de diseño:

Toma decisiones en un solo lugar .

Pero estos no son números mágicos . Al menos, no en lo que respecta a cualquier guía de estilo de codificación que conozca.

ancho: 200 px;
altura: 200 px;

Están claramente etiquetados. Claro, los números son los mismos. Pero el ancho es el ancho y la altura es la altura. Están diseñados para variar de forma independiente.

Ahora, si tienes 5 objetos que tenían que tener el mismo ancho y cada uno codificaba independientemente su ancho, te golpearía con el palo de indirección .

No los llamaría números mágicos si están etiquetados, pero aún así te ganaría con el palo de indirección .

Debido a que CSS no es un lenguaje de programación, es el archivo de configuración que contiene los datos variables para su programa.

Actualmente, CSS es tan poderoso que realmente puedes programarlo, pero eso no viene al caso. En esencia, sigue siendo un lenguaje de hoja de estilo .

Retrocedamos un paso. Imagina que tenemos un lenguaje de programación que puede dibujar en una pantalla. Imagina que queremos programarlo para pintar una página web.

Al principio, ingresaríamos toneladas de números mágicos en nuestro código. El ancho del margen, la altura del texto, las sangrías, etc., etc.

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

Entonces extraemos los números mágicos y los colocamos en la parte superior de nuestro archivo.

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

Ahora esto es un poco feo. Preferimos leer nuestros números variables de un archivo de configuración.

margin 100
table 500
text size 12

Mm, eso no está claro ... ¿Qué significan esos números? ¿Qué significan esos nombres? Formalicémoslo un poco.

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

Pero ya sabes, queremos ampliar un poco nuestro programa. También queremos que dibuje páginas con varias tablas, páginas sin tablas, páginas con párrafos o botones y más. Agreguemos selectores a nuestro archivo de configuración para que podamos especificar qué párrafo debe tener una fuente más grande o un color de texto diferente, quizás podamos admitir elementos anidados, quizás podamos usar una propiedad general en nuestro archivo de configuración y luego anularlo con un específico uno en unos pocos elementos anidados.

Sientes a dónde va esto, eventualmente llegas como CSS. (Y un navegador para representarlo).

¿Deberíamos agregar capacidades a nuestro archivo de configuración para que podamos evitar nuevamente los números mágicos? Añadir variables? ¿Agregar un archivo de configuración para nuestro archivo CSS? Se siente un poco inútil si recuerdas que nuestro archivo CSS ya es ese mismo archivo de configuración.

Pero eso no es cierto, por supuesto; su archivo CSS se hace cada vez más grande, y eventualmente se encuentra con los mismos problemas que con los números mágicos originales, el mismo número repetido por todas partes, a veces con pequeñas transformaciones, etc.

Sin embargo, el CSS moderno permite muchas formas de evitar esta repetición. Puede usar clases que se aplican a muchos elementos, puede establecer el estilo para todos los divs, pero luego anular uno específicamente, y CSS 3 incluso permite algún tipo de uso variable.

Eso no significa que deba comenzar a usar la variable CSS en todas las ubicaciones posibles. Úselo donde tenga sentido y úselo donde evite la duplicación o donde otras técnicas también estén disponibles.

Al final, tampoco querrás demasiados números mágicos en tu archivo de configuración :-)

¿Por qué es correcto [un montón de valores codificados aparentemente aleatorios] para CSS / SVG?

No esta bien. Es posible escribir y mantener archivos ".css" simples, pero eventualmente los valores codificados aleatorios se convertirán en una carga frecuente.

Para cualquier cosa que no sean páginas web extremadamente simples, tendrá que desarrollar una estrategia disciplinada de "buscar y reemplazar", o utilizar un preprocesador CSS con variables, o definir estilos a través de JavaScript.