Incluye estilos a tu pagina sin crear hoja de estilos gracias a Atomic css

Atomic css es una gran herramienta que uso a la hora de desarollar que me parece brutal, especialmente es brutal con un sistema de templating como seria react / angular / vuejs.

Cual es su grandissima ventaja? escribir codigo css se vuelve algo instantanio, no tienes que crear hojas de estilos, pensar el nombre de las clases, escribir esos estilos, todo ese trabajo te lo ahorras, ademas tu codigo resultante, en vez de ser miles y miles de linias de codigo de css que suele tener un proyecto, que hace que tu web tarde mucho mas a cargar “razon x la que no uso bootstrap”, tu fichero final no tendra mas de 300 linias de codigo!!! es alucinante la optimizacion que logras con ello.

Y entonces, que es atomic css:
Atomic css, es una forma de escribir css, que se basa en tener clases “atomicas”, que se basan en una clase = una propiedad css, esa estrategia tmb es usada en librerias css como por ejemplo en bootstrap tendriamos:
.d-none { display: none }
Como vemos, una clase para una sola propiedad.
A parte de atomic css, otra estrategia para escribir css muy popular es BEM, que consiste en darle a todos los elementos que quieras ponerles css, una clase identificativa unica con un sintaxis especial para los nombres, lo que logras que el css sea plano, sin concatenar prioridades y muy declarativo, de modo que siempre sepas que elementos tienen css y siempre puedas modificarlos sin pensar en prioridades.

Porque es muy importante usar alguna de esas estrategias? Imaginate trabajar en un codigo como el que podria ser x ejemplo en mi curro, donde nos peleamos por quien da mas prioridad al codigo, te puedes encontrar cosas como .class.class > div > a !important, k te quedas, wtf rly me vas a hacer buscar como maxacar algo asi? pues tanto con BEM como con AtomicCss, nunca vas a tener tal problemas.

Ok pero con atomic css, estamos hablando que tengo que crear una clase por cada elemento, wtf eso es mucho curro no?? ok, si, peeero, si visitas su pagina oficial, https://acss.io/ , tienen una herramienta llamada Atomizer, que la puedes descargar desde https://github.com/acss-io/atomizer, que te permite incorporarla con webpack y otras herramientas.

Que hace esa herramienta? te va a generar en una hoja de estilos, de forma automatica, todas las clases que tu escribas directamente sin crearlas, en tu codigo html, que usen la sintaxis que incluyen en su referencia https://acss.io/reference

De modo que si por ejemplo tu escribes:
<div class=‘D(n)’>
Automaticamente se te generara la clase .D(n) { display: none}
Tmb atomizer viene con autoprefixer, que te pondra todos los prefixers del css tipo -webkit u otros para compatibilidad con navegadores, variables postcss y breakpoints customizables.

Ademas gracias a la ayuda de tu editor de codigo, todas las clases que ya hayas incorporado, se te sugeriran automaticamente, de forma que si escribes D, veras D(n) D(f) ‘flex’ D(b) ‘block’, etc… asi que escribir codigo se volvera instantanio.

Obviamente atomic css tmb tiene sus limitaciones, para escribir segun que cosas, como sombras o borders, su sintaxis es algo compleja y ademas no soporta grid, pero eso no tiene xk ser un problema, eres libre de combinar BEM con Atomic css o lo que quieras, o incluso crear tus propias clases atomicas para… grid x ejemplo.

Y entonces, porque eso mola tanto para combinar junto a templates como react & vue & angular? Porque tu codigo va a terminar viendose x todos lados tipo <div className=‘D(f) Jc(se) Mb(15px)’>
Eso hara que no sepas que es cada div, dado que es muy informativo sobre que propiedades tiene, cosa por la que mola tanto atomic css, pero no sobre ese div que elemento representa, pero si esa clase es un componente, la sintaxis final queda aun mas clara, es decir, si tu tienes un componente <Button> tienes clarissimo que hace, si luego navegas en el componente y ves un div, con un monton de clases atomicas, sabes exactamente que propiedades tiene rapidamente sin mirar su css, asi k eres capaz de seguir el codigo mucho mas rapido.

Otra cosa por la que me encanta atomic css, es dado que al no necessitar hojas de estilos, tu estructura de ficheros va a ser mucho mas limpia y facil de navegar, ademas que seras capaz de cumplir con mucha mas facilidad una estructura 7 ficheros x directorio tal como se recomienda.