El concepto de superficies en Css

Las superficies, más conocidas como Surfaces o Elevations es un concepto que ha ido apareciendo en los sistemas de diseño. Aunque con diferente significado:

1. En algunos casos se refieren a cualquier grupo de elementos que visualmente quedan por encima del contenido principal, normalmente con un color de fondo diferente o una sombra.
2. O a los elementos que se superponen al contenido, como modals o contenido que se desliza encima del contenido principal.

Hablemos del primer caso.

Un surface podrían ser los estilos que aplicamos a un <blockquote> o a un formulario para elevarlo visualmente del fondo de la pagina.

Al cambiar el color de fondo, en algunos casos nos veremos obligados a cambiar los colores de los elementos que forman parte de esa Surface (texto, links, etc ...), si mantenemos cierta coherencia en nuestro proyecto esos colores se pueden agrupar y reutilizar allá donde aplicaquemos la misma Surface.

Surface 0

La primera capa serían los estilos que aplicamos globalmente:

:root {
    --background-color: lightgray;
    --color: black;
    --link-color: orange;
    --link-color-hover: tomato;
}

:where(body) {
    background-color: var(--background-color);
    color: var(--color);
}

:where(a) {
    color: var(--color-link);
}

:where(a:focus-visible, a:hover) {
    color: var(--color-link-hover);
}

Estos estilos, globales con baja especifidad para que sean fácilmente sobrescritos, representan el nivel 0 de nuetras superficies y dan estilos por defecto a la web.

Definir otras superficies

No tiene demasiado truco, solo debemos definir los estilos de elementos que necesitaremos en cada caso, los estilos de una superficie pueden aplicarse en diferentes grupos de elementos por lo que intentaremos nombrarlos de manera genérica.

Al nombrar las variables podemos asignar un prefijo a cada variable para agruparlas y diferenciarlas del resto de variables --surface-1.

:root {
    --surface-1-background-color: #d6d6d6;
    --surface-1-color: #333333;
    --surface-1-link-color: #503a59;
    --surface-1-link-color-hover: #db5757;
}

blockquote,
.box {
    background-color: var(--surface-1-background-color);
    color: var(--surface-1-color);
}

blockquote a,
.box a {
    color: var(--surface-1-link-color);
}

blockquote a:focus-visible,
blockquote a:hover,
.box a:focus-visible,
.box a:hover {
    color: var(--surface-1-link-color-hover);
}

Normalmente uso una escala numérica para nombrar las superficies surface-1, surface-2 que no representan ninguna jerarquía, simplemente sirve para diferenciarlas, nombrarlas por su aspecto o su "altura visual" puede traer problemas si se añaden o cambian los valores.

@mixins

Si usamos Sass podemos crear @mixins para gestionar cada Surface y aplicarlo donde necesitemos.

@mixin surface-1() {
    background-color: var(--surface-1-background-color);

    p {
        color: var(--surface-1-color);
    }

    a {
        color: var(--surface-1-link-color);
        &:hover,
        &:focus-visible {
            color: var(--surface-1-link-color-hover);
        }
    }
}

blockquote,
form {
    @include surface-1;
}

Clase de utilidad

Partiendo del mismo @mixin podemos crear una clase de utilidad para aplicar directamente en el Html.

.surface-1 {
    @include surface-1;
}

<blockquote class="surface-1">
    <p>Lorem ipsum dolor, sit amet.</p>
</blockquote>

Agrupar estilos siempre es complicado

Cuanto más complejo es el proyecto más complicado es agrupar estilos.

Poner nombre a grupos de estilos ("surfaces", "primitives", "abstracts", etc ...), entender que representa cada uno y saber usarlos no es algo trivial, pero un sistema coherente y organizado es necesario para mantener proyectos a largo plazo.