El otro día preguntaba aquí por un sistema de nomenclatura para clases CSS.
Los más típicos son ITCSS, BEM, OCSS, SMACSS, OOCSS que ya llevan varios años asentados.
También menciono uno bastante reciente llamado CubeCSS creado por @piccalilli_ y me apetece explicarlo bien.
Lo primero es decir que llevo usándolo cosa de unas semanas por lo que todavía no soy experto en el sistema.
Lo primero es decir que CubeCSS trata de utilizar la cascada de CSS y no de ir en contra de CSS como otras metodologías.
Cube son las siglas de Composition, Utility, Block y Exception.
La filosofía de Cube es el progressive enhancement esto quiere decir que lo que intenta es ir desde lo más general a lo más específico.
Esto permite tener que escribir menos estilos.
La primera parte de Cube es la de utilidad. La idea es aprovechar lo mejor de Tailwind para tener clases de utilidad para los design tokens.
Ojo con esto, no se trata de hacer que todo el CSS sean clases de utilidad, tan solo los design tokens como colores, tipografías, etc
Un ejemplo de estas clases sería:
.bg-primary { background: #ff00ff; }
También se permite clases de utilidad que tengan una sola misión aunque tenga varias propiedades, como esta:
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Esto de las clases de utilidad permite quitarte de muchos estilos en el CSS ya que tan solo tienes que poner el nombre de la clase en el HTML
Siguiente concepto el de composición. Pongamos que tienes una lista de items, la idea es que dentro de cada item pueda ir casi cualquier cosa, para ello es conveniente usar este tipo de clases:
.flow > * + * { margin-top: var(--flow-space, 1em); }
Si un día decides cambiar un elemento interno de la lista sabes que se va a aplicar también su margen sin tener que cambiar o añadir clases.
Al usar dentro de esta clase una variable CSS puedes personalizar para cada contexto el valor:
.card__content { --flow-space: 1.4rem; }
Cube también tiene elementos llamados bloques que son partes reutilizables con estilos para complementar a los que ya has añadido antes con las clases de utilidad y composición.
Un ejemplo de esto es una card de una lista de artículos o un botón.
Por último quedan las excepciones. Imagina que tienes el bloque de card que dentro tiene una foto y un heading, y necesitas en un sitio que se vea al revés, el heading arriba, esto es una excepción o estado.
Para este caso Cube recomienda aplicar un data-attribute al HTML.
El ejemplo anterior sería tal que así:
<article class="card" data-state="reversed"></article>
Ahora simplemente tienes que seleccionar con CSS el data-attribute y poner el estilo que necesites.
Al ser data-attributes y no clases los puedes pillar mejor con JS.
Y eso es un poco lo que ofrece Cube, como digo yo ya lo he probado y me ha gustado porque tiene lo mejor de cada metodología, sin caer en todo utilidad o todo BEM sin tener nada de utilidad.
Lo único malo que le veo es crearse todas esas clases de utilidad. Cube recomienda la librería de Gorko para crear las clases a partir de unos tokens pero al final es un paso extra a la config del proyecto.
De momento yo lo que hago es crearlas a mano.
https://github.com/andy-piccalilli/g orko
Por cierto y ya para cerrar (siento la chapa), una curiosidad de Cube es que las clases se escriben entre corchetes, esto se hace para separar los tipos de clase:
class="[ summary ] [ flow radius ] [ bg-primary color-light ]"
Seguro que me dejo algo, si te interesa la metodología echa un vistazo a su página oficial, sobre todo a los ejemplos:
https://cube.fyi/examples.html#talks -videos-and-interviews
En un futuro tengo pensando sacar un artículo práctico explicando un poco más CubeCSS.
Gracias por leer y compartir el hilo!