Las Hojas de Estilo en Cascada (CSS) le permiten definir la apariencia de un elemento enganchándose a los atributos que aplica a ese elemento. Estos atributos pueden ser ya sea un ID o una clase y, como todos los atributos, añaden información útil a los elementos a los que están adjuntos.
Dependiendo del atributo que añada a un elemento, puede escribir un selector CSS para aplicar los estilos visuales necesarios para lograr la apariencia y el aspecto de ese elemento y del sitio web en su conjunto.
Mientras que las identificaciones o clases funcionan con el propósito de engancharse a ellas con reglas CSS, los métodos modernos de diseño web favorecen a las clases sobre las identificaciones, en parte, porque son menos específicas y más fáciles de trabajar con ellas en general. Sí, todavía encontrará muchos sitios que usan IDs, pero esos atributos se están aplicando con menos frecuencia que en el pasado, mientras que las clases se han apoderado de las páginas web modernas.
Índice de contenidos
Clases simples o múltiples en CSS?
En la mayoría de los casos se asignaría un único atributo de clase a un elemento, pero en realidad no está limitado a una sola clase, sino a la forma en que lo está con los IDs. Mientras que un elemento sólo puede tener un único atributo ID, puede dar a un elemento múltiples clases y, en algunos casos, hacerlo hará que su página sea más fácil de peinar y mucho más flexible.
Si necesita asignar múltiples 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:
.
Esto establece las siguientes tres clases en la etiqueta del párrafo:
- Cita
- Destacado
- Izquierda
Observe los espacios entre cada uno de estos valores de clase. Esos espacios son los que los configuran 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, ya que al hacerlo se establecerían como clases separadas. Por ejemplo, si se utiliza «pullquote-featured-left» sin espacio, sería un valor de clase, pero el ejemplo anterior, donde estas tres palabras están separadas por un espacio, las establece como valores individuales. Es importante entender este concepto al decidir qué valores de clase utilizar en sus páginas web.
Una vez que tenga sus valores de clase en HTML, puede asignarlos como clases en su CSS y aplicar los estilos que desee agregar. Por ejemplo.
.pullquote { …. }
.destacado { …. }
p.left { …. } >
En estos ejemplos, las declaraciones CSS y los pares de valores 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 puede utilizarla como parte de una lista de clases; sin embargo, tenga en cuenta que sólo afectará a los elementos especificados en el CSS. En otras palabras, el estilo p.left sólo 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 ‘left'». Por el contrario, los otros dos selectores del ejemplo no especifican un determinado elemento, por lo que se aplicarían a cualquier elemento que utilice esos valores de clase.
Ventajas de las clases múltiples
Múltiples clases pueden hacer más fácil añadir 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 hacer flotar elementos a la izquierda o a la derecha rápidamente. Puede escribir dos clases
left y
right
con sólo
float:left;
y
float:right;
en ellos. Entonces, siempre que tenga un elemento que necesite flotar a la izquierda, simplemente agregue la clase «left» a su lista de clases.
Sin embargo, hay una fina línea para caminar por aquí. Recuerde 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 «izquierdo», que son nombres que dictan cómo deben verse los elementos en lugar de lo que son, está cruzando esa línea entre estructura y estilo. Intento limitar mis nombres de clase no semánticos tanto como sea posible por esta razón.
Múltiples clases, semántica y JavaScript
Otra ventaja de usar múltiples clases es que le da muchas más posibilidades de interactividad.
Puede aplicar nuevas clases a elementos existentes utilizando JavaScript sin eliminar ninguna de las clases iniciales. También puede utilizar clases para definir la semántica de un elemento. Esto significa que puede añadir clases adicionales para definir lo que ese elemento significa 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 hacerlos un poco difíciles de manejar y manejar con el tiempo. Puede ser difícil determinar qué estilos están afectando a un elemento y si algún guión lo está afectando. Muchos de los frameworks disponibles hoy en día, como Bootstrap, hacen un uso intensivo de elementos con múltiples clases. Ese código puede salirse de control y ser difícil trabajar con él rápidamente si no se tiene cuidado.
Cuando se utilizan varias clases, también se corre el riesgo de que el estilo de una clase prevalezca sobre el estilo de otra, incluso si no se tiene la intención de hacerlo. Esto puede hacer que sea difícil entender por qué no se están aplicando sus estilos, incluso cuando parece que deberían hacerlo. Usted necesita ser consciente de la especificidad, incluso con los atributos aplicados a ese elemento!
Al utilizar una herramienta como las herramientas para webmasters de Google Chrome, puedes ver más fácilmente cómo tus clases están afectando a tus estilos y evitar este problema de estilos y atributos conflictivos.
