TheLazy.Dev
Portfolio GitHub

Blog

css |layers |webdev |layer

CSS @layer: domina el poder de las capas

joanperamas

Joan Peramás Ceras

Posted on February 23, 2024

CSS @layer: domina el poder de las capas

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
@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 */
}
Enter fullscreen mode Exit fullscreen mode

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.

@layer {
  /* Reglas CSS para la capa anónima */
}
Enter fullscreen mode Exit fullscreen mode

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.

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

@layer main {
  /* Reglas CSS para la capa "main" */
}
Enter fullscreen mode Exit fullscreen mode

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.

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

  @layer navigation {
    /* Reglas CSS para la navegación dentro del encabezado */
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

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

@layer content {
  order: 1;
  /* Reglas CSS para la capa de contenido */
}
Enter fullscreen mode Exit fullscreen mode

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.

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

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.

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

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

styles.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;
      }
    }

  }
Enter fullscreen mode Exit fullscreen mode

script.js:

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);
Enter fullscreen mode Exit fullscreen mode

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

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:

💖 💪 🙅 🚩
joanperamas
Joan Peramás Ceras

Posted on February 23, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS @layer: domina el poder de las capas
css CSS @layer: domina el poder de las capas

February 23, 2024