Cómo el uso de múltiples clases de CSS ofrece más flexibilidad

Cómo el uso de múltiples clases de CSS ofrece más flexibilidad

Cómo el uso de múltiples clases de CSS ofrece más flexibilidad

VALORACIÓN DEL ARTÍCULO:
5/5


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.

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.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,