Scrivere CSS come un pro 🚀

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

DevLorenzo ・ Mar 2 ・ 15 min read

#productivity #webdev #beginners #javascript

Hello world! Oggi vedremo come scrivere il un codice CSS in modo più efficace con particolare attenzione alla leggibilità e riusabilità.

Organizzazione generale:

• Come quando hai scritto un tema per la scuola, dovevi iniziare dal più semplice o dal più grande fino al più piccolo, al più sottile. Quindi anche quando scrivi in CSS, ti consiglio di iniziare sempre con i contenitori e poi di applicare lo stile ai singoli elementi. Scrivi il tuo codice dal più grande element al più piccolo.

• È anche meglio scrivere il tuo CSS diviso in sezioni con un titolo (in forma di commento) che puoi facilmente richiamare durante la codifica. Ogni sezione deve iniziare con classi generali dalla più grande alla più piccola. Quindi hai tutti gli ID che seguono questa stessa classe. E poi gli attributi all'interno di questi ID.

• Ti consiglio anche di avere un'organizzazione speciale all'interno di ogni elemento quando inserisci i tuoi attributi. Non devi seguire sempre lo stesso schema, ma ricordati di passare dalle cose esterne (più grandi) a quelle più piccole ed extra. Di solito mi piace iniziare con il posizionamento (posizione, margine ...), poi la dimensione, il riempimento, le cose contenute (come testo o sfondo) e finire con gli attributi "speciali" (come bordo, ombra...). Avendo sempre più o meno lo stesso modello, sarà più facile recuperare il vecchio codice e cercare una particolare proprietà che desideri modificare.

Classi e ID

La prima cosa che devi ricordare sulle classi e sull'id è che le classi sono plurali e id è singolare. Quindi le classi sono divise tra molteplici elementi mentre che gli Id descrive in modo unico un particolare elemento. Per esempio puoi dare a tutti i titoli in un sito web una classe "title" e poi applicare uno stile particolare a ciascuno con un ID che richiami la posizione e l'utilità (come "FirstTitle", "ContactUsTitle", "FooterTitle"). Ti consiglio anche di iniziare sempre a scrivere le classi e poi gli Id in ordine di apparizione visiva. Una buona gestione di questi ti aiutera a rimanere DRY (don't repeat yourself, not ripeterti) nel tuo codice.

Commenti

I commenti sono molto importanti per te, siaper poter rileggere il tuo codice che per altri sviluppatori quando lo leggono. Ti aiuta anche a recuperare facilmente parte del codice (con ctrl + f + ricerca del titolo di un commento). Quindi ti consiglio di inserire un commento ogni volta che cambi parte nel sito web (intestazione, sezione 1, sezione 2...). Ricorda solo di non abusare dei commenti (a volte è sufficiente un ottimo nome per gli elementi).

Altro:

• Le animazioni dovrebbero essere scritte subito dopo quando lo chiami. Cerca di non superare cinque passaggi (0%, 25%, 50%, 75%, 100%). Non hai quasi mai bisogno di altri passaggi. Anche tre dovrebbero normalmente bastare.

• Per un sito Web responsive, ti consiglio di scrivere le tue 5 media query alla fine del sito e poi di modificarle una alla volta. Se sei interessato, controlla questo articolo su come rendere responsiveun sito web (come funzionano i media query).

• È anche importante avere un buon autocomplete e conoscere le principali abbreviazioni, guadagnerai molto tempo. Puoi installare alcune estensioni per questo, specialmente usando VS code.

• È anche importante utilizzare meno !Important. Se il tuo CSS è ben organizzato, non ne avrai mai veramente bisogno.

• È importante ma non cruciale per te imparare a usare i preprocessori, come il SCSS, guadagnerai tempo e il tuo codice apparirà più pulito. Se non vuoi impararlo completamente, prova almeno a leggerlo (non dovrebbe volerci molto), hai alte possibilità di incontrarlo. SCSS ti aiuta a restare DRY nel tuo codice.

• Ti consiglio di includere per impostazione predefinita nel tuo HTML un link per il codice di ripristino CSS. Puoi trovarlo qui.

• Non usare mai lo stile inline, creano solo confusione e problemi quando si vuole poi modificare la webpage.

• Se stai facendo un tutorial o mostrando un particolare elemento prova a evidenziare la parte importante mettendola all'inizio del programma, quindi aggiungi il resto (che non è cruciale per l'animazione) dopo una netta separazione.

• La formattazione è importante, non puoi definire un elemento in una riga. Dividi sempre le parentesi graffe {} (non in una sola righa) e tutti i diversi attributi.

• Ti consiglio di scrivere il codice che usi più volte in fogli esterni (come la navbar o il footer) che puoi poi aggiungere a tutte le pagine del sito. Ricorda che è sempre meglio avere più fogli di stile piccoli che fogli di stile grandi e disordinati.

• So che questo è fondamentale, ma ricorda sempre che Google è il tuo migliore amico. Non devi sapere tutto a memoria, ma devi sapere come trovare le cose di cui hai bisogno. D'altra parte, devi conoscere alcune nozioni di base durante la codifica, come il modo in cui il browser elabora il codice CSS o come funzionano i flexbox...

• Ti consiglio anche di stare attento a come tieni i tuoi diversi fogli di stile (i file). Dagli sempre un nome in modo intelligente disponendoli in cartelle diverse per ogni pagina (in coppia con HTML e Javascript). Tieni anche una cartella extra per i fogli di stile ricorrenti (che hai su tutte le tue pagine).

• Prova a mantenere le cose chiare. Non devi dimostrare di essere un professionista della matematica con un'equazione di due righe per dire solo che il tuo div deve essere lungo 5px. Tu o ogni altro sviluppatore dovete poter guardare il tuo codice e capire immediatamente cosa stai facendo e perché lo stai facendo.

* Non usare troppo "px", è meglio usare em e rem per un sito più responsive. Anche se tieni a mente che a volte è meglio usare px.

Spero ti sia d'aiuto.

Mi ci è voluto un po' per scrivere e tradurre questo articolo, quindi ricordati di lasciare un mi piace e seguirmi per articoli futuri. Condividilo anche con i tuoi amici e altri sviluppatori, è molto importante per me 😄

Versione inglese:

How to write CSS like a pro

DevLorenzo ・ Feb 10 ・ 4 min read

#css #productivity #webdev #codequality

Lettura consigliata:

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

DevLorenzo ・ Mar 2 ・ 15 min read

#productivity #webdev #beginners #javascript