CSS @layer: domina el poder de las capas
Tags: css, layers, webdev, layer
Published: 2024-02-23 01:15:27

Olvídate del código CSS caótico y fragmentado. Con la propiedad `@layer` puedes organizar tu código CSS de manera intuitiva.

## ¿Qué son las capas CSS?

Imagina las capas CSS como contenedores independientes que encapsulan estilos específicos. Cada capa posee su propio contexto, aislando sus reglas de las demás. Adiós a las batallas con la especificidad con un código CSS organizado y limpio.

## ¿Cómo usar la propiedad `@layer`?

Crear capas es simple. Define un nombre único para cada capa y establece su orden de aparición. A continuación, agrupa las reglas CSS dentro de cada capa.

**Ejemplo práctico:**

Imagina un sitio web con tres secciones: encabezado, contenido principal y pie de página. Con las capas CSS, puedes organizar el código de forma intuitiva:

```css
CSS
@layer header {
  /* Estilos específicos para el encabezado */
}

@layer main {
  /* Estilos específicos para el contenido principal */
}

@layer footer {
  /* Estilos específicos para el pie de página */
}
```

**Ejemplos de Temas Intercambiables con Capas CSS:**

## Formas de crear capas en CSS

Veremos las diferentes formas de crear capas en CSS, desde capas anónimas hasta capas con nombre, anidadas, con orden y reglas condicionales. También como elegir la forma adecuada para cada caso y cómo aprovechar las capas para mejorar tu workflow y la experiencia de usuario.

### 1. Capas anónimas:

Se crean utilizando la regla `@layer`. No tienen nombre, por lo que no se puede hacer referencia a ellas posteriormente. **_Útiles para agrupar reglas CSS relacionadas sin necesidad de nombrarlas_**.

```css
@layer {
  /* Reglas CSS para la capa anónima */
}
```

### 2. Capas con nombre:

Se crean utilizando la regla `@layer` con un nombre. Se puede hacer referencia a ellas posteriormente para añadir más código CSS o reordenarlas. **_Útiles para organizar y gestionar capas de forma más precisa_**.

```css
@layer header {
  /* Reglas CSS para la capa "header" */
}

@layer main {
  /* Reglas CSS para la capa "main" */
}
```

### 3. Capas anidadas:

Se pueden crear capas dentro de otras capas. Las capas anidadas heredan el contexto de la capa padre. **_Útiles para organizar estilos específicos dentro de una sección o componente_**.

```css
@layer header {
  @layer logo {
    /* Reglas CSS para el logo dentro del encabezado */
  }

  @layer navigation {
    /* Reglas CSS para la navegación dentro del encabezado */
  }
}
```

### 4. Capas con orden:

Se puede definir el orden de las capas utilizando la propiedad order. Las capas con un valor de order mayor se superponen a las capas con un valor menor. **_Útil para controlar la superposición de elementos_**.

```css
@layer background {
  order: 0;
  /* Reglas CSS para la capa de fondo */
}

@layer content {
  order: 1;
  /* Reglas CSS para la capa de contenido */
}
```

### 5. Capas con reglas condicionales:

Se pueden crear capas con reglas condicionales utilizando la propiedad `@media`. Las capas solo se aplican si se cumplen las condiciones especificadas. **_Útil para mostrar diferentes estilos en diferentes dispositivos o tamaños de pantalla_**.

```css
@media (min-width: 768px) {
  @layer sidebar {
    /* Reglas CSS para la capa "sidebar" en pantallas grandes */
  }
}
```

### 6. Importaciones en capas:

La regla `@import` te permite importar reglas CSS desde otro archivo. **_Esto puede ser útil para organizar tu código en archivos separados o para compartir capas con otros proyectos_**.

```css
@import url("styles/header.css") layer(navigation);
/* Reglas CSS de la capa layer(navigation) importada de styles/header.css*/
```

Te permite importar un archivo CSS y encapsularlo en una capa virtual dentro de tu código. Las capas CSS te permiten hacer esto, y no solo eso, sino que también te dan control sobre la especificidad de las reglas dentro de cada capa.

## Ejemplo práctico usando CSS, HTML y JS:

El objetivo es crear de este ejemplo es crear un sitio web con tema claro/oscuro usando capas CSS.

**Estructura:**

- index.html: Archivo HTML principal.
- styles.css: Archivo CSS principal que define las capas y los estilos.
- script.js: Archivo JavaScript que controla el cambio de tema.

**index.html:**

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de Tema Claro/Oscuro con Capas CSS</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <header>
    <h1>Título del sitio web</h1>
    <select id="theme-selector">
      <option value="light">Tema Claro</option>
      <option value="dark">Tema Oscuro</option>
    </select>
  </header>
  <main>
    <p>Contenido principal del <a href="#">sitio web</a>.</p>
  </main>
  <footer>
    <p>Copyright &copy; 2024</p>
  </footer>
  <script src="./script.js"></script>
</body>
</html>
```

**styles.css:**

```css
/* Capa base */
@layer base {
    body {
      font-family: sans-serif;
      font-size: 16px;
      margin: 5rem;
    }
  
    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  
    p {
      line-height: 1.5;
    }
}
  
  /* Tema Claro */
  @layer light {
    .light {
      background-color: #fff;
      color: #333;

      a {
        color: #007bff;
      }
    }
  
  }
  
  /* Tema Oscuro */
  @layer dark {
    .dark {
      background-color: #212529;
      color: #fff;

      a {
        color: #c3cd6d;
      }
    }
  
  }
```

**script.js:**

```javascript
const bodyEl = document.querySelector('body');
const themeSelector = document.getElementById('theme-selector');

function changeTheme(theme) {
  bodyEl.classList.remove('light', 'dark');
  bodyEl.classList.add(theme);
}

themeSelector.addEventListener('change', (e) => {
  changeTheme(e.target.value);
});

// Tema inicial
changeTheme(themeSelector.value);
```

{% codepen https://codepen.io/joanperamas/pen/PoLvMOe %}

**Explicación:**

El archivo **index.html** define la estructura básica del sitio web con un selector de tema.

El archivo **styles.css** define dos capas: light y dark con estilos específicos para cada tema.

El archivo **script.js** controla el cambio de tema al seleccionar una opción en el selector.

En este ejemplo, se utilizan capas CSS para:

- Separar los estilos del tema claro y oscuro.
- Facilitar el cambio de tema sin necesidad de recargar la página.
- Mantener el código organizado y legible.
- Este es un ejemplo simple que puede ser adaptado y ampliado para crear sitios web más complejos con diferentes temas y estilos.

## Compatibilidad del Navegador:

CSS `@layer` es una nueva regla que permite organizar estilos en capas virtuales, mejorando la organización y el control de la especificidad. Aunque ofrece un gran potencial, es importante conocer su compatibilidad actual con los navegadores.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/050dntyhtdi5eu1blpl7.png)

## Conclusión:

Las capas CSS son una herramienta poderosa que te permite llevar tu código al siguiente nivel. Experimenta una mejor organización, un mantenimiento más sencillo y una flexibilidad sin precedentes.

Beneficios de usar capas CSS para temas intercambiables:

**Modularidad:** Los temas se encapsulan en capas independientes, facilitando su mantenimiento y actualización.

**Flexibilidad:** Puedes crear una gran variedad de temas con diferentes estilos y características.

**Personalización:** Permite a los usuarios adaptar la apariencia del sitio web a sus preferencias.

**Rendimiento:** Reduce la carga de CSS al cargar solo el tema seleccionado.

**Considerar navegadores antiguos:** Si tu proyecto necesita compatibilidad con navegadores antiguos, es recomendable evitar el uso de `@layer`.

**Comprobar la compatibilidad:** Antes de usar `@layer` en producción, es importante verificar la compatibilidad con los navegadores que tu público objetivo utiliza.

### Recursos adicionales:

- CSS Cascade Layers: ¡Sistema de capas en CSS!: [Sistema de capas en CSS](https://www.youtube.com/watch?v=uskKA8vzfsA)
- MSN Web Docs: @layer [css layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
- Lenguajecss.com: CSS Cascade Layers: [CSS Cascade Layers](https://lenguajecss.com/css/reglas-css/la-regla-layer/)
- caniuse.com: @layer [caniuse layer](https://caniuse.com/?search=%40layer)
- New in Chrome 99: CSS Cascade Layers, Show Picker, and more! [New in Chrome 99: CSS Cascade Layers, Show Picker, and more!](https://www.youtube.com/watch?v=h3mzFraS8CA)