Hojas de estilo en cascada defina la apariencia de un elemento de la página web enganchándose a los atributos que aplica a ese elemento. Estos atributos pueden ser un ID o una clase y, como todos los atributos, agregan información útil a los elementos a los que están adjuntos.
Dependiendo del atributo que agregue a un elemento, puede escribir un selector de CSS para aplicar el Estilos visuales necesarios que se necesitan para lograr la apariencia de ese elemento y el sitio web. como un todo.
Si bien las ID o las clases funcionan con el propósito de conectarse con ellas con reglas CSS, el diseño web moderno Los métodos favorecen las clases sobre los ID, en parte, porque son menos específicos y más fáciles de trabajar en general.
¿Una o más clases de CSS?
En la mayoría de los casos, asigna 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 las ID. Mientras que un elemento solo puede tener un único atributo de ID, puede darle a un elemento varias clases 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, agregue las clases adicionales y simplemente sepárelas 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
- Presentado
- 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 las clases no pueden tener espacios porque hacerlo los establecería como clases separadas.
Una vez que tenga los valores de su clase en HTML, puede asignarlos como clases en su CSS y aplicar los estilos que le gustaría agregar. Por ejemplo.
.pullquote {... }
.Destacados {... }
p.left {... }
En estos ejemplos, las declaraciones CSS y los pares de valores aparecen dentro de las llaves, que es cómo se aplicarían esos estilos al selector apropiado.
Si usted establecer una clase para un elemento específico (por ejemplo, p. izquierda), aún puede usarlo como parte de una lista de clases; sin embargo, tenga en cuenta que solo afectará a los elementos que se especifican en el CSS. En otras palabras, el p. izquierda el estilo solo se aplicará a los párrafos con esta clase, ya que su selector en realidad dice que se aplique a "párrafos con un valor de clase de izquierda, "Por el contrario, los otros dos selectores del ejemplo no especifican un elemento determinado, por lo que se aplicarían a cualquier elemento que utilice esos valores de clase.
Varias clases, semántica y JavaScript
Otra ventaja de utilizar varias clases es que aumenta las posibilidades de interactividad.
Aplique nuevas clases a elementos existentes utilizando JavaScript sin eliminar ninguna de las clases iniciales. También puede utilizar clases para definir el semántica de un elemento - agregue clases adicionales para definir qué significa ese elemento semánticamente. Este enfoque es como Microformatos obras.
Ventajas de las clases múltiples
La superposición de varias clases puede facilitar la adición de efectos especiales a los elementos sin tener que crear un estilo completamente nuevo para ese elemento.
Por ejemplo, para hacer flotar elementos hacia la izquierda o hacia la derecha, puede escribir dos clases:
izquierda.
y.
derecho.
con tan solo.
flotador izquierdo;
y.
flotar derecho;
en ellos. Luego, siempre que tenga un elemento que necesite flotar a la izquierda, simplemente agregaría la clase "left" a su lista de clases.
Sin embargo, hay una delgada línea para caminar aquí. Recuerde que los estándares web dictan la separación de estilo y estructura. La estructura se maneja usando 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 dicte cómo deben verse los elementos en lugar de lo que son, está cruzando esa línea entre la estructura y el estilo.
Desventajas de las clases múltiples
La mayor desventaja de usar varias clases simultáneas en sus elementos es que puede hacerlos un poco difíciles de manejar y administrar con el tiempo. Puede resultar difícil determinar qué estilos están afectando a un elemento y si algún script lo afecta. Muchos de los marcos disponibles en la actualidad, como Bootstrap, hacen un uso intensivo de elementos con múltiples clases. Ese código puede salirse de control y es difícil trabajar con él muy rápidamente si no tiene cuidado.
Cuando usa varias clases, también corre el riesgo de que el estilo de una clase anule el estilo de otra. Esta colisión puede hacer que sea difícil averiguar por qué sus estilos no se están aplicando incluso cuando parece que deberían hacerlo. Sea consciente de la especificidad, incluso con los atributos aplicados a ese elemento.
Al usar una herramienta como las herramientas para webmasters de 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.