Sfondo

Cascading Style Sheets (CSS) è un potente strumento utilizzato per lo styling delle pagine web.

I CSS consentono la separazione del contenuto del documento dalla presentazione del documento, consentendo agli ingegneri di modellare diversi aspetti delle pagine Web, tra cui: caratteri, colori, sfondi, layout e animazioni, tra gli altri.

Tuttavia, scrivere CSS manutenibili, scalabili e performanti può essere impegnativo, soprattutto quando le applicazioni web crescono in scala e complessità.

In questo segmento, condividerò alcune best practice CSS che possono aiutarti a scrivere codice CSS migliore, con alcuni esempi di codice di cose da fare e da non fare.

A livello personale, i CSS mi hanno causato la caduta dei capelli. Ti salverò dal destino che ho subito. Basta leggere questo!

Usa un preprocessore CSS

I preprocessori CSS come Sass, Less e Stylus sono strumenti che ti aiutano a scrivere codice CSS più gestibile e scalabile.

Questi preprocessori forniscono funzionalità come variabili, mixin, funzioni e annidamento, tra gli altri. Con le variabili, puoi definire valori che vengono riutilizzati in tutto il tuo codice CSS.

I mixin ti consentono di raggruppare le dichiarazioni CSS e riutilizzarle in diverse parti del tuo codice.

Le funzioni consentono di eseguire calcoli e manipolare valori. La nidificazione ti consente di scrivere regole CSS più specifiche e più facili da leggere.

Fai questo ✅

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: #fff;
}

Non farlo ❌

.button {
  background-color: #007bff;
  color: #fff;
}

Utilizzando un preprocessore CSS, puoi rendere il tuo codice più conciso e più facile da mantenere.

Utilizzare una metodologia CSS

Una metodologia CSS è un insieme di linee guida e convenzioni che ti aiutano a strutturare e organizzare il tuo codice CSS.

Una metodologia fornisce un approccio coerente alla scrittura di CSS, rendendo più facile per più sviluppatori lavorare sulla stessa base di codice.

Esistono diverse metodologie CSS, tra cui BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) e OOCSS (Object-Oriented CSS), tra gli altri.

BEM è una metodologia popolare che fornisce una convenzione di denominazione per le classi CSS. La convenzione di denominazione BEM utilizza un doppio trattino basso ( __) per separare un blocco e un elemento e un doppio trattino ( --) per separare un blocco o un elemento e un modificatore.

Fai questo ✅

<div class="button button--primary">
  Click Me
</div>

Non farlo ❌

<div class="primary-button">
  Click Me
</div>

Utilizzando una metodologia CSS, puoi rendere il tuo codice più coerente, gestibile e più facile da capire.

Usa un CSS Reset o Normalize

Diversi browser web hanno diversi stili predefiniti per gli elementi HTML.

Per assicurarti che il tuo codice CSS funzioni in modo coerente su tutti i browser, dovresti utilizzare un CSS reimpostato o normalizzato. Un ripristino CSS è un insieme di regole CSS che rimuovono tutti gli stili predefiniti dagli elementi HTML.

Una normalizzazione è un insieme di regole CSS che normalizzano gli stili su diversi browser.

Fai questo ✅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />

Non farlo ❌

body {
  margin: 0;
  padding

In questo segmento, abbiamo esplorato queste tre best practice CSS che possono aiutarti a scrivere codice CSS migliore, tra cui:

1. Usa un preprocessore CSS
2. Usa una metodologia CSS
3. Usa un reset CSS o normalizza

1. Usa nomi di classe significativi e descrittivi
2. Usa proprietà e valori abbreviati
3. Evitare di utilizzare!important
4. Usa flexbox o griglia per i layout
5. Ridurre al minimo l'uso di selettori globali
6. Evitare di utilizzare troppi selettori nidificati
7. Mantieni il tuo codice CSS organizzato e gestibile