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.

Í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.

TAMBIÉN TE INTERESA

uso de la IA en BTOB

Impacto de la IA en un negocio (real y cuantificado): el caso de BTOB

Las principales noticias sobre la inteligencia artificial giran en torno a las numerosas aplicaciones que han salido al mercado para una amplia variedad de sectores. Sin embargo, pocas hablan del verdadero impacto de la IA en un negocio. El ejemplo de BTOB puede aclarar muchas dudas sobre la influencia que tiene la nueva tecnología en

Suite VIsual de Canva

Suite Visual 2.0 de Canva: el mayor lanzamiento en la historia de la plataforma

Canva ha dejado de ser solo una plataforma de diseño gráfico accesible. En su última edición del evento Canva Create, celebrado en Los Ángeles, la compañía australiana ha anunciado el lanzamiento de su mayor revolución tecnológica hasta la fecha: la Suite Visual 2.0 de Canva, un paquete de herramientas que promete transformar la manera en

IA de WordPress

Con la IA de WordPress nunca fue tan sencillo crear una página web

WordPress, quizás la plataforma más popular para crear webs de forma profesional, acaba de dar un paso muy importante: la IA de WordPress ha sido presentada con el objetivo de generar páginas de una forma muy sencilla. Si ya era fácil construir una página web en este ecosistema, ahora lo será mucho más. Todo se