Obtén el archivo de FigmaObtén el clonable de Webflow

Entendiendo los Class Types

Cuando los elementos individuales o grupos de elementos necesitan divergir del estilo de todo el elemento, adjuntar una clase nos permite hacer una excepción. Pero un gran poder conlleva una gran responsabilidad, ya que las clases pueden convertirse rápidamente en una telaraña desordenada de interdependencias y especificaciones excesivas, razón por la cual una biblioteca de clases de utilidad puede mantener las cosas ordenadas. Pero incluso utilizando la biblioteca de clases de utilidades más robusta, muchos proyectos aún requerirán la creación de nuevas clases personalizadas. Y una cosa a tener en cuenta al crear estas clases es que es posible que se deban realizar ajustes en el futuro, lo que hace que sea importante crear clases de manera que no sea necesario desenredarlas en una fecha posterior.

Para entender cómo crear y mantener una biblioteca de clases utilizable, es importante profundizar en los diferentes tipos de clases y cómo se relacionan entre sí.

Utility Classes

Una clase de utilidad se puede considerar como un elemento químico, como H2 (Hidrógeno).

‍

H2 

.h2 {
  background-color: lightblue;
}

Una clase de utilidad, por sí sola, representa un comportamiento muy específico. H2 , por ejemplo, podría representar un fondo azul. Y O (Oxígeno) podría representar una imagen de fondo de burbuja. Por sí sola, la utilidad de una clase de utilidad puede ser limitada, pero se pueden combinar con otras clases para lograr resultados más sofisticados.

Combinando Utility Classes

Las clases de utilidad se pueden unir para comportarse como la suma de sus partes. Usando el ejemplo anterior, si combinamos H2 y O , terminaremos con la imagen de fondo de la burbuja sobre un fondo azul, combinándolos para representar la apariencia del agua.

H2 O 

.h2 {
  background-color: lightblue;
}
.o {
  background-image: url('styles-oxygen.png');
}

Usando clases de utilidad como una library of elements, podemos encadenarlos para construir rápidamente los estilos más comunes que se encuentran en la web sin tener que nombrar, declarar o mantener clases complejas..

Consejo
Cuando las simple classes se combinan, la declaración de estilos a partir de entonces creará una clase combinada (detalles a continuación) y los estilos serán dependientes en todas las clases simples aplicadas que están presentes. Por lo tanto, al crear o editar clases simples que forman parte de una lista compuesta de clases, es esencial crear un nuevo div o elemento de texto "ficticio", aplicar la clase, y hacer declaraciones directamente a la clase simple.

Custom Classes

Las clases personalizadas se crean para una situación específica y pueden tener un nombre que no describe necesariamente su composición o comportamiento. Por ejemplo, podríamos crear una clase que tenga todas las propiedades de H2 O , pero asignale un nombre Water .

Water 

.water {
  background-color: lightblue;
  background-image: url('styles-oxygen.png');
}

Estos son útiles para lograr comportamientos que no son fácilmente compatibles con las clases de utilidad simples, pero el inconveniente es que su comportamiento puede no ser obvio solo por el nombre de la clase. Es posible que tengamos que consultar el panel de estilo para ver exactamente qué propiedades CSS se declararon.

 

Combo Classes

Las clases combinadas se comportan un poco como reacciones químicas en el sentido de que cuando se combinan dos clases particulares (en cualquier orden), el comportamiento resultante es más que la suma de sus partes. Por ejemplo, si soltamos K (Potasio) en un vaso de agua, la reacción inesperada será una llama...

Water K 

.water {
  background-color: lightblue;
  background-image: url('styles-oxygen.png');
}
.k {
  background-image: url(styles-potassium.png');
}
.water .k {
  background-color: lightblue;
  background-image: url('styles-potassium.png');
  background-image: url('styles-oxygen.png');
  background-image: url('styles-flame.png');
}

En otras palabras, el todo es de alguna manera único a la suma de las partes individuales. La llama solo aparece cuando la clase Agua y K están presentes. Este es el caso cada vez que agrega varias clases a un elemento y ve estilos aplicados con un encabezado azul. Y para editar esta clase combinada en el futuro, deberá volver a crear la cadena de clases exactamente en el mismo orden.

A continuación:

Class Naming