Framework CSS o griglia CSS: cosa dovrei usare per il mio progetto?

Pubblicato: 2022-03-10
Riassunto veloce ↬ Hai mai pensato se CSS Grid può effettivamente sostituire la necessità di framework CSS o librerie di componenti di terze parti? In tal modo, Rachel Andrew ha scoperto una serie di motivi per cui le persone utilizzano un framework di terze parti e gli aspetti positivi e negativi di farlo.

Tra le domande che mi vengono poste più frequentemente c'è una varietà di domande: "Dovrei usare CSS Grid o Bootstrap?" In questo articolo, darò un'occhiata a questa domanda. Scoprirai che i motivi per l'utilizzo dei framework sono vari e non semplicemente incentrati sull'uso del sistema a griglia contenuto in quel framework. Spero che scompattando questi motivi, posso aiutarti a prendere la tua decisione, in termini di ciò che è meglio per i siti e le applicazioni su cui stai lavorando, e anche per il team con cui lavori.

In questo articolo quando parlo di un framework , sto descrivendo un framework CSS di terze parti come Bootstrap o Foundation. Si potrebbe obiettare che queste sono davvero librerie di componenti, ma molte persone (inclusi i propri documenti) le descriverebbero come un framework, quindi è quello che useremo qui. Il fattore importante è che si tratta di qualcosa sviluppato esternamente a te, senza riferimento ai tuoi problemi specifici. L'alternativa all'utilizzo di un framework di terze parti è scrivere il proprio CSS, il che potrebbe comportare lo sviluppo del proprio framework interno, l'utilizzo di un gruppo di file comuni come punto di partenza o la creazione di ogni progetto come una cosa nuova. Tutte queste cose sono fatte in riferimento ai tuoi bisogni specifici piuttosto che a quelli molto generici.

Perché scegliere un framework CSS?

La questione se utilizzare Grid o un framework è imperfetta, poiché CSS Grid non è un sostituto immediato per le cose che fa un framework CSS. Qualsiasi esplorazione dell'argomento deve considerare cosa sostituirà il nostro framework CSS Grid. Volevo iniziare scoprendo perché le persone avevano scelto di utilizzare un framework CSS. Così mi sono rivolto a Twitter e ho pubblicato questo tweet.

Ci sono state molte risposte. Come mi aspettavo, ci sono molte più ragioni per utilizzare un framework oltre al semplice sistema di griglia che contiene.

Altro dopo il salto! Continua a leggere sotto ↓

Un framework fornisce al tuo team una documentazione pronta

Se stai lavorando a un progetto con un certo numero di altri sviluppatori, qualsiasi sistema interno che crei dovrà includere anche la documentazione per aiutare i membri del tuo team a utilizzarlo in modo efficace. La creazione di documentazione utile è di per sé un lavoro qualificato e dispendioso in termini di tempo e qualcosa che i grandi framework fanno molto bene.

Screenshot della homepage della documentazione Bootstrap
La documentazione Bootstrap. (Grande anteprima)

La documentazione del framework è emersa ancora e ancora, con molti sviluppatori front-end esperti che si sono aggiunti e hanno spiegato che questo è il motivo per cui avrebbero raccomandato e utilizzato un framework CSS. A volte sento l'opinione che le persone utilizzino i framework perché non conoscono davvero i CSS, molte delle persone che rispondono, tuttavia, mi sono ben note come sviluppatori CSS esperti. Sono sicuro che a volte sono frustrati dalle scelte fatte dal framework, tuttavia, gli aspetti positivi di quella scelta lo superano.

Comunità online: facile accesso alla guida

Quando decidi di utilizzare uno strumento particolare, guadagni anche una comunità di utenti a cui chiedere aiuto. A meno che tu non abbia un problema CSS molto chiaro e sia possibile produrre un caso d'uso ridotto per dimostrarlo, chiedere aiuto con CSS può essere difficile. È particolarmente vero se vuoi chiedere come affrontare la costruzione di un determinato componente. L'uso di un framework può darti un punto di partenza per la tua domanda; in generale, ti chiederai come modificare o dare uno stile a un particolare componente piuttosto che ricominciare da zero. Questa è una cosa più facile da chiedere, così come una cosa più facile a cui rispondere.

Il sistema a griglia

Nonostante il fatto che abbiamo CSS Grid, molte persone hanno risposto che il motivo principale per cui hanno deciso di utilizzare un framework era per il sistema a griglia. Naturalmente, molti di questi progetti potrebbero essere stati avviati molto tempo prima che CSS Grid fosse disponibile. Ancora oggi, tuttavia, le preoccupazioni sulla compatibilità con le versioni precedenti o sulla comprensione da parte del team di metodi di layout più recenti potrebbero indurre le persone a decidere di utilizzare un framework piuttosto che adottare CSS nativi.

Velocità di consegna del progetto

La scelta di un framework, in generale, renderà molto più veloce la consegna del tuo progetto, in particolare se quel progetto si adatta molto bene al modo in cui il framework fa le cose e non richiede molta personalizzazione.

Nel caso di sviluppo di un MVP per una nuova idea, un framework potrebbe essere una scelta eccellente. Avrai molte cose su cui dedicare tempo e continuerai a testare le ipotesi in termini di ciò di cui il progetto ha bisogno. Essere in grado di sviluppare la prima versione utilizzando un framework può aiutarti a presentare il prodotto agli utenti più rapidamente e a risparmiare molto tempo per lo sviluppo di cose che poi decidi di non utilizzare.

Un altro punto in cui la velocità e una serie di componenti già pronti possono essere molto utili è durante lo sviluppo del sistema di amministrazione back-end per un sito o un'applicazione. Nel caso in cui devi semplicemente creare alcune schermate di amministrazione, un framework può risparmiare molto tempo per lo styling dei campi dei moduli e di altri componenti! Esistono anche temi dashboard per Bootstrap e Foundation che possono fornire un utile punto di partenza.

Screenshot di un kit dashboard per Foundation
Le raccolte di componenti del dashboard rendono più veloce la creazione dell'amministratore per un'app. (Grande anteprima)

Non sono un designer!

Questo punto è il motivo per cui in passato ho optato per un framework CSS. Non sono un designer e se devo sia progettare che costruire qualcosa, passerò molto tempo a cercare di prendere decisioni progettuali che non sono del tutto qualificato per prendere. Sarebbe bello avere i fondi per assumere un designer per ogni progetto collaterale, tuttavia, non lo faccio, e quindi un framework potrebbe fare la differenza tra spedire l'oggetto e non farlo.

Gestire bug CSS e problemi di compatibilità del browser

Menzionato meno di quanto pensassi fosse il fatto che gli autori del framework avrebbero già affrontato problemi con il browser, a causa di bug effettivi o mancanza di supporto per determinate funzionalità. Tuttavia, questo era ancora un fattore nel processo decisionale per molte persone.

Per aiutare con un design reattivo

Questo è emerso alcune volte; le persone stavano optando per un framework in particolare perché era reattivo o perché prendevo decisioni sui punti di interruzione per loro. Ho pensato che fosse interessante che questo specificamente fosse qualcosa chiamato come un fattore nella scelta di utilizzare un framework.

Perché non utilizzare un framework?

Tra i motivi positivi per cui i framework erano stati selezionati c'erano alcuni dei problemi che le persone hanno avuto con quella scelta.

Difficoltà di sovrascrivere il codice quadro

Molte persone hanno commentato il fatto che potrebbe diventare difficile sovrascrivere il codice utilizzato nel framework e che i framework erano una buona scelta se non avevano bisogno di molte modifiche. I vantaggi della facilità d'uso e la comprensione di tutti i membri del team su come utilizzare il framework possono andare persi se è presente un numero enorme di personalizzazioni in atto.

Tutti i siti Web finiscono per sembrare uguali

La colpa per tutti i siti web che iniziano ad avere lo stesso aspetto è stata attribuita alle porte dei ben noti framework CSS. Ho visto siti in cui sono sicuro che sia stato utilizzato un determinato framework, quindi ho scoperto che sono CSS personalizzati, quindi prevalenti sono le scelte di progettazione fatte in questi framework.

La difficoltà di sovrascrivere gli stili di framework già menzionati è una buona parte del motivo per cui i siti sviluppati utilizzando un particolare framework tenderanno ad avere un aspetto simile. Questo non è solo un problema creativo, può essere molto strano come utente di alcuni siti Web che hanno tutti optato per lo stesso framework per sentire che sono tutti la stessa cosa. In termini di veicolare il tuo marchio e di rendere una buona esperienza utente parte di ciò, forse perdi qualcosa quando opti per le scelte generiche di un framework.

Ereditare i problemi CSS del mondo intero

Che si tratti di front o back-end, qualsiasi strumento o framework che cerchi di raggiungere il mainstream deve risolvere il maggior numero possibile di problemi. A meno che lo strumento non sia strettamente associato alla risoluzione di un particolare caso d'uso, conterrà molto codice molto generico e codice che risolve problemi che non hai e non avrai mai.

Potresti trovarti nella fortunata posizione di aver bisogno della tua esperienza completa per essere visualizzata solo nei browser più recenti, consentendo un'esperienza più limitata in Internet Explorer o versioni precedenti di Chrome. L'uso di un framework con molto supporto integrato che risale a IE9 comporterebbe molto codice aggiuntivo, soprattutto visti i recenti miglioramenti al layout CSS. Potrebbe anche impedirti di essere creativo, poiché tutto nel framework presuppone questo requisito per il supporto. Le cose che sono possibili usando i CSS potrebbero essere limitate dal framework.

Ad esempio, i sistemi a griglia nei framework più diffusi non hanno la capacità di estendere le righe, poiché non esiste alcun concetto o riga nei sistemi di layout prima del layout a griglia. CSS Grid Layout lo consente facilmente. Se sei legato a Bootstrap Grid e il tuo designer propone un design che include elementi che si estendono su righe, non sei in grado di implementarlo, nonostante il fatto che Grid possa essere supportato dai tuoi browser di destinazione.

Problemi di prestazione

Relativi a quanto sopra sono problemi di prestazioni inerenti all'utilizzo di codice abbastanza generico, piuttosto che qualcosa di ottimizzato per i casi d'uso esatti che hai. Quando provi a migliorare le prestazioni ti ritroverai a scontrarti con le decisioni del framework.

Aumento del debito tecnico

Mentre un framework potrebbe essere un ottimo modo per far decollare rapidamente la tua startup e al momento di prendere questa decisione sei sicuro che lo sostituirai, esiste un piano per farlo accadere?

Imparare un framework piuttosto che imparare i CSS

Parlando con i partecipanti a conferenze e workshop, ho scoperto che molte persone hanno sempre e solo usato un framework per scrivere CSS. Non c'è niente di sbagliato nell'entrare nello sviluppo web tramite uno di questi strumenti, data la complessità della piattaforma web oggi immagino che sarà la strada per molte persone. Tuttavia, può diventare una scelta che limita la carriera, soprattutto se il quadro su cui hai basato le tue abilità cade in disgrazia.

Avere sviluppatori front-end senza conoscenze CSS dovrebbe preoccupare un'azienda. Rende incredibilmente difficile allontanarsi da quel framework se il tuo team in realtà non capisce come fare CSS senza di esso. Anche se questo non è davvero un motivo per non utilizzare un framework, è qualcosa da tenere a mente quando ne usi uno. Quando arriva il giorno in cui si trasloca, speri che il team sia pronto per affrontare qualcosa di nuovo, senza bisogno di ricordare (o imparare per la prima volta) come scrivere CSS!

La scelta non considera gli utenti finali

Nicole Sullivan ha posto più o meno la stessa domanda alcuni giorni prima della mia domanda mentre stavo pensando di scrivere questo articolo, sebbene stesse considerando i framework front-end nel suo insieme piuttosto che solo i framework CSS. Jeremy Keith ha osservato che esattamente zero delle risposte riguardava gli utenti finali. Questo è stato anche il caso delle risposte alla mia domanda.

Nella nostra corsa per costruire rapidamente il nostro sito, nel nostro desiderio di rendere le cose il più buone possibili per noi stessi come designer e sviluppatori del sito, dimentichiamo per chi lo stiamo facendo? Le decisioni prese dallo sviluppatore del framework corrispondono alle esigenze degli utenti del sito che stai costruendo?

Possiamo sostituire i framework con CSS "Vanilla"?

Se stai pensando di sostituire il tuo framework o di iniziare un nuovo progetto senza uno, quali sono alcune delle cose che potresti considerare per rendere più semplice quel processo?

Comprendi quali parti del framework ti servono

Se stai sostituendo l'uso di un framework con il tuo CSS, un buon punto di partenza sarebbe controllare il tuo utilizzo del framework attuale. Scopri cosa stai usando e perché. Considera come sostituirai queste cose nel nuovo design.

Potresti seguire un processo simile quando pensi se selezionare un framework o scriverne uno tuo. Di quali parti potresti ragionevolmente aspettarti di aver bisogno? Quanto bene si adatta alle tue esigenze? Ci sarà molto codice che importi, che potenzialmente chiedi ai visitatori di scaricare, ma che non utilizzerai mai?

Creare una libreria di modelli o una guida di stile documentata

Sono un grande fan di lavorare con le librerie di modelli e puoi leggere il mio post qui su Smashing Magazine sul nostro uso di Fractal. Una libreria di modelli o una guida di stile consente la creazione di documentazione insieme a tutti i componenti. Inizio tutti i miei progetti lavorando sui CSS nella libreria dei modelli.

Avrai ancora bisogno di scrivere la documentazione, come qualcuno che scrive documentazione, tuttavia, so che spesso la cosa più difficile è sapere da dove iniziare e come strutturare i documenti. Una libreria di modelli aiuta in questo mantenendo i documenti insieme al CSS per il componente stesso. Questo approccio può anche aiutare a evitare che i documenti diventino obsoleti poiché sono strettamente collegati al componente a cui fanno riferimento.

Sviluppa le tue linee guida per il codice CSS

La coerenza all'interno del team è incredibilmente utile e, senza un framework, potrebbe non esserci nulla a dettarlo. Con i metodi di layout più recenti, in particolare, ci sono spesso diversi modi in cui un modello può essere costruito, se ognuno ne sceglie uno diverso è probabile che si insinuino delle incoerenze.

Posti migliori per chiedere aiuto

Oltre a inviare persone nella direzione di Stack Overflow, sembra che ci siano pochissimi posti in cui chiedere aiuto su CSS. In particolare sembrano esserci pochi posti accessibili ai principianti. Se vogliamo incoraggiare le persone ad allontanarsi dagli strumenti di terze parti, dobbiamo soddisfare il bisogno di un supporto amichevole e utile che proviene dalle comunità attorno a quegli strumenti.

All'interno di un'azienda, è possibile che gli sviluppatori più esperti possano diventare il supporto CSS per i nuovi membri del team. Se si passa da un framework alla propria soluzione, sarebbe saggio considerare quale formazione potrebbe essere necessaria per aiutare a colmare il divario, soprattutto se le persone sono abituate a utilizzare l'aiuto fornito attorno allo strumento di terze parti quando avevano bisogno di aiuto in passato .

Guide di stile o punti di partenza per i non designer

Mi lego in nodi con domande come "Quali caratteri dovrei usare?", "Quanto dovrebbero essere grandi le intestazioni in relazione al corpo del testo?", "Va bene usare un'ombra discendente?" Posso facilmente scrivere il CSS, se so cosa sto cercando di fare! Ciò di cui ho veramente bisogno sono alcune regole per realizzare un design non terribile, una sorta di punto di partenza per la tipografia o una serie di linee guida di base che sostituirebbero la possibilità di utilizzare i valori predefiniti di un framework in molti casi.

Educare le persone sullo stato dell'interoperabilità dei browser moderni

Ho scoperto che le persone che sono state immerse nello sviluppo basato su framework per un certo numero di anni, spesso hanno una visione dell'interoperabilità dei browser che è obsoleta di diversi anni. Non siamo mai stati in una situazione migliore in termini di CSS che funzionano su più browser. Può darsi che alcuni browser non supportino un nuovo brillante bit di CSS, ma in generale i CSS (se supportati) non saranno pieni di strani bug. Ad esempio, in quasi tutti i casi, se utilizzi CSS Grid in un browser, il tuo CSS funzionerà esattamente allo stesso modo in un altro.

Se si tenta di addurre un caso per non utilizzare un framework ai membri del team che credono che il framework li salvi dai bug del browser, questo punto potrebbe essere utile da sollevare. I problemi di compatibilità del browser sono reali o basati su preoccupazioni del passato?

Vedremo una nuova razza di framework?

Qualcosa che mi interessa è se i nostri nuovi metodi di layout aiuteranno a inaugurare una nuova generazione di strumenti e framework. Vedremo strumenti che sfruttano i nuovi metodi di layout, consentono una maggiore creatività ma offrono comunque a team e individui alcuni degli innegabili vantaggi che sono emersi dalle risposte al mio tweet.

Forse affidandosi a nuovi metodi di layout, piuttosto che a un sistema di griglia integrato, un framework di nuovo stile potrebbe essere molto più leggero, diventando una raccolta di componenti utili. Potrebbe quindi essere in grado di evitare alcuni dei problemi di prestazioni inerenti al codice molto generico.

Un'area in cui un framework potrebbe aiutare sarebbe aiutare a creare solidi fallback per i browser che non supportano i metodi di layout più recenti o avere un'accessibilità davvero solida incorporata nei componenti. Questo potrebbe aiutare a fornire una guida in un modo di lavorare che tenga conto dell'interoperabilità e dell'accessibilità, anche per quelle persone che non hanno queste cose in prima linea nella loro mente.

Non credo che il semplice passaggio della griglia Bootstrap per CSS Grid Layout otterrà questo risultato. Invece, gli autori che escogitano nuovi framework, dovrebbero forse esaminare alcuni dei motivi qui delineati e cercare di risolverli in nuovi modi, usando le nuove funzionalità che abbiamo nei CSS per farlo.

Dovresti usare un framework?

Tu e il tuo team dovrete rispondere a questa domanda da soli. E, nonostante ciò che le persone potrebbero provare a farti credere, non esiste una risposta universale giusta o sbagliata. C'è solo ciò che è giusto o sbagliato per il tuo progetto. Spero che questo articolo e le molte risposte alla mia domanda originale possano darti alcune cose di cui discutere mentre rifletti su quella domanda.

Ricorda che la risposta cambierà nel tempo. Potrebbe essere un utile esperimento mentale non solo considerare ciò di cui hai bisogno in questo momento, in termini di sviluppo iniziale del sito, ma anche la durata del sito. Ti aspetti che questo sia ancora in circolazione tra cinque anni? La tua scelta sarà quindi positiva o negativa?

Documenta le tue decisioni, non aver paura di rivederle e assicurati che tu e il tuo team mantenete le vostre capacità al di fuori di qualsiasi struttura che decidete di utilizzare. In questo modo, sarai in un buon posto per andare avanti in futuro e per prendere le migliori decisioni per le fasi successive del tuo progetto.

Mi piacerebbe che la conversazione iniziata in quel tweet continuasse. Facci sapere le tue storie nei commenti: potrebbero aiutare altre persone a cercare di capire cosa è meglio per i loro progetti in questo momento.