La vista general del CSS: colores, tipografías y complejidad

Hay un tipo de problema que no se ve mirando ninguna pantalla concreta y que aparece de golpe al agregar: un sitio con cuarenta y siete grises distintos, once tamaños de fuente que difieren en un píxel, y trescientas reglas que declaran cosas sin efecto. La vista general del CSS calcula ese agregado en unos segundos, y su resultado es la mejor auditoría rápida de coherencia visual que existe, además de un argumento muy convincente para adoptar un sistema de diseño.

Capturar y recorrer

El panel se abre por su nombre desde el menú de comandos y funciona con un botón de captura, que analiza los estilos de la página actual.

Es importante entender su alcance: analiza esta página, no el sitio entero. Para tener una foto completa hay que capturar en varias rutas representativas y sumar mentalmente. Y analiza el CSS cargado, así que los estilos que se cargan bajo demanda en otras pantallas no están.

El resultado tiene cuatro secciones.

El resumen general, con recuentos: elementos, hojas de estilo externas, bloques de estilo en línea, reglas, y un desglose de selectores por tipo.

Los colores, agrupados por su función —fondo, texto, relleno, borde— con el número de sitios donde aparece cada uno, y una advertencia sobre las combinaciones con contraste insuficiente.

Las tipografías, con las familias, los tamaños, los pesos y las alturas de línea que se usan realmente, cada uno con su número de apariciones.

Las declaraciones sin efecto, que son las que aplican una propiedad a un elemento donde no hace nada.

La fragmentación de la paleta

La sección de colores es la que más veces provoca una reacción, y lo que revela es siempre la misma historia. Un sistema de diseño define seis grises; el sitio real tiene cuarenta. La diferencia no viene de una decisión: viene de la acumulación.

Las cuatro fuentes de fragmentación, en orden de frecuencia:

Colores escritos a mano. Alguien necesitaba un gris un poco más claro, lo escribió directamente y siguió con su vida. Cien veces, en tres años, por doce personas.

Colores importados con componentes de terceros. Cada librería trae los suyos.

Colores derivados con transparencia. El mismo color con distintas opacidades se cuenta como colores distintos y visualmente lo son.

Colores heredados de una identidad anterior. Los del rediseño de hace dos años que nunca se terminó de aplicar.

El plan de consolidación que funciona tiene tres pasos y es más fácil de lo que parece.

Uno: agrupar por proximidad. La mayoría de los cuarenta grises son cinco grupos de valores casi idénticos. Distinguir dos tonos que difieren en un uno por ciento de luminosidad es imposible para el ojo.

Dos: elegir un representante por grupo y declararlo como variable con nombre semántico —no “gris claro” sino “fondo de superficie elevada”—, porque el nombre semántico es lo que hace que la variable sobreviva a un cambio de identidad.

Tres: sustituir mecánicamente y prohibir los literales con una regla de análisis estático, que es lo único que evita que el problema vuelva.

La complejidad de los selectores

El resumen de tipos de selector es la sección menos vistosa y la más informativa sobre la salud del CSS.

Muchos selectores de identificador indica un CSS con especificidad alta y difícil de sobrescribir. Cada uno es un punto donde el siguiente cambio necesitará más especificidad todavía.

Muchos selectores universales o muy genéricos son candidatos a coste de recálculo.

Muchos selectores no simples —descendientes largos, combinaciones complejas— indica acoplamiento entre componentes: reglas que dependen de dónde está un elemento y no de qué es. Es la fuente número uno de estilos que se rompen al mover un componente de sitio.

Una proporción alta de selectores de clase respecto al total es la señal buena: indica estilos acoplados al componente y no a la estructura.

Ese perfil de selectores es un indicador de mantenibilidad mucho más fiable que el tamaño de la hoja, y cambia despacio, lo que lo hace útil para seguir la evolución de un proyecto a lo largo de los meses.

Auditar más allá del panel

El panel cubre colores, tipografías y selectores. Hay otras dimensiones de coherencia que no cubre y que se auditan igual de rápido desde la consola.

// Inventario de espaciados, radios, sombras y transiciones realmente usados
(() => {
  const inventario = {
    espaciados: new Map(),
    radios: new Map(),
    sombras: new Map(),
    transiciones: new Map(),
    zIndex: new Map()
  };

  const anota = (mapa, valor) => {
    if (!valor || valor === 'none' || valor === '0px' || valor === 'auto' || valor === 'normal') return;
    mapa.set(valor, (mapa.get(valor) || 0) + 1);
  };

  for (const el of document.querySelectorAll('*')) {
    const s = getComputedStyle(el);
    for (const p of ['paddingTop', 'paddingLeft', 'marginTop', 'marginLeft', 'gap']) anota(inventario.espaciados, s[p]);
    anota(inventario.radios, s.borderRadius);
    anota(inventario.sombras, s.boxShadow);
    anota(inventario.transiciones, s.transitionDuration + ' ' + s.transitionTimingFunction);
    if (s.zIndex !== 'auto') anota(inventario.zIndex, s.zIndex);
  }

  const informar = (nombre, mapa, limite = 20) => {
    const filas = [...mapa].sort((a, b) => b[1] - a[1])
      .map(([valor, veces]) => ({ valor: String(valor).slice(0, 56), veces }));
    console.group(nombre + ': ' + mapa.size + ' valores distintos');
    console.table(filas.slice(0, limite));
    console.groupEnd();
    if (mapa.size > limite) console.warn('  Demasiados valores distintos de ' + nombre + '. Candidato a consolidar.');
  };

  informar('Espaciados', inventario.espaciados);
  informar('Radios de borde', inventario.radios, 8);
  informar('Sombras', inventario.sombras, 8);
  informar('Transiciones', inventario.transiciones, 10);
  informar('Valores de z-index', inventario.zIndex, 15);
})();

De las cinco dimensiones, la de apilamiento suele ser la más reveladora: un sitio con veinte valores distintos y arbitrarios tiene garantizado un bug de superposición esperando a ocurrir, y la solución es una escala corta de valores con nombre —base, contenido flotante, cabecera fija, capa superpuesta, diálogo, aviso— en lugar de números elegidos por competición.

La de espaciados es la que más impacto visual tiene: un sistema con seis valores de espaciado se percibe como ordenado, y uno con cuarenta y siete se percibe como descuidado aunque nadie sepa decir por qué.