Entrevista Frontend: ¿Cómo reutilizan los tokens de diseño las CSS @functions?

1. Contexto y alcance

Un sistema de diseño cuenta con tokens de espaciado, y los componentes calculan padding a partir de la densidad y el ancho del contenedor. El equipo busca reducir las expresiones calc() repetidas mientras conserva CSS puro, la sobrescritura de temas y el comportamiento en navegadores más antiguos. Diseña la solución con una @function de CSS y explica un fallback seguro.

2. Qué está evaluando el entrevistador

Comprender que @function define una función personalizada de CSS cuyo nombre es un dashed-ident que comienza con --.
Declarar parámetros, valores por defecto, tipos opcionales y result, sabiendo que el cuerpo no retorna como JavaScript en la primera declaración.
Distinguir entre funciones personalizadas, custom properties, funciones en tiempo de compilación de Sass y la cascada en tiempo de ejecución.
Gestionar la detección de características, la herencia de temas, ciclos, compatibilidad y mejora progresiva accesible.

3. Preguntas para aclarar primero

¿Qué navegadores objetivo carecen de CSS Functions y se permite un polyfill?
¿Los tokens son longitudes fijas, porcentajes o valores que pueden incluir calc() y unidades de contenedor?
¿Los argumentos inválidos deben usar valores por defecto, invalidar la declaración o utilizar un fallback del componente?
¿Los temas definen tokens en :root, a nivel de componente o en el límite de un Shadow DOM?

4. Respuesta de treinta segundos

Colocaría una propiedad padding estática y funcional antes de la declaración mejorada, para luego sobrescribirla dentro de @supports. La función utiliza parámetros tipados y con valores por defecto, y devuelve una longitud a través de result. Las custom properties proporcionan las entradas del tema; la función realiza el cálculo. Los navegadores no compatibles ignoran la función desconocida y conservan el fallback anterior.

5. Análisis detallado paso a paso

Paso 1: Definir los parámetros y el resultado

css

@function --space(--step <integer>: 2, --base <length>: 4px) {
  result: calc(var(--base) * var(--step));
}

Los parámetros son custom properties locales y pueden declarar tipos de CSS y valores por defecto. result proporciona el valor final; no es un return temprano de JavaScript, por lo que la función sigue las reglas de procesamiento de declaraciones de CSS.

Paso 2: Conectar la función con los tokens

css

:root {
  --space-base: 4px;
}

.card {
  padding: 16px;
  padding: --space(3, var(--space-base));
}

La primera declaración es el fallback para navegadores antiguos; la segunda se aplica cuando la función personalizada es parseada. Los tokens siguen en cascada a través de custom properties, de modo que un tema o ámbito de componente puede sobrescribir --space-base.

Paso 3: Manejar tipos y valores inválidos

Las restricciones de tipo rechazan valores que no coinciden con la gramática. Los valores por defecto cubren argumentos omitidos, no cadenas arbitrarias que deberían convertirse en longitudes. Prueba valores negativos, unidades incorrectas y tokens faltantes, y nunca concatenes cadenas controladas por el usuario dentro de argumentos de funciones CSS.

Paso 4: Comprender el alcance y las dependencias

Los parámetros de la función se comportan como custom properties locales dentro del cuerpo, mientras que el punto de invocación sigue respetando la cascada, la herencia y el orden de capas. Un token utilizado por la función no debe depender a su vez del resultado de la función; un ciclo invalida la declaración computada.

Paso 5: Detección de características y mejora progresiva

css

.card {
  padding: 16px;
}

@supports (padding: --space(3, 4px)) {
  .card {
    padding: --space(3, var(--space-base, 4px));
  }
}

@supports evalúa la capacidad de análisis sintáctico (parsing), no cada rama de la lógica de negocio. Mantén un fallback estable, inspecciona el diseño computado y asegúrate de que los navegadores no compatibles sigan conservando texto legible, indicadores de foco y un tamaño adecuado en los objetivos táctiles.

6. Modelo de respuesta de alta calidad

Proporcionaría una propiedad padding estática, y luego calcularía el valor mejorado con @function dentro de @supports. Las custom properties transportan los valores del tema; los parámetros tipados y result realizan el cálculo. Probaría argumentos omitidos, unidades erróneas, valores negativos y ciclos. Dado que el soporte aún varía, el fallback debe ser autosuficiente, y las verificaciones del navegador deben comprobar los estilos computados y las dimensiones accesibles.

7. Errores comunes

Tratar CSS @function como una función de Sass en tiempo de compilación → los navegadores en producción la ignoran → mantén un fallback en tiempo de ejecución y detecta características.
Pasar un número sin unidad a un parámetro <length> → la declaración se vuelve inválida → especifica tipos y valores por defecto con claridad.
Asumir que la función muta una custom property → las sobrescrituras del tema fallan → separa las entradas del token de la salida de result.
Escribir solo @supports sin una declaración base → los navegadores no compatibles pierden el espaciado → escribe primero el fallback.
Hacer que las funciones se referencien entre sí → las dependencias cíclicas invalidan los valores → mantén las dependencias de tokens en un solo sentido.

8. Preguntas de seguimiento

Pregunta de seguimiento 1: ¿En qué se diferencia de una custom property?

Una custom property almacena un valor en cascada; una función personalizada acepta parámetros y calcula un resultado. La función puede reutilizar la lógica de cálculo mientras lee entradas de tokens heredadas.

Pregunta de seguimiento 2: ¿En qué se diferencia de una función de Sass?

Una función de Sass emite CSS en tiempo de compilación y no puede observar temas en tiempo de ejecución ni el estado del contenedor. Una función personalizada de CSS se ejecuta durante la cascada y el cálculo del navegador, por lo que es dinámica pero requiere manejo de compatibilidad.

Pregunta de seguimiento 3: ¿Cómo detectas el soporte?

Usa @supports (padding: --space(1, 4px)) para detectar el soporte de parseo, conservando el fallback anterior. Las pruebas también deben inspeccionar el valor computado en un navegador real.

Pregunta de seguimiento 4: ¿Cómo evitas los ciclos?

Haz que los tokens base dependan de valores directos, permite que las funciones lean tokens y emitan valores derivados, y prohíbe que los tokens hagan referencia a propiedades que incluyan el resultado de la función. Revisa los valores computados inválidos en DevTools.