Come scrivere CSS – parte 3

Continuiamo l’argomento di “Come scrivere CSS” ...

Continuiamo l’argomento di “Come scrivere CSS” con altri utili suggerimenti su come migliorare la stesura del nostro Cascade Style Sheet

Animazioni CSS con trasformazione
Non animare gli elementi cambiando direttamente la loro larghezza, altezza,  spostamento a sinistra, destra, alto o basso. È preferibile utilizzare la proprietà transform () in quanto fornisce transizioni più fluide e rende più semplice e intuitivo il codice durante la lettura .

Ecco un esempio. Vogliamo animare una palla e farla scorrere verso destra. Invece di cambiare il valore di sinistra, è meglio usare translateX ():

.palla {
left: 50 px;
transition: 0.4s ease-out;
}

/ * Non ok* /
.palla.slide-out {
left: 250 px;
}

/* OK*/
.palla.slide-out {
transform: translateX (250px);
}

La proprietà Transform così come tutte le sue numerose funzioni ( ruotare, ridimensionare, ecc.) hanno una compatibilità quasi universale con i vari browser e possono essere utilizzate liberamente.

Usa una libreria
La comunità CSS è enorme e ci sono costantemente nuove librerie in uscita. Vengono create librerie per una miriade di scopi e campi, da piccole a strutture complete per la creazione di app responsive. Molte di questi sono open-source. Quindi se devi affrontare un problema da risolvere con i CC , prima di provare ad affrontarlo  controlla se c’è già una soluzione disponibile su GitHub o CodePen.

Mantieni la specificità del selettore bassa
Quando gli sviluppatori principianti scrivono CSS, di solito si aspettano che i selettori sovrascriveranno sempre tutto ciò che li sovrasta. Tuttavia, questo non è sempre vero, come abbiamo illustrato nel seguente esempio:

a{
color: #fff;
padding: 25px;
}

a#blue-bott {
background-color: blue;
}

a.active {
background-color: red;
}

Vogliamo essere in grado di aggiungere la classe .active a qualsiasi pulsante per renderlo rosso. In questo caso non funzionerà poichè il nostro pulsante ha un selettore ID ( che ha una specificità più alta ) con un set di colori di sfondo blu  . Questa è la regola :

ID (#id)> Classe (.class)> Tipo

Limitare l’uso di !Important
 !Important rappresenta il più delle volte una soluzione rapida, ma che  potrebbe finire per causare un sacco di riscritture in futuro. La cosa corretta da fare è scoprire perché il selettore CSS non funziona e apportare le corrette modifiche.

L’unica volta in cui è accettabile !Important  nelle regole CSS è quando si vuole sovrascrivere gli stili inline, che rappresenta di per sé è un’altra cattiva pratica da evitare.

Kenji Agency : realizzazione  siti web a Treviso