FC DiviChild

# Codice Custom

Per omogeneizzare lo sviluppo di codice custom è bene adottare delle pratiche comuni che permettano di mantenere ordinato il codice e comprensibile da tutti.

Prima di tutto va tenuto a mente che per gli aggiornamenti futuri è bene seguire alcune regole fondamentali:

  • Tutto il codice custom deve essere inserito a partire dal file custom/_custom.scss
  • Tutti i file contenuti nella cartella core/ non devono essere modificati
  • Alcuni file all'interno della directory custom/ non devono essere cancellati
    • _custom.scss
    • _root--custom.scss
    • _variables--override.scss

TIP

Il contenuto di tutti i file della directory custom/ può tranquillamente essere modificato.

# Best Pratice

  • Dividere gli elementi in gerarchie di complessità dividendoli in: componenti, moduli, elementi
  • Separare i fogli di stile scss in cartelle che rispecchino la precedente suddivisione
  • Scrivere i nomi delle classi senze underscore ma usando solo trattini, usando il doppio trattino per singoli elementi facenti parte di un componente o modulo (vedi esempio sotto)
.module-name {
    .module-name--title {
        ...
    }
}

# Differenze degli elementi

È possibile differenziare gli elementi prendendo in considerazione gli elementi di Divi.
Per moduli possiamo intendere quelli che sono chiamati moduli all'interno del builder, mentre per componenti potremmo intendere strutture più complesse che coinvolgono righe e/o sezioni con più moduli all'interno.

Per elementi potremmo intendere invece singoli elementi quali titoli, blocchi di testo, pulsanti ecc.. che potrennero essere usati all'interno di componenti e moduli.

# Nomenclature Semantiche

I nomi delle classi e dei file dovrebbero essere il più possibile "parlanti", ovvero descrivere il nome degli elementi ai quali si riferiscono. Una card prodotto, ad esempio, dovrebbe chiamarsi "product-card" e il file che contiene tale definizione chiamarsi "_product-card.scss"

← Variabili →