Clases de layout

Las clases de layout son clases que se aplican a contenedores que agrupan componentes y solo gestionan el posicionamiento de los componentes en diferentes estados y el responsive.

Para facilitar la comprensión del código podemos nombrar cada tipo de clase (layout, componente) con un prefijo: co- para los componentes la- para las clases de layout.

<header class="la-header co-header">
	...
</header>

En este caso la-header gestiona el posicionamiento y co-header la apariencia del <header>.

.la-header {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
}

.co-header {
  background-color: #eee;
  padding: 1rem;
}

Si usamos BEM podemos asignar una clase de layout a cada componente dentro del <header> para identificarlo en el archivo _la-header.scss y definir su posicionamiento dependiendo del estado o del tamaño del viewport.

<header class="la-header co-header">
	<a class="la-header__logo co-header-logo"> ... </a>
	<nav class="la-header__nav co-header-nav">...</nav>
	<button class="la-header__login co-header-login">...</button>
	<button class="la-header__burguer co-header-burguer">...</button>
</header>

.la-header {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  
  &__nav {
    @media ( max-width: $mediaquerie-mobile - 1 ) {
      display: none;
    }
    @media ( max-width: $mediaquerie - 1 ) {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }
  
  &__login {
    justify-self: end;
  }
  
  &__burguer {
    @media ( min-width: $mediaquerie-mobile ) {
      display: none;
    }
  }
}

Quizás en casos como el del ejemplo no sea necesario usar esta técnica, pero en contenedores complejos con diferentes estados resulta muy cómodo gestionar el posicionamiento de los componentes en un solo documento _la-header.scss.

Demo en codepen