¡Las identificaciones y las clases son “ganchos”!
Necesitamos formas de describir el contenido en un documento HTML / XHTML. Los elementos básicos como <h1>, <p>, y <ul> a menudo hará el trabajo, pero nuestro conjunto básico de etiquetas no cubre todos los tipos posibles de elementos de página o opciones de diseño. Para ello, necesitamos ID y clases. Por ejemplo <ul id="nav">, esto nos dará la oportunidad de orientar esta lista desordenada específicamente, de modo que podamos manipularla únicamente a otras listas desordenadas en nuestra página. O podríamos tener una sección en nuestra página que no tiene una etiqueta relevante para indicarla, por ejemplo, un pie de página, donde podríamos hacer algo como esto: <div id="footer">. O tal vez tenemos casillas en nuestra barra lateral para mantener el contenido separado de alguna manera: <div class="sidebar-box">.
Estos ID y clases son los “ganchos” que necesitamos construir en el marcado para tenerlos en nuestras manos. CSS obviamente los necesita para que podamos construir selectores y hacer nuestro estilo, pero otros lenguajes web como JavaScript también dependen de ellos. Pero, ¿cuál es la diferencia entre ellos?
Las identificaciones son únicas
- Cada elemento puede tener solo un ID
- Cada página puede tener solo un elemento con ese ID
Cuando estaba aprendiendo estas cosas por primera vez, escuché una y otra vez que solo debes usar las identificaciones una vez, pero que puedes usar las clases una y otra vez. Básicamente me entraba por un oído y me salía por el otro porque me sonaba más como una buena “regla empírica” que como algo extremadamente importante. Si eres una persona puramente HTML / CSS, esta actitud puede persistir porque para ti, realmente no parecen hacer nada diferente.
Aquí hay uno: su código no pasará la validación si usa el mismo ID en más de un elemento. La validación debe ser importante para todos nosotros, por lo que solo es importante. A medida que avancemos, repasaremos más razones de la singularidad.
Las clases no son únicas
- Puede utilizar la misma clase en varios elementos.
- Puede utilizar varias clases en el mismo elemento.
Cualquier información de estilo que deba aplicarse a varios objetos en una página debe hacerse con una clase. Tomemos, por ejemplo, una página con varios “widgets”:
<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>Ahora puede usar el nombre de clase “widget” como su gancho para aplicar el mismo conjunto de estilo a cada uno de estos. Pero, ¿qué sucede si necesita que uno de ellos sea más grande que el otro, pero aún así comparte todos los demás atributos? Clases lo tiene cubierto allí, ya que puede solicitar más de una clase:
<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>No es necesario crear un nuevo nombre de clase aquí, solo aplique una nueva clase directamente en el atributo de clase. Estas clases están delimitadas por espacios y la mayoría de los navegadores admiten cualquier número de ellas (en realidad, son más como miles, pero mucho más de lo que necesitará).
No hay valores predeterminados del navegador para ningún ID o clase.
Agregar un nombre de clase o ID a un elemento no afecta a ese elemento de forma predeterminada.
Esto es algo que me atrapó como principiante. Está trabajando en un sitio y se da cuenta de que la aplicación de un nombre de clase en particular soluciona un problema que tiene. Luego saltas a otro sitio con el mismo problema e intentas arreglarlo con el mismo nombre de clase pensando que el nombre de la clase en sí tiene alguna propiedad mágica solo para descubrir que no funcionó.
Las clases y los ID no tienen ninguna información de estilo para ellos por sí mismos. Requieren CSS para apuntarlos y aplicar estilo.
Códigos de barras y números de serie
Quizás una buena analogía aquí son los códigos de barras y los números de serie. Lleva un iPod a una tienda. En el empaque habrá un código de barras. Esto le dice a la tienda cuál es el producto, por lo que cuando se escanea, el sistema sabe exactamente cuál es el producto y cuánto cuesta. Incluso podría saber de qué color es o dónde se guardó en la tienda. Todos los iPod de este mismo tipo tienen exactamente el mismo código de barras.
El iPod también tendrá un número de serie que es absolutamente único para cualquier otro iPod (o cualquier otro dispositivo) en el mundo. El número de serie no conoce el precio. Podría, pero para la tienda, esta no sería una forma muy eficiente de almacenar y usar esos datos. Es mucho más fácil usar el código de barras, de modo que, por ejemplo, si el precio cambia, puede cambiar el precio de ese código de barras y no de cada número de serie individual en su sistema.
Esto es muy parecido a las identificaciones y las clases. La información que es reutilizable debe guardarse en una clase y la información que es totalmente única debe guardarse en una identificación.
Los ID tienen una funcionalidad de navegador especial
Las clases no tienen habilidades especiales en el navegador, pero los ID tienen un truco muy importante bajo la manga. Este es el “valor hash” en la URL. Si tiene una URL como http: //yourdomain.com#comments, el navegador intentará ubicar el elemento con un ID de “comentarios” y automáticamente se desplazará por la página para mostrar ese elemento. Es importante tener en cuenta aquí que el navegador desplazará cualquier elemento que necesite para mostrar ese elemento, por lo que si hizo algo especial como un área DIV desplazable dentro de su cuerpo normal, ese div también se desplazará.
Esta es una razón importante aquí por la que es importante que los ID sean absolutamente únicos. ¡Entonces su navegador sabe dónde desplazarse!
Los elementos pueden tener AMBOS
No hay nada que le impida tener tanto una ID como una Clase en un solo elemento. De hecho, suele ser una muy buena idea. Tomemos, por ejemplo, el marcado predeterminado para un elemento de la lista de comentarios de WordPress:
<li id="comment-27299" class="item">Tiene una clase aplicada que es posible que desee para diseñar todos los comentarios en la página, pero también tiene un valor de ID único (generado dinámicamente por WordPress, bastante bien). Este valor de ID es útil para la vinculación directa. Ahora puedo vincular directamente a un comentario en particular en una página en particular fácilmente.
A CSS no le importa
Con respecto a CSS, no hay nada que pueda hacer con una ID que no pueda hacer con una Clase y viceversa. Recuerdo que cuando estaba aprendiendo CSS por primera vez y tenía un problema, a veces intentaba solucionarlo cambiando estos valores. No. A CSS no le importa.
JavaScript se preocupa
La gente de JavaScript probablemente ya esté más en sintonía con las diferencias entre clases e ID. JavaScript depende de que solo haya un elemento de página con un determinado id, o de lo contrario el de uso común getElementById la función no sería confiable. Para aquellos familiarizados con jQuery, saben lo fácil que es agregar y eliminar clases a los elementos de la página. Es una función nativa e incorporada de jQuery. Observe cómo no existe tal función para los ID. No es responsabilidad de JavaScript manipular estos valores, causaría más problemas de los que valdría la pena.
Si no los necesita, no los use
Como puede ver, las clases y las identificaciones son muy importantes y confiamos en ellas todos los días para hacer el estilo y la manipulación de la página que necesitamos hacer. Sin embargo, debe usarlos de manera juiciosa y semántica.
Esto significa evitar cosas como esta:
<a href="https://css-tricks.com" class="link">CSS-Tricks.com</a>Ya sabemos que este elemento es un enlace, ¡es un elemento de anclaje! Aquí no es necesario aplicar una clase en particular, ya que ya podemos aplicar el estilo a través de su etiqueta.
También evite esto:
<div id="right-col">El ID se usa de manera apropiada aquí, ya que es probable que la página solo tenga una columna a la derecha, pero el nombre es inapropiado. Intente describir el contexto del elemento, no dónde está ni cómo se ve. Un ID aquí de “barra lateral” sería más apropiado.
Los microformatos son solo nombres de clases específicos
¿Crees que los microformatos están por encima de tu cabeza? ¡No lo son! Son solo marcas regulares que utilizan nombres de clases estandarizados para la información que contienen. Consulte una vCard estándar:
<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">[email protected]</span>
</div>
</div>