A pesar del nombre que suena súper divertido, los números mágicos son algo malo. Es un término de programación de la vieja escuela para “constante numérica sin nombre”. Como en, solo un número introducido en el código que probablemente sea vital para que las cosas funcionen correctamente, pero es muy difícil para cualquiera que no esté íntimamente familiarizado con el código entender para qué sirve. CSS se carga con constantes numéricas sin nombre, pero generalmente están emparejadas con propiedades y en el contexto de un selector, por lo que hay poco misterio. Sin embargo, hay números mágicos en CSS y siguen siendo malos.
Los números mágicos en CSS se refieren a valores que “funcionan” en algunas circunstancias, pero que son frágiles y propensos a romperse cuando esas circunstancias cambian. Suelen estar siempre relacionados con las fuentes. de una forma u otra. Son creados por un autor que probablemente solo los probó en su propio navegador en condiciones ideales. Echemos un vistazo a algunos ejemplos para que todos sepamos cuáles son y, con suerte, podamos evitarlos en el futuro.
Mira este sencillo conjunto de pestañas:
Cada una de las pestañas está configurada para width: 100px;. En este ejemplo, 100px es nuestro “número mágico”. Hay muchas cosas que pueden salir mal con esto. Simplemente agregar otra pestaña con texto más largo demuestra que:
Un poco incómodo y probablemente indeseable. Podríamos evitar el envoltorio con white-space: nowrap; pero eso posiblemente sea peor:
Nuestras pestañas serían menos propensas a romperse si usamos min-width en su lugar:
O tal vez sin ancho en absoluto:
Si estuviera decidido a tener todas las pestañas del mismo tamaño, podría hacerlo overflow: hidden; y text-overflow: ellipsis; quizás:
En ese caso, probablemente quieras un title atributo para que haya alguna forma de revelar el nombre completo de la pestaña. Podría pensar que esto podría resolverse desde el lado del Sistema de administración de contenido permitiendo solo que los nombres de las pestañas tengan una cierta cantidad de caracteres. Pero, ¿qué pasa con los usuarios que aumentan el tamaño de fuente desde su extremo por razones de accesibilidad? Este tamaño fijo podría perjudicarlos.
En una publicación reciente, Line-On-Sides Headers, utilicé un valor de altura de línea que era un número mágico. Digamos que usó la técnica alrededor del texto con una fuente elegante @ font-face. Digamos que la fuente no se carga o que el usuario la anula o que la página se ve en un navegador que no admite @ font-face. La fuente alternativa se cargará y esa fuente alternativa podría tener un tamaño drásticamente diferente al de la fuente personalizada. Las líneas en el exterior de la fuente alternativa ahora están colocadas de manera incómoda, no centradas como queríamos. El número mágico falla.
Este ejemplo en particular es un poco artificial, pero estoy seguro de que todos han visto fuentes personalizadas que tienen alturas x súper locas y esas cosas.
Digamos que tiene un montón de cajas con diferentes cantidades de contenido. Desea organizarlos en una cuadrícula, por lo que los deja flotar a la izquierda. Una especie de desastre:
Bueno, oye, si todos tuvieran la misma altura, ¡esto no sería un problema!
Es decir, si el usuario que ve el sitio tiene exactamente la misma configuración de tamaño de fuente que usted. Pero los usuarios pueden cambiar eso.
Y ahora un gran trombón triste:
min-height en cambio evitaría la superposición de rarezas, pero luego las cajas son de diferente tamaño y el problema del flotador vuelve a ocurrir. No voy a ir demasiado lejos en las soluciones porque esto ya es muy abstracto, pero tal vez podría usar el desplazamiento en los cuadros, o usar algo de JavaScript para ajustar los tamaños, o usar algún otro tipo de diseño.
Harry Roberts señala un ejemplo clásico de un número mágico en su artículo El código huele en CSS.
.site-nav > li:hover .dropdown{
position: absolute;
top: 37px;
left: 0;
}Esto sería para un menú desplegable con CSS. El menú está oculto fuera de la pantalla hasta que se desplaza el elemento de la lista principal, luego el menú desplegable se mueve a la vista. Debe colocarse en la parte inferior del elemento del menú principal. Para el desarrollador que escribió este código, en su navegador actual, ese elemento de menú tenía 37 px de alto. Estoy seguro de que puedes imaginar que eso no siempre es cierto. 37px es un número mágico. Harry sugiere top: 100% en su lugar significa “todo el camino desde arriba”, que es mucho menos propenso a romperse.
En el artículo Fighting the Space Between Inline-Block Elements, -4px es un número citado como margen que puede cerrar esas brechas. Definitivamente es un número mágico. 4px solo sucede con el ancho de un espacio en un buen número de fuentes en los 16px predeterminados font-size.
Cambia eso font-family a algo como Mónaco? Roto. ¿Cambiar el tamaño de fuente a algo más grande o más pequeño? Roto.
Consulte ese artículo para ver otras correcciones.
Definición de confusión
Debido a que estamos tratando de decir “no los use”, es importante que definamos el término correctamente en lo que se refiere a CSS. He visto varios hilos en el pasado en los que no todos están en la misma página. (1) (2) (3).
He aquí algunos ejemplos:
-webkit-transform: translateZ(0);¿Número mágico? Nah. Solo un pequeño truco que solíamos usar para el rendimiento.
.parent {
padding: 22px;
}
.child {
bottom: 22px;
left: 22px;
}¿Número mágico? Nah. Es un número extraño pero no mágico. El elemento secundario se coloca en la esquina inferior izquierda de un elemento, sans-padding. Debido a que esos números coinciden, tiene sentido lo que está sucediendo. Si fueran todos diferentes, eso significaría que probablemente hay pequeños cambios relacionados con font-size y sería un número mágico.
top: 37px;Digamos que este es un número mágico, como en el ejemplo del menú desplegable anterior. ¿Se puede solucionar con Sass?
$topDistance: 37px;
.dropdown {
top: $topDistance;
}Ya no es una constante numérica “sin nombre”, ¿verdad, porque lo nombramos? Sigue siendo un número mágico en CSS. Es tan frágil como antes.
letter-spacing: -.05em;¿Número mágico? Nah. Si estuviera en píxeles, probablemente lo sería, porque el valor del píxel permanece constante, por lo que su efecto cambia según el tamaño de fuente actual. Tamaño de fuente enorme, casi ningún cambio, tamaño de fuente pequeño, gran cambio. El hecho de que esté en una unidad relativa lo hace menos frágil.
Y EN CONCLUSIÓN
Hombre, odio esta sección de publicaciones de blog, pero es bueno tener un pequeño vertedero para pequeñas cosas que no funcionaron en otros lugares.
- Los estándares de codificación CSS de WordPress dicen que no debe usarlos. ¿Alguna otra?
- Si está utilizando fuentes de iconos, recuerde que son fuentes, por lo que cambian de tamaño. No puede “reservar espacio” para ellos en algún lugar de los valores de píxeles, ya que el tamaño de la fuente puede cambiar, pero el valor de los píxeles no.
- Me gustaría mantener esta publicación de blog actualizada con buenos ejemplos de errores de números mágicos, así que si tiene algún clásico, comente a continuación.
- ¿Qué sucede si intenta centrar una imagen y un texto? vertical-align funciona bastante bien, pero encuentro que a menudo tiene 1 px de diferencia, así que
postion: relative; top: 1px;eso. ¿Es ese un número mágico? No estoy seguro.