¿Por qué usar las clases o los IDs en los elementos HTML?

El lector Nicolás escribió:

Veo con frecuencia las especificaciones “id” y “class” para los elementos <body> y <html>. Tengo la curiosidad de ¿por qué se debe hacerse así? Si los elementos son únicos para cualquier de esos elementos, entonces ¿por qué no se especifica el body o HTML en el CSS?

Creo que lo que Nicolás está preguntando es ¿por qué hacer esto?:

cap1

 

 

 

Cuando usted podría hacer:

cap2

… y pase el nombre de la clase. Después de todo, no se garantiza que sea sólo un elemento <html>, ¿verdad?

Veo cual es el punto de vista Nicolás. Si vemos el código fuente de una página de forma aislada, podemos ver cómo cualquier clase o ID en el elemento <html> parece superflua. El hecho es que estas clases a nivel superior pueden ser de gran utilidad. Vamos a revisar la teoría y ver algunos ejemplos reales.

Muchas páginas, pocos archivos CSS

La idea del CSS es la de abstraer el diseño lejos del lenguaje de marcado. Un centenar de páginas en un sitio y todos puedan utilizar el mismo archivo CSS. Esto es eficiente por muchas razones, una de ellas es que los cambios en el diseño suceden en un solo lugar, en vez de cien. Una clase de nivel superior puede servir para identificar la página que se está viendo actualmente y por lo tanto aplicar un estilo a una página diferente que aún no se ha cargado.

Multiple-HTML
Multiple-HTML

Páginas diferentes, mismo archivo CSS, diseños diferentes. Y debido a que esto está sucediendo en el elemento de más alto nivel, se puede controlar el diseño de páginas enteras a través de una única clase gancho.

WordPress

El poderoso sitio de WordPress utiliza temas para mostrar las páginas. Todas las páginas en el sitio se construyen a partir de un tema activo. Este tema tiene un archivo, que se llama header.php que  carga el encabezado de todas las páginas, como el <doctype>, el <head> y abre las etiquetas <body> y <HTML>. WordPress tiene una función llamada body_class () que hace salir una gran cantidad de clases que son específicos para el tipo de página que se está cargando. La mayoría de los temas tienen una etiqueta de apertura en el <body> de esta manera:

cap3

En una página de destino único, la salida podría ser como esto:


En la página principal, la salida podría ser la siguiente:

Ahora hay un montón de ganchos que se pueden utilizar en el archivo CSS con un estilo único basado en el tipo de página. Por ejemplo:


No estoy del todo seguro de por qué WordPress llama “body_class”, pero, así puedes (y suele ser útil) colocar el estilo directamente en el elemento HTML. Así como un FYI, a pesar de todo sólo puede mover la función hasta el elemento HTML.

Modernizr

Modernizr es una librería JavaScript que también agrega las clases de nivel superior. Se les agrega dinámicamente al elemento HTML cuando se carga y se ejecuta. Las clases son un símbolo de las capacidades de los navegadores actuales. Así, mientras WordPress aplica clases que se pueden usar para hacer diferentes páginas con aspecto diferente, modernizr aplica clases que pueden ser utilizadas para dar a la misma página un aspecto diferente, dependiendo de las capacidades del navegador.

Esto es lo que un elemento HTML puede presentar con Modernizr:


Así que ahora es posible que tengas estilos CSS diferentes dependiendo de la capacidad del navegador:

Traducción: Jazdian

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s