Donar estils en desenvolupament web i treballar amb ells es va diversificant dia a dia amb noves eines o versions mes completes de les que ja tenim. Et presentem PostCSS, per si encara no la coneixes, i et expliquem per que hauries d'utilitzar-la.
Afirmar que l’interes per PostCSS esta creixent de forma ràpida, gairebé no es qüestiona en els entorns del desenvolupament web. Cada dia que passa veiem com va creixent en comunitat i codi, ampliant les característiques d’aquest entorn per treballar amb estils.
Segons la gràfica de Google podem veure una tendència a l’alça, com una remuntada, a començaments de l’any present.
Però, per què es tan particular per despertar aquest interès i que els desenvolupadors l’estiguem implementant en els nostres afers?
Contextualitzant l’eina, PostCSS va ser creada i desenvolupada per Andrey Sitnik, inventor de Autoprefixer, i construïda com un mètode per utilitzar JavaScript amb la finalitat de processar CSS.
PostCSS és, en si mateix, una simple API que, usada dins de la seva enorme col·lecció de plugins, ofereix un sense fi de possibilitats per millorar el nostre desenvolupament a l’hora de donar estils.
En córrer sobre el framework de node.js podem fer diferents scripts en JavaScript per ampliar la funcionalitat de PostCSS que, per si sola, no fa res. I un dels aspectes clau és la seva estructura modular.
Al contrari del que succeeix amb Sass o Less, on podem tenir una llibreria gegant de mixins que moltes vegades no arribarem a utilitzar, però estan allà “per si de cas”, PostCSS permet instal·lar mòduls de forma més senzilla, a l’estil plug-and-play, i que només seran treballades pel nostre processador de tasques (Gulp, Grunt, Broccoli) en el cas que ho anem a utilitzar.
Hi ha unes excel·lents guies a Smashing Magazine per afegir-lo a la nostra llista de tasques i col·locar els plugins segons els anem necessitant. L’automatització de les tasques ja s’encarregarà de compilar, concatenar, minificar, etc. segons les nostres configuracions.
El fet de fer el pre-processament sobre JavaScript i no sobre C++, com altres pre-processadors populars, és una de les característiques que fa que la compilació de PostCSS sigui molt més ràpida.
En paraules del propi Andrey Sitnik, podem apreciar i veure com ha millorat en velocitat respecte als pre-processadors més comuns. Però PostCSS no és un pre-processador únicament, en aquest sentit molts el descriuen com una navalla suïssa perquè permet fer totes les tasques en relació a les teves necessitats.
Al principi ens vam quedar una mica descol·locats amb el motlle PostCSS, intentant veure-li les costures, buscant exemples que li siguin similars per intentar-los comprendre. Però hem de quedar-nos amb la idea que és un entorn meta CSS o, com diuen molts frontenders, va més enllà del CSS.
Si volem treballar amb preprocessadors ho podrem fer; si volem treballar amb postprocessadors, amb extensions d’optimització/neteja, fallbacks per a older-browsers.
D’altra banda, disposem d’extensions que ens permeten treballar amb futura sintaxi que encara no s’han convertit en un estàndard. D’aquesta manera no cal consultar el Can I Use ni esperar la compatibilitat entre navegadors. Per descomptat, si desitgem treballar amb la sintaxi de Sass, Less, Stylus… ho podrem fer instal·lant els seus corresponents mòduls.
L’únic que serà necessari és cridar als plugins on podem trobar totes aquestes funcionalitats o crear el nostre propi plugin si encara no existeix. Per això comptem amb una bona col·lecció de plugins per a PostCSS.
Poc a poc anirem trobant més comú l’ús de PostCSS en els desenvolupaments web i d’aplicacions. Estigueu atents al blog, perquè en propers posts anirem destacant el més important i com manejar-se dins de PostCSS amb plugins de creació pròpia i externs.
