La mejor manera de implementar un “contenedor” en CSS | Programar Plus

A veces, el primer fragmento de HTML que escribimos en un documento nuevo es un elemento que envuelve todo lo demás en la página. El término envoltorio es común para eso. Le damos una clase, y esa clase es responsable de encapsular todos los elementos visuales en la página.

Siempre me ha costado encontrar la mejor manera de implementarlo. Encontré un hilo relacionado en StackOverflow que tiene más de 250,000 visitas, ¡así que obviamente no soy el único que se pregunta! Resumiré mis últimos pensamientos en este artículo.

Antes de sumergirnos en él, examinemos primero la diferencia entre el “envoltorio” y el “contenedor”.

“Envoltorio” frente a “Contenedor”

Creo que hay una diferencia entre los elementos envoltorio y contenedor.

En los lenguajes de programación, la palabra contenedor se usa generalmente para estructuras que pueden contener más de un elemento. Un contenedor, por otro lado, es algo que envuelve un solo objeto para brindarle más funcionalidad e interfaz.

Entonces, en mi opinión, tiene sentido tener dos nombres diferentes porque tienen diferentes funciones.

Hablando del envoltorio, es común pensar en un <div> que contiene todo el resto del HTML del documento. Estoy seguro de que muchos de nosotros hemos vivido una época en la que configuramos eso en 960 px de ancho y alineamos al centro todo nuestro contenido principal. Los envoltorios también se utilizan para cosas como aplicar un pie de página adhesivo.

El contenedor, por otro lado, generalmente tiene la intención de otro tipo de contención. Uno que a veces es necesario para implementar un comportamiento o estilo de múltiples componentes. Sirve para agrupar elementos tanto semántica como visualmente. Como ejemplo, Bootstrap tiene “clases de contenedor” que albergan su sistema de cuadrícula o contienen varios otros componentes.

Los términos envoltorio y contenedor también pueden significar lo mismo según el desarrollador y lo que pretendan. También puede haber otras convenciones, por lo que el mejor consejo suele ser implementar lo que tenga más sentido para usted. Pero recuerde, la denominación es una de las partes más fundamentales e importantes de las actividades de los desarrolladores. Las convenciones de nomenclatura hacen que nuestro código sea más legible y predecible. ¡Elija cuidadosamente!

A continuación, se muestra un ejemplo de un contenedor de página general:

/**
 * 1. Centers the content. Yes, it's a bit opinionated.
 * 2. See the "width vs max-width" section
 * 3. See the "Additional Padding" section
 */
.wrapper {
  margin-right: auto; /* 1 */
  margin-left:  auto; /* 1 */

  max-width: 960px; /* 2 */

  padding-right: 10px; /* 3 */
  padding-left:  10px; /* 3 */
}

ancho vs ancho máximo

Establecer el width de un elemento a nivel de bloque evitará que se extienda hasta los bordes de su contenedor (bueno para cosas como longitudes de línea legibles). Por lo tanto, el elemento contenedor ocupará el ancho especificado. El problema ocurre cuando la ventana del navegador es más estrecha que el ancho específico del contenedor. Eso activará una barra de desplazamiento horizontal, lo que casi siempre es indeseable.

Utilizando max-width en cambio, en esta situación, es mejor para ventanas de navegador más estrechas. Esto es importante a la hora de hacer que un sitio se pueda utilizar en dispositivos pequeños. Aquí hay un buen ejemplo que muestra el problema.

Vea los trucos de CSS del lápiz: la mejor manera de implementar un contenedor de CSS por Kaloyan Kosev (@superKalo) en CodePen.

En términos de capacidad de respuesta, max-width es la mejor opción!

Acolchado adicional

He visto a muchos desarrolladores olvidar un caso de borde en particular. Digamos que tenemos un envoltorio con max-width establecido en 980px. El caso de borde aparece cuando el ancho de la pantalla del dispositivo del usuario es exactamente 980px. Entonces, el contenido se pegará exactamente a los bordes de la pantalla sin dejar espacio para respirar.

El problema de “no queda espacio para respirar”.

Por lo general, queremos un poco de relleno en los bordes. Es por eso que si necesito implementar un contenedor con un ancho total de 980px, lo haría así:

.wrapper {
  max-width: 960px; /* 20px smaller, to fit the paddings on the sides */

  padding-right: 10px;
  padding-left: 10px;

  /* ...  */
}

Por lo tanto, es por eso que agregar padding-left y padding-right a su envoltorio podría ser una buena idea, especialmente en dispositivos móviles.

O considere usar el tamaño de la caja para que el relleno no cambie el ancho general en absoluto.

Qué elemento HTML elegir

Una envoltura no tiene significado semántico. Simplemente contiene todos los elementos visuales y el contenido de la página. Es solo un contenedor genérico. En términos de semántica, <div> es la mejor opción. El <div> tampoco tiene un significado semántico y es solo un contenedor genérico.

Uno podría preguntarse si tal vez un <section> elemento podría ajustarse a este propósito. Sin embargo, esto es lo que dice la especificación W3C:

El <section> elemento no es un elemento contenedor genérico. Cuando un elemento es necesario solo para fines de estilo o como conveniencia para la creación de scripts, se recomienda a los autores que usen el elemento div en su lugar. Una regla general es que el elemento de sección es apropiado solo si el contenido del elemento se enumeraría explícitamente en el esquema del documento.

El <section> elemento lleva su propia semántica. Representa una agrupación temática de contenido. El tema de cada sección debe identificarse, normalmente mediante la inclusión de un encabezado (elemento h1-h6) como elemento secundario del elemento de la sección.

Ejemplos de secciones serían los capítulos, las distintas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web se puede dividir en secciones para una introducción, noticias e información de contacto.

Puede que no parezca muy obvio a primera vista, ¡pero sí! El viejo llano <div> encaja mejor para una envoltura!

Usar la etiqueta versus usar un

adicional

Vale la pena mencionar que habrá algunos casos en los que se podría usar el <body> elemento como envoltorio. La siguiente implementación funcionará perfectamente bien:

body {
  margin-right: auto;
  margin-left:  auto;
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
}

Y resultará en un elemento menos en su marcado porque puede eliminar esa envoltura innecesaria <div> Por aquí.

Sin embargo, no recomendaría esto, debido a la flexibilidad y resistencia a los cambios. Imagínese si en una etapa posterior del proyecto ocurre alguno de estos escenarios:

  • Debe aplicar un pie de página para que se “pegue” al final del documento (parte inferior de la ventana gráfica cuando el documento es corto). Incluso si puede usar la forma más moderna de hacerlo, con flexbox, necesita un contenedor adicional <div>.
  • Necesitas configurar el background-color de toda la página. Normalmente, sea cual sea el fondo que establezca en el <body> se comportará como si estuviera configurado en el <html> elemento en caso de que no tenga antecedentes. Solo una cosa extraña en CSS. Pero si tu <html> El elemento ya tiene un fondo, y configura el cuerpo en otra cosa, y el cuerpo tiene algún tipo de restricción de espacio, los fondos se volverán raros. Es una cosa complicada.

Llegaría a la conclusión de que sigue siendo una buena práctica tener un <div> para implementar un contenedor CSS. De esta manera, si los requisitos de las especificaciones cambian más adelante, no es necesario que agregue el contenedor más adelante y tenga que lidiar con el movimiento de los estilos. Después de todo, solo estamos hablando de un elemento DOM adicional.