I framework CSS sono un punto di riferimento importante dello sviluppo web negli ultimi 10 anni. Ci sono sempre più risorse e sempre più framework a disposizione per gli sviluppatori. Sorge spontaneo chiedersi se uno nuovo sia migliore delle opzioni esistenti. In questo articolo confronteremo due dei framework front end più in auge negli ultimi anni. Bootstrap framework, eterno cavallo di battaglia del linguaggio CSS e Tailwind CSS, più recente, ma molto gettonato tra gli sviluppatori front end. Prima di cominciare, facciamo un passo indietro e scopriamo cosa si intende per CSS.
CSS, cos’è?
Si tratta di un linguaggio di mark-up per la gestione dei fogli stile di una pagina web. Attraverso delle regole sarà possibile personalizzare la propria pagina web come più si preferisce, andando a gestire immagini, font, dimensioni del layout e formattazione degli elementi. CSS sta per Cascading Style-Sheet.
Cos’è Bootstrap?
Bootstrap è uno dei framework CSS più longevi ancora in uso; è stato creato e reso open source nel 2011 da Twitter. Uno dei suoi maggiori vantaggi è che fornisce modelli e classi basati su CSS per componenti comuni che mettono in primo piano la reattività e il design mobile-first. Ad esempio, se desideri creare un dropdown menu in Bootstrap, puoi utilizzare le classi del dropdown menu e dell’elemento dropdown rispettivamente sul contenitore e sugli elementi figlio e Bootstrap applicherà automaticamente tutte le regole CSS richieste in background per modellare questi componenti. Semplifica di molto la vita dei programmatori front-end anche grazie alle grandi quantità di temi messi a disposizione dalla comunità.
Cos’è Tailwind CSS?
Tailwind CSS è stato creato nel 2017 da Adam Wathan e Steve Schoger. Si descrive come un “framework CSS di prima utilità ricco di classi per costruire qualsiasi progetto“. A differenza di Bootstrap, Tailwind CSS non offre alcun componente predefinito da utilizzare, ma spetta a te progettare e creare il tuo. Vengono forniti solo gli strumenti per farlo in modo rapido e semplice. Ad esempio, Tailwind CSS viene fornito con un’ottima integrazione IDE in VS Code che aiuta a completare automaticamente i suggerimenti, unire le tue classi e fornire definizioni di classe senza che tu debba lasciare il tuo ambiente di lavoro. Tailwind CSS semplifica anche i design reattivi poiché gestiscono tutte le query multimediali per te, servirà soltanto utilizzare il punto di interruzione che desideri scegliere come target davanti alla classe che stai utilizzando.
A differenza di Bootstrap, Tailwind CSS non viene fornito con classi predefinite. Invece, il framework principale opera a un livello molto più basso utilizzando classi di utilità come px-4, text-center e round-full. Queste sono tutte astrazioni delle proprietà CSS tradizionali: padding-x, text-align e border-radius. Ma invece di scrivere CSS da soli e preoccuparsi di cose come le convenzioni di denominazione delle classi, Tailwind CSS gestisce tutto per te, e devi solo usare le classi direttamente sugli elementi che desideri modellare.
Cosa hanno questi framework front end in comune?
Entrambi questi framework astraggono il CSS effettivo dal flusso di lavoro, non bisogna più preoccuparsi di scrivere tonnellate di CSS manualmente e ci si può invece concentrare maggiormente sulla costruzione della interfaccia utente (UI). Questo perché è necessario il solo utilizzo di vari nomi di classe nel tuo markup HTML e i framework gestiranno tutto il CSS effettivo per te, dietro le quinte. Mentre alcuni affermano che questo approccio di utilizzare molte classi nel markup HTML porta a una leggibilità del linguaggio di markup complesso, è difficile discutere contro il fatto che questi framework semplifichino e accelerino il processo di creazione delle interfacce utente.
Sebbene siano in circolazione da diversi periodi di tempo, sono entrambi utilizzati da aziende di alto profilo e di successo, dimostrando che possono essere implementati in grandi distribuzioni e su larga scala. Secondo StackShare, Bootstrap è utilizzato da oltre 40.000 aziende con nomi come Spotify, Udemy e Twitter che si distinguono. Tailwind CSS, d’altra parte, è utilizzato da aziende come Hashnode e Netflix.
La velocità di sviluppo è la feature più importante in questo contesto?
Sebbene i componenti CSS predefiniti di Bootstrap accelereranno il tuo sviluppo e ti toglieranno la necessità di progettare, hanno un compromesso. È probabile che il tuo sito web sembri generico. Come accennato nella sezione precedente, si dice che Bootstrap sia in uso presso oltre 40.000 aziende. Ci sono tante combinazioni e rimodellazioni sui componenti precostruiti, prima che emergano i modelli stessi e diventino “comuni” sul web.
Ora, se il design del sito Web non è il punto focale del progetto e non è necessario che sia un design completamente personalizzato, i componenti CSS predefiniti potrebbero essere la strada da percorrere. Tuttavia, se avere un design unico è importante per il progetto o l’identità del tuo marchio, avere la libertà di creare design completamente personalizzati potrebbe essere la scelta migliore, che è ciò che ti offre Tailwind CSS.
Lato progettazione, come accennato in precedenza, Tailwind richiede più dispendio a livello di progettazione rispetto a Bootstrap. Mentre Bootstrap offre componenti CSS predefiniti da utilizzare, Tailwind no. Ciò significa che devi architettare e costruire tutti i tuoi componenti da zero. Quindi, se la progettazione non è la tua skill principale o se il tuo progetto ha una scadenza ravvicinata e hai poco tempo a disposizione per la progettazione, allora potresti voler utilizzare Bootstrap e i suoi componenti predefiniti per risparmiare tempo.
Uno di questi framework CSS è meglio dell’altro?
Sono entrambe scelte valide per i progetti, la scelta è puramente personale o finalizzata all’obiettivo del tuo progetto. Quindi, come per molte cose nello sviluppo web e specialmente nel design, dipende dalle priorità del tuo progetto.
Se ti piace la libertà nella creazione componenti completamente personalizzati, da zero, senza doversi preoccupare di scrivere effettivamente CSS e gestire i file che ne derivano, allora Tailwind CSS è la scelta giusta. Ma se la progettazione non è davvero il tuo punto di forza e preferisci non pensare a tutto, allora qualcosa come Bootstrap, che offre componenti dell’interfaccia utente predefiniti e più di un approccio “porta i tuoi contenuti” potrebbe fare al caso tuo. Bootstrap framework tende ad attrarre molti sviluppatori back-end per questo motivo, è molto rapido e facile da usare, riduce nettamente il tempo dello sviluppo front end.
