Las hojas de estilo en cascada (CSS) le permiten definir la apariencia de un elemento al engancharse en los atributos que aplica a ese elemento. Estos atributos pueden ser una ID o una clase y, como todos los atributos, agregan información útil a los elementos a los que están adjuntos.
Según el atributo que agregue a un elemento, puede escribir un selector de CSS para aplicar los estilos visuales necesarios que se necesitan para lograr la apariencia de ese elemento y el sitio web en su conjunto.
Si bien los ID o las clases funcionan con el fin de enlazarlos con las reglas de CSS, los métodos modernos de diseño web favorecen a las clases sobre los ID, en parte, porque son menos específicos y más fáciles de utilizar. Sí, todavía encontrará muchos sitios que usan identificaciones, pero esos atributos se aplican con más moderación que en el pasado, mientras que las clases se han apoderado de las páginas web modernas.
¿Clases individuales o múltiples en CSS?
En la mayoría de los casos, asignaría un único atributo de clase a un elemento, pero en realidad no está limitado a una sola clase de la forma en que lo hace con los ID. Si bien un elemento solo puede tener un único atributo de ID, absolutamente puede dar varias clases a un elemento y, en algunos casos, hacerlo hará que su página sea más fácil de diseñar y mucho más flexible.
Si necesita asignar varias clases a un elemento, puede agregar las clases adicionales y simplemente separarlas con un espacio en su atributo.
Por ejemplo, este párrafo tiene tres clases:
Este sería el texto del párrafo.
Esto establece las siguientes tres clases en la etiqueta de párrafo:
- Pullquote
- Destacados
- Izquierda
Observe los espacios entre cada uno de estos valores de clase. Esos espacios es lo que los configura como clases diferentes e individuales. Esta es también la razón por la que los nombres de clase no pueden tener espacios en ellos, porque al hacerlo los establecería como clases separadas. Por ejemplo, si usó "pullquote-feature-left" sin un espacio, sería un valor de clase, pero el ejemplo anterior, donde estas tres palabras se separan con un espacio, las establece como valores individuales. Es importante comprender este concepto al decidir qué valores de clase usar en sus páginas web.
Una vez que tenga los valores de clase en HTML, puede asignar estos como clases en su CSS y aplicar los estilos que desea agregar. Por ejemplo.
.pullquote {…}.featured {…}p.left {…}
En estos ejemplos, los pares de valores y declaraciones de CSS estarían dentro de las llaves, que es como esos estilos se aplicarían al selector apropiado.
Si establece una clase para un elemento específico (por ejemplo,p.left), todavía puedes usarlo como parte de una lista de clases; sin embargo, tenga en cuenta que solo afectará a aquellos elementos que se especifican en el CSS. En otras palabras, la p.left el estilo solo se aplicará a los párrafos con esta clase, ya que su selector está diciendo que se aplique a "párrafos con un valor de clase de 'izquierda'". Por el contrario, los otros dos selectores en el ejemplo no especifican un elemento determinado, por lo que se aplicarían a cualquier elemento que use esos valores de clase.
Ventajas de las clases múltiples
Múltiples clases pueden hacer que sea más fácil agregar efectos especiales a los elementos sin tener que crear un estilo completamente nuevo para ese elemento.
Por ejemplo, es posible que desee tener la capacidad de flotar elementos a la izquierda o la derecha rápidamente. Puedes escribir dos clases
izquierda y
Correcto con tan solo
flotador izquierdo; y
flotar derecho; en ellos. Luego, cuando tengas un elemento que necesites para flotar a la izquierda, simplemente agregarás la clase "left" a su lista de clases.
Sin embargo, hay una línea muy fina para caminar aquí. Recuerda que los estándares web dictan la separación de estilo y estructura. La estructura se maneja a través de HTML, mientras que el estilo está en CSS. Si su documento HTML está lleno de elementos que tienen nombres de clase como "rojo" o "izquierda", que son nombres que dictan el aspecto de los elementos en lugar de lo que son, está cruzando esa línea entre la estructura y el estilo. Trato de limitar los nombres de mis clases no semánticas tanto como sea posible por este motivo.
Clases múltiples, semántica y JavaScript
Otra ventaja de usar varias clases es que le brinda muchas más posibilidades de interactividad.
Puede aplicar nuevas clases a elementos existentes utilizando JavaScript sin eliminar ninguna de las clases iniciales. También puedes usar clases para definir la semántica de un elemento. Esto significa que puede agregar clases adicionales para definir qué significa ese elemento semánticamente. Así es como funcionan los microformatos.
Desventajas de las clases múltiples
La mayor desventaja de usar múltiples clases en sus elementos es que puede hacer que sean un poco difíciles de manejar y controlar con el tiempo. Puede resultar difícil determinar qué estilos están afectando a un elemento y si algún guión lo está afectando. Muchos de los marcos disponibles en la actualidad, como Bootstrap, hacen un uso intensivo de elementos con varias clases. Ese código puede salirse de control y es difícil trabajar con él rápidamente si no tiene cuidado.
Cuando usa varias clases, también corre el riesgo de que el estilo de una clase invalide el estilo de otra, incluso si no tenía la intención de hacerlo. Esto puede hacer que sea difícil entender por qué sus estilos no se aplican, incluso cuando parece que deberían. Debe ser consciente de la especificidad, incluso con los atributos aplicados a ese elemento.
Al usar una herramienta como las herramientas para webmasters en Google Chrome, puede ver más fácilmente cómo sus clases afectan sus estilos y evitar este problema de estilos y atributos en conflicto.
