CSS anidado

Desde 2023 podemos utilizar CSS anidado de forma nativa, lo que permite hacer las hojas de estilo mucho más claras y entendibles. Pero vayamos al pasado para entender la diferencia que hace tener esto a disposición.

Supongamos que tenemos un código CSS del pasado, por ejemplo, el de un botón:

button.redbutton{
  background-color :red;
  padding:5px;
  color:white;
  text-transform: uppercase;
  font-size:9px;
}

button.redbutton:hover{
  background-color:lightcoral;
  color: black;
}

El HTML correspondiente al botón:

<button class="redbutton">
  mi boton
</button>

El código anterior es bastante simple: cuando pasamos el cursor sobre el botón, cambia sus características. Sin embargo, tener código de esta manera en una hoja de estilo muy grande puede ser algo engorroso.

Lo mejor sería tener bloques de código para los elementos. Por ejemplo, este código es para mi botón rojo, por lo tanto, agrupo todo lo relacionado con mi botón rojo. De igual manera podríamos hacer esto para los formularios, cuyos estilos suelen ser mucho más extensos, etc.

Hoy en día tenemos lo que se llama CSS anidado o CSS nesting.

Volvamos a nuestro CSS del botón rojo, pero esta vez hecho con CSS anidado:

button.redbutton{
  background-color :red;
  padding:5px;
  color:white;
  text-transform: uppercase;
  font-size:9px;

  &:hover{
    background-color:lightcoral;
    color: black;
  }
}

Este código es mucho más fácil de seguir. Observa que tenemos el bloque button.redbutton y dentro de este bloque tenemos el bloque &:hover. Esta & hace referencia a button.redbutton.

Esta forma de escribir código CSS la podemos utilizar en conjunto con >, + y otras clases de selectores para hacer hojas de estilo más complejas.

A continuación podemos ver un ejemplo más complejo que le pedía a ChatGPT, así que probablemente no este del todo bien, pero basta para darle una idea de lo que soluciona el utilizar CSS anidado

form {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 5px;

  .form-group {
    margin-bottom: 15px;

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    &.error {
      input {
        border-color: red;
      }

      .error-message {
        color: red;
        font-size: 12px;
      }
    }
  }

  button.submit {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #45a049;
    }
  }
}