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

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria