Cosa fanno gli sviluppatori CSS e perché ne hai bisogno

Gli sviluppatori CSS sono professionisti del Web la cui responsabilità principale è fornire un prodotto raffinato e con uno stile al browser del visitatore. Praticamente tutti i siti Web utilizzano i CSS, ma spesso i CSS non sono considerati "uguali" nel moderno stack di sviluppo web. Sfortunatamente, questa errata percezione può portare a dare per scontato i CSS o addirittura trascurarli in una certa misura.

Consentire agli sviluppatori non CSS di gestire i CSS spesso comporta l'introduzione di hack e bug CSS nel codice e può causare inutili frustrazioni agli sviluppatori. In questo articolo, vorrei familiarizzare tutti con ciò che il lavoro comprende in modo da poter comprendere meglio il motivo per cui ogni sito ha bisogno di uno sviluppatore CSS affidabile e professionale.

Cosa fanno gli sviluppatori CSS?

Cominciamo con le basi. Perché i CSS sono così importanti e cosa dovrebbero fare esattamente gli sviluppatori CSS?

CSS è un linguaggio specifico e, come tale, non può esistere da solo. Richiede HTML per avere un senso. Quindi, la prima cosa che fanno gli sviluppatori CSS è scrivere codice HTML.

Scrivere un HTML ordinato è sempre importante

Scrivere un HTML semplice, pulito e adeguatamente organizzato è una grande responsabilità perché l'umile documento HTML è la prima cosa che fornisci ai tuoi utenti finali.

Se stai scrivendo un documento HTML pronto per la produzione, dovresti assicurarti di includere tutti i tag obbligatori e facoltativi nell'intestazione del documento per ottenere il massimo dal tuo sito web. Sto parlando di impostare il corretto doctype, lingua, meta tag, favicon, tecniche di caricamento e SEO.

Tutto ciò che potrebbe aiutare a rendere il tuo sito Web più performante, più accessibile e fornire maggiore visibilità al tuo pubblico e ai motori di ricerca, nonché ad altri servizi e strumenti. Anche il corpo del documento HTML non dovrebbe essere gonfio. Sapere quando utilizzare i tag HTML semantici, come aggiungere gli attributi HTML richiesti e come evitare il deep nesting o la divitis, non dovrebbe essere ignorato, ma piuttosto implementato fin dall'inizio del progetto. Nessuno sviluppatore professionista inizia a seguire le migliori pratiche a metà del progetto, ma anche le cose apparentemente basilari come l'HTML sono spesso sbagliate.

Il design generale spesso determina il modo in cui organizziamo i vari componenti HTML. Gli sviluppatori CSS lavorano a stretto contatto con i designer e non tutti i designer utilizzano lo stesso strumento per fornire il design. Avere familiarità con Sketch, Photoshop, InVision o Figma ed essere in grado di "tagliare" il design sono abilità indispensabili per gli sviluppatori CSS. Bisogna sempre tenere a mente come strutturare un componente per rendere possibile l'applicazione del design allo stesso tempo. L'uso di una buona convenzione di denominazione, come BEM o OOCSS, dovrebbe impedire di scrivere codice HTML gonfio o codice CSS non mantenibile.

JavaScript è ovunque

Alcuni componenti dovrebbero essere interattivi, come modali o suggerimenti. Ciò spesso richiede una buona conoscenza di JavaScript, non di JavaScript "profondo", ma di eventi JavaScript e gestione del DOM. La gestione del DOM potrebbe essere difficile perché non vuoi prosciugare le risorse del tuo utente e rendere il tuo sito Web lento o, peggio ancora, bloccarlo e renderlo completamente non rispondente.

Il mondo JavaScript si sta evolvendo rapidamente ea volte sembra che nuovi framework e strumenti appaiano ogni giorno. A causa dell'immensa popolarità di JavaScript, rimanere aggiornato è fondamentale se si desidera utilizzare le best practice più recenti e offrire l'esperienza più piacevole agli utenti finali.

CSS

Questo vale anche per CSS, anche se molti sostengono che non si evolva quasi allo stesso ritmo di JavaScript. Tuttavia, le nuove funzionalità come le variabili CSS, la griglia CSS o persino Flexbox richiedono del tempo per essere padroneggiate.

Poi, c'è il supporto del browser, che può ancora rappresentare un problema anche oggi. Il tuo sito potrebbe sembrare un milione di dollari in un browser moderno, ma non tanto nei browser legacy. Flexbox potrebbe essere supportato in IE11, ma anche in questo caso potrebbe non funzionare come previsto. Sapere come evitare questi problemi fa parte del lavoro di uno sviluppatore CSS.

Per fortuna, la community è molto utile e siti come Flexbugs o Gridbugs possono risparmiare molto tempo.

Strumenti, tecniche e principi CSS

A volte potremmo fare affidamento su strumenti come task runner o bundler come Grunt, Gulp e webpack per aiutarci a fornire codice affidabile. Puoi potenziare il tuo codice con linters, minifiers, babel o PostCSS per trascrivere il codice.

Quindi dobbiamo prendere in considerazione vari tipi di carattere, tipografia, immagini, icone, caratteri di icone, animazioni, transizioni e altri aspetti astratti che fanno parte delle attività quotidiane degli sviluppatori CSS. Ogni singola caratteristica ha le sue specificità, limiti, problemi e soluzioni. Più funzioni e tecniche acquisisci padronanza, più facile sarà definire e implementare i componenti nel tuo progetto.

C'è un numero significativo di proprietà e valori CSS e non si può sapere tutto. Fortunatamente, i nostri strumenti ci aiutano, in particolare gli editor di codice e gli strumenti di sviluppo. Tuttavia, anche gli strumenti non possono aiutare a risolvere il mal di testa quando è necessario risolvere un problema di z-index. Fallire è il modo migliore per imparare.

Direi che questo è particolarmente vero quando si lavora con CSS, ed è per questo:

Se non hai mai provato a risolvere il problema di z-index, non impareresti mai lo stacking del contesto. Se non hai mai provato a sovrascrivere la classe Bootstrap, non imparerai mai la specificità. Se non hai mai provato a risolvere il problema del galleggiante, non verresti mai a conoscenza del modello a scatola.

A volte, la soluzione è semplice, ma solo porre una domanda è difficile. Rispetto ad altre lingue, non puoi chiedere perché il mio loop non funziona. Hai bisogno del contesto completo per risolvere il problema in CSS, e questo è spesso qualcosa che molti non capiscono: la cascata .

Cascade è la migliore funzionalità dei CSS e dovrebbe funzionare per te, non contro di te. Alcuni sviluppatori lo aggirano inventando approcci personalizzati come CSS-in-JS. Se impacchetta il tuo CSS nell'ambiente incapsulato come React, non puoi usarlo altrove. Dubito che questo sia l'approccio che desideri nella tua piattaforma scalabile. Se hai problemi con la cascata, impara ad abbracciarla e poi impara a domarla.

Mentre stavo preparando questo articolo, Max Bock ha scritto della mentalità CSS, e questo è esattamente ciò che gli sviluppatori CSS devono fare. Gli sviluppatori CSS pensano all'interno degli schemi, prevedono le modifiche ai contenuti ed evitano i numeri fissi quando possibile mentre cercano di scrivere meno codice possibile senza sovrascrivere i valori e il contesto predefiniti.

Perché hai bisogno di uno sviluppatore CSS?

La maggior parte degli sviluppatori frontend o addirittura full-stack potrebbe scrivere il codice CSS. Ma non tutti potrebbero correggere ogni bug CSS o implementare il design senza contorcere codice HTML o fare affidamento su JavaScript dove non è necessario.

Uno sviluppatore CSS professionista cura il codice nei minimi dettagli, si diverte a creare layout e componenti, anche i più complicati, e sa come risolvere ogni problema o bug.

Standard di codifica CSS

Prima di scrivere qualsiasi codice, è generalmente una buona idea avere alcune regole di base sulla scrittura del codice. Gli sviluppatori CSS dovrebbero rispettare lo standard di codifica: è essenziale per la manutenibilità e la scalabilità del progetto.

Scegli quale convenzione di denominazione utilizzare durante il progetto. Stabilire una convenzione di denominazione all'inizio può aiutare gli sviluppatori a produrre codice migliore e più organizzato. Può anche aiutare tutte le persone coinvolte nel progetto a comprendere la struttura dei componenti e la relazione tra componenti ed elementi leggendo solo il codice HTML.

Decidi come gestire il rientro, i tipi di selettore, le proprietà abbreviate, le unità nei CSS. Ad esempio, evitare di utilizzare unità pixel se lo standard di codifica propone l'utilizzo di unità rem. Ognuno ha uno stile di scrittura/codifica distinto, ma come professionista devi essere in grado di adottare e, soprattutto, comprendere ogni concetto.

Implementazione della progettazione CSS

Prima di convertire il progetto in codice, dovresti dedicare del tempo a comprendere ogni pagina, layout e componente. Se possibile, analizza ogni pagina, crea un elenco di pagine e componenti e prova a trovare uno schema.

Se noti un componente presente su più pagine, dovresti riconoscere l'ambiente circostante e provare a considerarlo un componente autonomo. Se ci sono componenti simili, come carte o liste, potresti avere una variante dello stesso componente. In questo modo potresti riutilizzare il codice HTML e scrivere solo un po' di codice CSS per farlo sembrare modificato.

È anche una buona idea cercare di trovare schemi in altre aree, come la tipografia e la spaziatura. A volte questo porta ad avere classi di supporto che potrebbero essere utilizzate nell'intero progetto piuttosto che nelle singole pagine.

Organizza il tuo codice CSS

Gli sviluppatori CSS dovrebbero organizzare il loro codice e creare una struttura significativa per tutti. Quando si utilizzano strumenti come i processori CSS, gli sviluppatori CSS dovrebbero documentare il processo di generazione del codice compilato.

Se necessario, gli sviluppatori CSS possono creare guide di stile. Le guide di stile possono essere un riferimento quando si creano nuove pagine o si decide come avvicinarsi a quelle esistenti. Il mio consiglio è di rendere la guida di stile disponibile a livello globale per l'intero team perché spesso è molto più facile prendere una decisione quando si ha un contesto visivo. Le guide di stile possono contenere tavolozze di colori, regole tipografiche, standard di codifica e persino pagine statiche. Non ci sono limiti, tranne il budget e la tua immaginazione.

Codice CSS in produzione

La scrittura di codice CSS implica la gestione di problemi cross-browser, bug, animazioni, transizioni, reattività e stili di stampa. Molte di queste funzionalità non sono facilmente gestibili dagli sviluppatori a tutto tondo. Andrei così lontano e direi che queste sono le attività CSS meno preferite in generale e non tutti gli sviluppatori sanno come gestirle. D'altra parte, gli sviluppatori CSS specializzati sanno (o almeno dovrebbero sapere) come produrre codice tenendo presente ogni bug, browser e ambiente.

L'uso di approcci moderni è una strada da percorrere, ma non si dovrebbe nemmeno ignorare il supporto dei browser più vecchi e il rispetto delle impostazioni dell'utente come i movimenti ridotti.

Gli sviluppatori CSS scrivono anche codice HTML e JavaScript. Ciò significa che la consegna delle risorse è responsabilità dello sviluppatore CSS. Gli sviluppatori CSS dovrebbero essere responsabili del caricamento dei caratteri, dell'estrazione di CSS critici, dell'utilizzo del caricamento JavaScript differito e asincrono e della fornitura di immagini reattive.

Nessuna di queste tecniche è facile da implementare e non esiste un proiettile d'argento.

Cosa possono fare per te gli sviluppatori CSS

Tutto quanto sopra spiega perché hai bisogno di uno sviluppatore CSS dedicato. Ecco solo alcune delle cose cruciali che gestiscono:

• Assicurati che ogni membro del progetto si attenga allo standard di codifica
• Implementare la progettazione
• Organizza il codice
• Scrivi il codice
• Correggi i bug
• Impara nuove tecniche
• Migliora il codice

Avvolgendo

Per troppo tempo, la questione dell'esistenza e dell'importanza del ruolo degli sviluppatori CSS ha incoraggiato discussioni non particolarmente costruttive e ben intenzionate. Cerchiamo di essere d'accordo e riconoscere lo sviluppatore CSS come un ruolo adeguato una volta per tutte.

Nel suo articolo, The Great Divide , Chris Coyier cita alcuni dei leader tecnologici e la maggior parte di loro concorda sul fatto che dovrebbe esserci una divisione, dovrebbe esserci un ruolo basato sui CSS che non richieda la conoscenza dei moderni framework JavaScript. Potrebbe essere utile sapere più di "solo CSS", ma il ruolo dovrebbe esistere e dovrebbe essere accettato come uguale ai ruoli basati su JavaScript.

Dopotutto, vuoi lasciare il tuo prodotto nelle mani di un professionista specializzato che potrebbe lucidarlo alla perfezione, o ti accontenteresti di una qualità sufficiente ?

Ulteriori letture sul blog di Toptal Engineering:

• Come avvicinarsi alle animazioni SVG nei CSS