Fa un temps, el meu company diego va escriure diversos articles (com aquest) sobre frameworks per crear contingut web, més concretament aquells que s'encarreguen de donar-li el disseny. Al final, els navegadors web només entenen HTML per a l'estructura, CSS per al disseny i JavaScript per, com deia el meu professor en això, animar el contingut, encara que hi ha frameworks com Laravel o Django que semblen dir el contrari. Semblen. El que farem avui aquí és explicar quan hauríem de triar una opció o una altra per donar forma al contingut HTML.
Encara que al titular s'esmenta Tailwind i Bootstrap, al que em refereixo amb aquests noms és més aviat al que alguns consideren que estan en un punt mitjà entre CSS pur i un framework pròpiament dit i un framework complet. Tots dos són frameworks, però Bootstrap té gairebé tot ja fet i Tailwind permet molta més personalització. Ja estic avançant un dels motius per triar una opció o una altra, però començarem amb quan utilitzar CSS.
Quan triar CSS pur per al meu lloc web
El CSS pur és quan un escriu totes les regles manualment usant selectors. Per exemple, quan vull que una barra de navegació estigui amb fons vermell i que els enllaços estiguin d'un altre color i centrats, he d'escriure alguna cosa com el següent, suposant que el navegador de destinació suporti regles imbricades.
nav { background-color:xarxa; color:blue; margin:0; text-align: center; a { padding: 10px; color:white } }
A l'anterior encara caldria sumar-hi alguna cosa si volem que aquesta senzillíssima – i mal dissenyada, tot cal dir-ho – barra de navegació quedés enganxada a les vores, i és fer que el cos del document no tingui marges. En cas contrari, els navegadors mostren una vora al voltant de tot.
I així amb tot.
- El millor:
- Usant CSS pur tenim tot el control sobre el que creem.
- No hem d'afegir diversos fitxers perquè tot funcioni, i encara menys instal·lar el framework al nostre projecte.
- El dolent:
- Escriure tot el CSS a mà pot anar bé en UN projecte SENZILL, però no tant si el projecte és complex o hem de crear moltes pàgines web. Començar sempre de zero és costós, no es paga i és el motiu pel qual hi ha els marcs de treball.
Quan triar Bootstrap (o un altre framework complet)
Bootstrap i la majoria de frameworks CSS – i no CSS – es creen pensant en la productivitat. Solen tenir una filosofia en ment coneguda com a «escriu menys, fes més». Com a norma general, són uns arxius CSS, i potser també JavaScript, que ho tenen tot llest per començar a fer servir.
A diferència del CSS pur, que treballa amb selectors, Bootstrap i altres opcions similars usen classes que s'inclouen dins de l'etiqueta un element. Per exemple, si el que volem és crear una capçalera de tipus 1 (h1) amb text blau, fons vermell i una separació interior, haurem d'escriure alguna cosa com això:
Això és el text
No sé si us heu fixat que he fet servir «primary» i «danger» per als colors, i és que Bootstrap en té diversos per a menús, botons i missatges. Si volem fer servir altres, hem d'usar CSS propi i sobreescriure les regles de Bootstrap. Això o editar el fitxer .css del framework.
- El millor:
- Hi ha documentació i exemples per crear elements ràpidament.
- És responsiu i mòbil primer.
- Les pàgines web es poden crear ràpidament, fins i tot sense saber molt de Bootstrap si s'agafen els exemples de la documentació.
- El dolent:
- Crear una pàgina amb Bootstrap i fer-ho ràpid deixa clar què has fet servir per al seu disseny.
- Molt poc personalitzable si no s'hi apliquen regles i retocs propis.
Quan triar Tailwind
Tailwind és també un framework, però molts el col·loquen entre el CSS pur i la resta de marcs de treball per no tenir un estil propi característic. Només instal·lar-lo, veurem coses com que tots els encapçalats tenen la mateixa mida, i això és perquè té un bon reset perquè sigui l'usuari qui ho controla tot. Per aconseguir la capçalera tipus 1 de l'exemple de Bootstrap, Tailwinds ens demana una cosa així:
Això és el text
Hi ha similituds i diferències pel que fa a la classe combinada de Bootstrap. Per exemple, el marge interior o padding és igual, cadascun amb les seves mides, però mateixa sintaxi, i la classe per centrar el text també. Ja més diferents són les dels colors. Mentre Bootstrap per defecte només inclou uns colors que són el primari, secundari, perill, avís, etc, Tailwind ofereix una gamma molt més variada, i es pot posar un color amb fins a 9 tons diferents. Per conèixer-los tots, val la pena llegir la documentació oficial.
- El millor:
- Es diu que és més lleuger que altres frameworks.
- Nosaltres tenim tot el control sobre allò que dissenyem; no depenem duna base definida.
- Els noms de les classes són més semblants al CSS pur.
- El dolent:
- La seva instal·lació no és la més senzilla. Encara que es pot fer servir amb un CDN afegit a l'etiqueta cap, això no es recomana per a un projecte seriós.
- Tailwind CSS és en part un pre-processador de textos com Sass i necessitem un fitxer d'entrada que es compilarà i traduirà tot a CSS pur.
- L'HTML no queda gaire net; un element amb molts estils pot tenir una classe enorme, però això té solució, encara que cal aprendre-la.
xarxa y flexible amb frameworks CSS
Això és tant positiu dels frameworks com una cosa negativa del CSS pur. Hi ha edicions més fàcils que altres, i controlar els xarxa y flexible de CSS pot ser complicat. Els frameworks hi han pensat, i per exemple Bootstrap té una solució senzilla basada en 12 columnes.
Suposem que tenim un menú o alguna cosa semblant amb 6 elements i volem que es vagin acomodant depenent de l'amplada de la pantalla, també conegut com finestra gràfica. Per fer-ho amb CSS pur cal llençar de mitja queries, que és com una consulta que fa el navegador sobre el tipus de pantalla des d'on estem visitant un contingut. El CSS inclouria un @media per a cada amplada de pantalla, i en cadascun d'ells hauríem de reajustar la reixa. Això Bootstrap ho soluciona així:
text text text text text text
Les classes anteriors indicarien:
- col-12: en la mida «normal», que Bootstrap pren com a tal les pantalles mòbils, cada element ocuparà el total (12/12), cosa que farà que hi hagi sis files una sota l'altra ocupant tota l'amplada de pantalla. Es pot ometre, ja que és el comportament per defecte.
- col-md-6: a les pantalles mitjanes, cada element ocuparà la meitat (6/12), per la qual cosa n'hi haurà dos a dalt, dos al centre i dos a baix.
- col-lg-4: a les pantalles grans, cada element ocuparà la tercera part (4/12), per la qual cosa n'hi haurà tres a dalt i tres a baix.
- col-xl-2: a les pantalles més grans, cada element ocuparà la sisena part (2/12), per la qual cosa, com que hi ha 6 elements, es mostrarà una fila amb els sis.
Més informació sobre grid a Bootstrap.
Conclusió
Els marcs de treball i aquest tipus d'eines es creen per anar a millor, i tenen sentit, sobretot, quan necessitem produir de manera eficient. Quan calgui fer servir poc CSS, probablement és millor no escalfar-se el cap i ficar-lo a mà. Quan volem alguna cosa ràpida sense importar-nos molt la personalització, alguna cosa com Bootstrap pot ser la solució. I si volem tenir tot el control, encara que amb això haguem de treballar una mica més, el punt mitjà, Tailwind.