I 5 migliori strumenti CSS per sviluppatori Web e designer

I CSS hanno fatto molta strada, ma gli strumenti che li circonda non lo sono stati finora.


Se ritieni che scrivere CSS sia come combattere i mostri in una buca, non sei solo. Mentre il CSS è una delle tecnologie più fondamentali che alimentano il Web, non è di per sé un linguaggio di programmazione o un framework adeguati. Di conseguenza, non appena il tuo progetto inizia a diventare più prominente, anche il disordine – le regole di selezione sembrano essere ovunque, ed è difficile trovare dove si trova; man mano che includi font, CSS esterni, JS e altre risorse sulle tue pagine, la dimensione finale del bundle sembra sfuggire di mano e ti chiedi dove si sono persi gli ideali di front-end veloci e facili da usare.

Ma non è necessario che sia così. Oggi gli strumenti attorno ai CSS si sono evoluti a un livello che il flusso di lavoro non può solo essere domato ma reso anche divertente. In questo articolo parlerò di cinque strumenti CSS che ho trovato di immenso valore nel mio lavoro. Ho evitato consapevolmente, compresi strumenti “giocattolo” come generatori CSS, generatori di menu, ecc., Perché creano più problemi di quanti ne risolvano.

Il treno CSS sta arrivando! Andiamo! �� ��

PostCSS

Se ami JavaScript, ti piacerebbe l’idea che ora possiamo aggiungere e controllare CSS tramite JavaScript. E questa è esattamente l’abilità che PostCSS fornisce.

Tuttavia, non si tratta semplicemente di zucchero di sintassi basato su JavaScript su CSS. PostCSS racchiude insieme numerosi pacchetti / funzionalità potenti, risultando in un flusso di lavoro molto più piacevole e più facile quando si tratta di CSS. Per esempio:

  • I prefissi del fornitore vengono aggiunti automaticamente in base alla proprietà che stai utilizzando.
  • La capacità di rilevare quali funzioni CSS possono essere utilizzate nel browser corrente.
  • Utilizzando gli aggiornamenti di sintassi imminenti, ancora da rilasciare, ma molto potenti per CSS.
  • Una griglia reattiva che è flessibile come si arriva.

Penso che non renderò giustizia a PostCSS se non includo l’esempio della griglia. Quindi eccoci. Qualcosa di così semplice:

div {
colonna perduta: 1/3
}

viene convertito in un sistema CSS completo con quasi tutti i casi limite risolti:

div {
larghezza: calc (99,9% * 1/3 –
(30px – 30px * 1/3));
}
div: nth-child (1n) {
galleggiante: a sinistra;
margine destro: 30px;
chiaro: nessuno;
}
div: last-child {
margine destro: 0;
}
div: nth-child (3n) {
margine destro: 0;
galleggiante: a destra;
}
div: nth-child (3n + 1) {
chiaro: entrambi;
}

Dal momento che è una cosa basata su JS, PostCSS non è esattamente facile da configurare, soprattutto se sei un designer e non hai molto a che fare con moduli, bundler e il mondo npm in generale. Detto questo, il potenziale di PostCSS nel tuo lavoro è enorme e non dovrebbe essere trascurato.

PurgeCSS

Ti piace il flusso di lavoro moderno basato su framework frontend ma sei frustrato dal fatto che portano troppo bagaglio in giro? Se sì, PurgeCSS è tuo amico, almeno per quanto riguarda i CSS.

Per coloro che potrebbero non sapere qual è il grosso problema: ecco una rapida carrellata. Quando si creano applicazioni a pagina singola utilizzando framework front-end come React, Angular, Vue, ecc., Si passa attraverso quello che viene chiamato un “processo di creazione”. In sostanza, codifichi tutti i tuoi CSS, JS, SASS, ecc., In file separati (organizzandoli come ritieni più intuitivi), ma una volta che hai finito, dici al bundler di “costruire” la cosa. Ciò che fa è leggere tutto il codice sorgente che hai scritto, applicare vari filtri (minificazione, offuscamento / uguaglianza, ecc.) E sputare l’output in singoli file, di solito “app.js” per tutto il JavaScript, e “App.css” per tutto il CSS. Questi file, insieme a un magro “index.html”, sono tutto ciò che serve per eseguire il front-end dell’applicazione. Il rovescio della medaglia è che dal momento che tutto viene incluso in questi file finali, le loro dimensioni spesso si estendono oltre ciò che è consentito per tempi di risposta rapidi; ad esempio, non è raro vedere un “app.js” che supera i 500 KB!

PurgeCSS viene aggiunto come parte del flusso di lavoro della build e impedisce che i CSS inutilizzati vengano raggruppati nell’output finale. Un caso d’uso tipico è Bootstrap: è una libreria di medie dimensioni con diverse classi di interfaccia utente per diversi componenti. Se la tua applicazione utilizza, diciamo, il 10% delle classi di Bootstrap, il restante 90% è l’unico gonfio nel tuo file CSS finale. Ma grazie a PurgeCSS, tali file CSS inutilizzati possono essere identificati e impediti dal processo di generazione, risultando in file CSS finali molto più piccoli (la riduzione della dimensione di 5-6 volte è abbastanza normale).

Quindi, vai avanti, “elimina” i CSS non necessari con PurgeCSS! ��

Tailwind

Tailwind è un framework CSS, ma va così controcorrente che ho pensato di includerlo qui tra gli strumenti CSS. Se odi i CSS in linea (chi non lo fa ?!), molto probabilmente Tailwind ti farà indietreggiare per l’orrore la prima volta che lo incontri. Diamo un primo assaggio osservando come potresti codificare un modulo tipico usando Tailwind CSS:

Nome utente

Parola d’ordine

Scegli una password.

Registrati


Ha dimenticato la password?

© 2019 Acme Corp. Tutti i diritti riservati.

“È uno scherzo o cosa ?! Cosa sono tutte quelle fastidiose piccole classi? A un esame più attento, perché diavolo sto impostando i margini, il riempimento e il colore direttamente insieme all’HTML? È questo 2019 o cosa? ”

Sono attesi pensieri come questi. Lo so perché ho provato la stessa cosa e ho immediatamente chiuso il coperchio di Tailwind. Solo più tardi mi sono imbattuto in un podcast in cui l’ospite aveva rifatto un sito Web di tendenza, di dimensioni decenti in Tailwind, che ho iniziato a prestare attenzione.

Prima di procedere oltre, considera queste domande:

  • Sei stanco di memorizzare le classi di framework standard e le loro funzioni in modo da poter personalizzare i tuoi progetti a tuo piacimento? Un buon esempio sta cambiando l’aspetto e il comportamento della barra di navigazione Bootstrap.
  • Pensi che quadri popolari come Bootstrap siano eccessivi e cerchi di fare molto di più di quanto dovrebbero?
  • Ti ritrovi a mescolare quadri perché vuoi il meglio di tutti i mondi?
  • Ti piace avere un maggiore controllo sui tuoi progetti e tuttavia trovare l’esperienza CSS vaniglia travolgente?

Se la risposta a una di queste è un “sì”, hai davvero bisogno di Tailwind. Ora diamo un’occhiata a cos’è Tailwind e cosa fa.

Tailwind è quello che viene chiamato un CSS prima di tutto, che differisce da quello che facciamo nei nostri flussi di lavoro quotidiani: CSS semantico. La differenza tra CSS semantico e CSS di utilità è che il primo cerca di raggruppare gli elementi di stile in base al nome delle sezioni visive che appaiono sulla pagina. Quindi, se hai un menu di navigazione, carte, carosello, ecc., Su una pagina, il modo semantico di fare le cose sarebbe di raggruppare le regole di stile CSS in classi come .nav, .card, .carousel, ecc., Che le loro sottosezioni etichettate di conseguenza (ad esempio, .card-body, .card-footer, ecc.). Questo è di gran lunga l’approccio più comune ai CSS e tutti ne abbiamo familiarità con framework come Bootstrap, Foundation, Bulma, UI Kit, ecc..

D’altra parte, lo stile “utility” di scrivere le classi dei nomi CSS proprio in base alla loro funzione: una classe che controlla il margine per i lati superiore e inferiore verrà denominata .margin-y-medium e può essere applicata ovunque nell’HTML markup dove è necessario questo margine. Mentre questo introduce in qualche modo un creep di nome di classe (basta dare una rapida occhiata al codice che ho condiviso prima o allo screenshot – così tante classi!), L’intento del CSS è cristallino: non è necessario saltare avanti e indietro tra la documentazione, il tuo CSS e il tuo HTML per capire i nomi giusti e l’effetto giusto.

È un modo di lavorare molto liberatorio, ma c’è anche un problema: devi avere le tue basi CSS ben posizionate (compresi concetti moderni come il Flexbox). Questo perché Tailwind non offre stili predefiniti per i componenti della tua pagina e sta a te costruire gli stili dai blocchi predefiniti. Un altro problema è quello dell’installazione: Tailwind ti consente di raggruppare diverse classi CSS in quelli che vengono chiamati componenti, ma è fatto tramite JavaScript e richiede un caricatore di moduli e un bundler come Webpack.

Detto questo, Tailwind è un nuovo modo polarizzante e sorprendente di fare styling e si rivolge a coloro che desiderano maggiore semplicità e controllo.

Saas

Sebbene insolenza è in circolazione da molto tempo, l’ho incluso qui perché gli sviluppatori non sanno ancora quanto sia utile. Stylistically Awesome Style Sheets (o SASS) è un superset di CSS che è stato sviluppato per domare la follia che si insinua nel progetto una volta che CSS cresce oltre alcune righe.

Immagina: hai fatto molta strada per scrivere il CSS per il tuo progetto. Stai utilizzando alcuni colori, hai individuato alcuni margini sensibili per vari div, stili di carattere e così via. Solo che ora ti rendi conto che non tutto si blocca così bene. Forse ti piacerebbe provare margini più ampi per tutte le sezioni, schede e pulsanti. Bene, e adesso? Anche l’idea stessa di dover cercare-sostituire attraverso il tuo file CSS gigante è sufficiente per dare un mal di testa. Lo abbiamo fatto tutti e sappiamo tutti quanto è soggetto a errori. Sass risolve questo problema introducendo variabili:

Quando scriviamo HTML, annidiamo elementi all’interno di altri elementi. Ma quando scriviamo CSS, dobbiamo scrivere una gerarchia piatta di regole, che rende difficile “mentalmente” adattare il CSS all’HTML. Con Sass, puoi imitare la struttura della pagina all’interno dei tuoi file di stile:

Tutto ciò non inizia nemmeno a graffiare la superficie delle chicche che Sass offre: design modulare, include file, mixin, eredità. . . La lista potrebbe continuare all’infinito. Certo, dovrai imparare un flusso di lavoro del compilatore Sass e includerlo nel tuo, ma a mio avviso, quel paio di ore trascorse è un investimento che ti ripagherà continuamente!

Linter CSS

Dato che i web designer (e gli sviluppatori dell’interfaccia utente – anche se mi chiedo come siano diversi questi due termini ��) usano semplici editor di testo – o come è il caso in questi giorni, codice direttamente dagli strumenti di sviluppo di Chrome – raramente vengono a conoscenza o beneficiano di un Linter. D’altra parte, i programmatori che usano buoni editor di testo come VS Code, Sublime Text o altri IDE conoscono molto bene questo strumento poiché per loro è una seconda natura. Ad ogni modo, il punto è che se sei uno di quegli sviluppatori CSS che viene annegato in un disordinato CSS, potresti beneficiare di una linter.

In poche parole, una linter è un programma che controlla il tuo codice per errori e incongruenze. Lo fa con l’aiuto di una serie di regole che ha per capire cosa è sbagliato e cosa è incoerente. I buoni linter si integrano con gli IDE e gli editor di codice e possono essere configurati per essere eseguiti ogni volta che si salva il file di origine. Ti aiutano anche con anteprime a colori, errori e completamento automatico mentre componi i tuoi file CSS:

Ma ecco la parte migliore: se segui uno stile e una formattazione CSS specifici, puoi modificare la linter con soddisfazione. Ciò garantisce che il CSS all’interno di un progetto segua la stessa guida di stile (la linter può anche essere configurata per formattare automaticamente il file ogni salvataggio / commit del codice sorgente). Quindi, che tu stia lavorando in gruppo o da solo, una linter è sempre un’ottima aggiunta al flusso di lavoro del tuo progetto.

Conclusione

Sono sicuro che ormai sei convinto che il moderno sviluppo CSS sia molto diverso dall’approccio del pastorizia del passato. ��

Detto questo, lo ammetterò di nuovo, anche se sembro un disco rotto: alcuni degli strumenti che ho trattato in questo articolo non sono facili da configurare, specialmente se non sei in buoni rapporti con l’ecosistema npm . Ma prima di sentirti disgustato e distogliere lo sguardo, dimmi questo: era CSS facile quando eri il primo apprendimento vero? È stato facile imparare a centrare un div, a padroneggiare gli sbalzi d’umore dei galleggianti e così via? Allo stesso modo, gli strumenti che ho descritto qui hanno una curva di apprendimento, ma ne vale la pena.

Onestamente, una volta che hai iniziato a sperimentare i risultati, ti prenderai a calci per non averlo fatto prima. E non sottostimiamo l’importanza del CSS che sia modulare, snello e ben organizzato!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map