CSS Refactor NoSoft

.porcodio{color:#666;}

Addì 11 aprile 2019, noi Team Mess iniziamo la stesura del documento che definirà la struttura del codice CSS che escluderà dal progetto tutto ciò creato dalle precedenti entità. Al momento sono presenti l'appuntato Cerutti Marco, il collega Simoni Vincenzo e il sottoscritto Rosetti Eglio.

File usati (in ordine crescente di specificità)

• designbest.scss (è costruito importando tutti gli altri file)
• _designbest.variables.scss (dove vengono definite i valori delle variabili di grandezza, colore, dimensioni più usate nel sito)
• _designbest.mixins.scss (punto unico dei mixin tipo transition, shadow, transform ecc...)
• _designbest.reset.scss (cambia il comportamento base dei tag)
• _designbest.general.scss (classi generiche utilizzate in tutte le pagine)
• _designbest.components.scss (moduli che si ripetono in diverse pagine)
• _designbest.header.scss (specifiche regole per l'header)
• _designbest.footer.scss (specifiche regole per il footer)
• _designbest.home.scss (pagina del controller home)
• _designbest.listing.general.scss (specifiche comuni a tutti i listing)

Approccio misto, definire gli elementi che si usano di più crearne le classe e in parallelo creare le classi mattoncino per sovrascrivere gli attributi che cambiano in situazioni particolari.

Convenzioni

CSS generici

Sono globali, sempre inclusi nel bundle e devono rispettare la nomenclatura che segue:

.wm-text-size-big1 {
  font-size: $font-size-big1;
}

.wm-text-size-medium1 {
  font-size: $font-size-medium1;
}

.wm-text-size-medium2 {
  font-size: $font-size-medium2;
}

/* ... */

con wm- come prefisso.

CSS specifici

Gli .scss specifici per pagina stanno nella cartella pages. Possono essere più "sporchi" perché sono l'ultimo gradino di inclusione (si consiglia sempre e comunque di mantenere ordine ed eleganza).