¿Se desaconsejaría crear clases CSS ‘prefabricadas’ y apilarlas en elementos para formatear?

Recientemente cambié a usar una serie de clases de utilidad junto con mi estructura BEM, donde las clases de utilidad son una serie de modificadores de nivel superior. Tiene sentido, en mi aplicación, usar la mayor cantidad posible de estos, luego confiar en componentes para diseñar elementos cuando se combinan, que son una colección de elementos.

Uso las clases de utilidad cuando no tiene sentido convertirlo en su propio componente. También trato de definir cosas como margen y relleno usando las clases ya que los componentes pueden necesitar más margen / relleno dependiendo de su ubicación.

Cosas como la configuración del tamaño de fuente, el color y otros atributos menores pero ampliamente utilizados.

  • .font-5 : establece el tamaño de fuente en el nivel 5 ( tamaño de fuente: 21.875px | 1.563rem)
  • .is-number : aplica el número font-family
  • .status-text.is-active – is-active solo aplica el texto verde si también se define el texto de estado.
  • mini-header : es un alias para las siguientes clases: mayúscula, quiet (aplica texto gris), font-8 (font-size: 11.2px | 0.8rem)

Para mí, usar clases de utilidad como esa significa que no tendría que crear un componente completo solo para aplicar color, relleno, márgenes o bordes

Es mejor crear clases significativas que nombren sus componentes de la interfaz de usuario y utilizar variables de preprocesador CSS para los tamaños comunes y otros valores comunes (colores, familias de fuentes, etc.).

Usamos clases para organizar el estilo de los componentes de una manera más sostenible y a prueba de futuro.

Mantenimiento significa que debe realizar cambios en el código existente más adelante. Cuando necesita cambiar el ancho máximo de un componente, la mayoría de las veces esto no significa que tenga que cambiar todos los componentes que tienen un ancho máximo de 500 px.

Además, si coloca un valor en un nombre como “mx-500” (en contraste con “mx-large”), cuando esté a punto de modificar los valores, deberá modificarlos en dos lugares (el HTML marcado y el valor CSS).

No recomendaría usar clases CSS de propósito único. Obliga a su marcado a describir con precisión cómo deben diseñarse los elementos, que es exactamente lo que intentamos evitar con estilos en línea como style="max-width: 500px; margin-top: 25px;" . Realmente no hay diferencia entre eso y lo que estás proponiendo.