¿Por qué usar Clases o ID en el elemento HTML? | Programar Plus

El lector Nicolás escribe en:

Con frecuencia veo especificaciones de ID y clase para <body> y <html> elementos. Tengo curiosidad en cuanto a por qué uno haría esto? Si es único para cualquiera de los elementos, ¿por qué no especificar cuerpo o html en el CSS?

Creo que lo que Nicolás está preguntando es por qué harías esto:

<html class="happyNewYear">
.happyNewYear { background: url(/images/fireworks.jpg); }

Cuando podrías simplemente hacer:

html { background: url(/images/fireworks.jpg); }

… y omita el nombre de la clase. Después de todo, se garantiza que solo habrá uno. <html> elemento, ¿verdad?

Veo el punto de Nicolás. Si ve la fuente y mira una página de forma aislada, puedo ver cómo cualquier clase o ID en el <html> elemento parece superfluo. El hecho es que estas clases de alto nivel pueden ser extremadamente útiles. Repasemos la teoría y veamos algunos ejemplos de palabras reales.

Muchas páginas, pocos archivos CSS

La idea de CSS es abstraer el diseño del marcado. Cien páginas en un sitio pueden usar el mismo archivo CSS exacto. Esto es eficiente por muchas razones, una de las cuales es que los cambios en el diseño ocurren en un solo lugar, en lugar de cien. Una clase de nivel superior puede servir para identificar qué página se está viendo actualmente y, por lo tanto, aplicar un estilo que una página diferente no puede obtener.

Diferentes páginas, mismo archivo CSS, diferentes diseños. Y debido a que esto está sucediendo en el elemento de nivel más alto posible, puede controlar todo el diseño de las páginas a través de un solo gancho de clase.

WordPress

Un sitio impulsado por WordPress utiliza temas para mostrar páginas. Todas las páginas del sitio se crean a partir del tema activo. Este tema tiene un archivo llamado header.php que genera la parte superior de todas las páginas, como el tipo de documento, el encabezado y el cuerpo de apertura y las etiquetas html. WordPress tiene una función llamada body_class() que genera un montón de clases que son específicas del tipo de página que se está cargando. La mayoría de los temas tienen una etiqueta de cuerpo de apertura como esta:

<body <?php body_class(); ?>>

En una sola página de publicación, el resultado podría ser así:

<body class="single single-post postid-8212 logged-in">

En la página de inicio, el resultado podría ser este:

<body class="home blog">

Ahora hay un montón de ganchos que puede usar en el archivo CSS para diseñar las cosas de manera única según el tipo de página. Por ejemplo:

.single h2 {
   font-size: 150%; /* Fonts bigger on single post pages */
}
.home aside {
   width: 100%;  /* Sidebar kicked to bottom of page on homepage */
}

No estoy completamente seguro de por qué WordPress lo llama “body_class”, ya que puede (y a menudo es útil) diseñar el elemento HTML directamente. Solo como un FYI, absolutamente puede simplemente mover la función al elemento HTML.

modernizar

Modernizr es una biblioteca de JavaScript que también agrega clases de nivel superior. Los agrega dinámicamente al elemento html cuando se carga y se ejecuta. Las clases son simbólicas de cuáles son las capacidades actuales de los navegadores. Entonces, mientras que WordPress aplica clases que puede usar para hacer que diferentes páginas se vean diferentes, Modernizer aplica clases que puede usar para hacer que la misma página se vea diferente, según las capacidades del navegador.

Así es como se vería un elemento html después de Modernizr:

<html class="js flexbox canvas canvastext no-webgl no-touch 
  geolocation postmessage websqldatabase no-indexeddb
  hashchange history draganddrop websockets rgba hsla 
  multiplebgs backgroundsize borderimage borderradius 
  boxshadow textshadow opacity cssanimations csscolumns 
  cssgradients cssreflections csstransforms no-csstransforms3d 
  csstransitions fontface video audio localstorage sessionstorage 
  webworkers applicationcache svg inlinesvg smil svgclippaths">

Entonces, ahora puede tener CSS que diseñe las cosas de manera diferente según la capacidad:

section {
  background: url(boring-fallback.jpg);
}
.multiplebgs section {
  background:
    url(logo.png) top left no-repeat,
    url(texture.jpg),
    url(top-edge.png) top left repeat-y;
}

¿Algo más?

Tengo un artículo anterior que cubre esta misma idea y el consejo clásico de usar esta idea para resaltar la navegación actual. Compruébalo para ver otros consejos.

Comparta si tiene otros casos de uso para usar clases de nivel superior.

(Visited 14 times, 1 visits today)