¿Por qué son aceptables grandes cantidades de números mágicos en CSS y 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 con un solo fragmento).

En segundo lugar, los valores pueden no ser tan mágicos en un lenguaje específico del dominio como CSS. En la programación, un número mágico es un número donde el significado o la intención no es obvia. 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 único podría significar absolutamente cualquier cosa en el código de propósito general. Pero considera CSS:

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

La altura y el color no son mágicos, porque el significado es perfectamente claro en 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, solo deberías nombrarla 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 todas las etiquetas y terminaría con archivos de aspecto ridículo como:

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

Cada vez que necesites cambiar algunos datos, deberías buscar en dos lugares. Por supuesto, hay situaciones en las que es bueno evitar la duplicación, como si tienes un color que se repite con frecuencia y es posible que desees cambiar para cambiar los temas. Existen preprocesadores y extensiones propuestas para abordar esas situaciones, pero en general, es conveniente 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:

Tome decisiones en un solo lugar .

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

  

ancho: 200px;
    altura: 200px;

Están claramente etiquetados. Claro, los números pasan a ser los mismos. Pero el ancho es el ancho y la altura es la altura. Están diseñados para variar independientemente.

Ahora, si tiene 5 objetos que todos tenían para tener el mismo ancho y cada uno de ellos codificó independientemente su ancho, le ganaría con indirection stick.

No los llamaría números mágicos si estuvieran etiquetados, pero aún así te ganaría con indirection palo.

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

Actualmente, CSS es tan poderoso que puede realmente programar en él, pero eso no es lo importante. En esencia, sigue siendo un lenguaje de hojas de estilo .

Demos un paso atrás. Imagina que tenemos un lenguaje de programación que puedes dibujar en una pantalla. Imagina que queremos programarlo para pintar una página web.

Al principio, ingresábamos 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)

Así que 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? Vamos a formalizarlo un poco.

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

Pero ya sabes, queremos expandir nuestro programa un poco. También queremos que dibuje páginas con varias tablas, páginas sin tablas, páginas con párrafos o botones y mucho 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, tal vez podamos admitir elementos anidados, quizás podamos usar una propiedad general en nuestro archivo de configuración y luego reemplazarlo con un específico uno en unos pocos elementos anidados.

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

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

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

Sin embargo, el CSS moderno permite muchas formas de evitar esta repetición. Puedes usar clases que se aplican a muchos elementos, puedes establecer el estilo para todos los div s, pero luego anula 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 cada ubicación posible. Úselo donde tenga sentido y utilícelo donde evite la duplicación o cuando otras técnicas disponibles también se queden cortas.

Al final, tampoco desea tener demasiados números mágicos en su archivo de configuración :-)

  

¿Por qué es [un grupo de valores codificados de forma aleatoria aparentemente] OK para CSS / SVG?

No está bien. Es posible escribir y mantener archivos ".css" sin formato, pero, finalmente, los valores aleatorios codificados se convertirán en una carga prevalente.

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