Usare il CSS nel modo corretto

Post del 17 Marzo 2021 in Developer

Nonostante il mio ruolo di Full Stack, ho sempre amato dare attenzione ai dettagli, dopotutto molti clienti, è proprio a quelli che badano, subito dopo aver valutato il vostro prezzo.

Meno JS e più CSS

Ho sempre amato JavaScript. Io che cerco sempre di salvaguardare le risorse del Server, non mi faccio mai problemi quando si tratta di scaricare responsabilità direttamente al Client. Per alcuni progetti particolarmente pesanti, dove è intenso l’utilizzo del Server, magari con query belle sostanziose, delegare alcuni calcoli al browser è la scelta migliore.

Ma è sempre bene sapere che, a volte, non è necessario fare tutto con JS.

Normalize CSS

Grazie a Normalize.css è possibile permettere ai browser di visualizzare gli elementi in modo più coerente con gli standard più moderni. È sufficiente inserirlo direttamente all’inizio del proprio codice ed il gioco è fatto.

<link rel="stylesheet" href="(...)/normalize.min.css">

Autprefixer CSS

Per assicurarsi una migliore compatibilità tra i vari browser, una volta che ho terminato di scrivere tutte le regole necessarie dei miei fogli di stile, utilizzo questo pratico tool. Basta copiare il nostro intero codice CSS e in cambio ci verrà restituito lo stesso codice, ma con tutti gli autoprefix necessari.

Variabili CSS

Molto spesso ad esempio ho trovato parecchio utile l’utilizzo delle “variabili” nel CSS.

body{
  background: #007cba;
}
h2{
  border-bottom: 2px solid #007cba;
}
.text{
  color: #007cba;
  background: #fff;
}

In questo modo, oltre a mantenere una certa coerenza nel codice, è anche possibile modificare in modo molto più rapido tutti i colori all’interno di tutte le classi.

:root{
  --blue: #007cba;
  --white: #fff;
}
body{
  background: var(--blue);
}
h2{
  border-bottom: 2px solid var(--blue);
}
.text{
  color: var(--blue);
  background: var(--white);
}

Utilizzando il :not(), la soluzione è estremamente più rapida.

.nav li:not(:last-child){
  border-bottom: 1px solid #ccc;
}

Unificare le regole uguali

Per rendere il codice più “asciutto” è buona norma dare una bella pulita.

.menu li{
  color: #c22222;
}
.menu li a{
  color: #c22222;
}

In questo modo, il codice diventa semplicemente:

.menu li, .menu li a{
  color: #c22222;
}

Nascondere dettagli solo per l’ultimo elemento di una lista

Se voglio inserire una piccola linea sotto ogni elemento di una lista, posso utilizzare :not() per evitare di creare due regole differenti.

.nav li{
  border-bottom: 1px solid #ccc;
}
.nav li:last-child{
  border-bottom: none;
}

CSS Minifier

Infine, se si vogliono ottenere dei miglioramenti in fase di caricamento, è possibile effettuare un “minifier”, in questo modo il codice CSS verrà compattato, facendo risparmiare spazio e tempo di caricamento. Ovviamente però, una volta che il codice sarà compresso, risulterà molto più difficile leggerlo, anche se esistono anche tools per scompattarlo.

Tool compattamento codice:
https://cssminifier.com/

Tool scompattamento codice:
https://unminify.com/

L'Alchimista tecnologico

Mi chiamo Cristian, sono l’autore di questo blog e realizzo software e siti web da più di 10 anni.

Creazione sito web

Hai bisogno di un sito web? Dai un'occhiata alle soluzioni che abbiamo sviluppate sino ad ora.

Creazione software

Le soluzioni che abbiamo sviluppato rispettano sempre standard di qualità e prestazioni elevati.