FABRIZIO CUSCINIUX/UI DESIGNER • FRONTEND ENTHUSIAST

ITCSSInverted Triangle CSS Architecture

Scaletta

• Cos’è ITCSS

• Le sorgenti dei nostri problemi

• Struttura di ITCSS: il triangolo invertito

• Estendere l’architettura

• Organizzazione dei file

Credits

• Harry Roberts

• Consulente Frontend Architect

• @csswizardry

• inuitcss https://github.com/inuitcss • Framework CSS che implementa ITCSS (ovviamente!)

• www.csswizardry.com

COSA È ITCSS

Cosa non è ITCSS

• Non è un linguaggio

• Non è un framework

• Non è una libreria CSS

Cosa è ITCSS

• Architettura a triangolo invertito

• una metodologia, un approccio di alto livello

• architettura strutturata e scalabile

• un meta-framework (un framework per framework)

• molto, molto semplice…

LE SORGENTI DEI NOSTRI PROBLEMI

“Colpa” di CSS

• Cascata e ereditarietà

• Altamente dipendente dal Source Order

• Linguaggio poco espressivo

• Specificity

Colpa nostra!

• Documentazione, quella sconosciuta

• Mancanza di struttura solida, di quality assurance

• A volte, poca conoscenza (di CSS o del progetto)

• Mix di abilità diverse, altamente soggettive

• Diversi stili di programmazione, preferenze, modi di lavorare

• Si fa poco caso a cosa esiste già

• Aggiungere nuovi stili in coda allo stylesheet

Cascata e ereditarietà

• Ogni porzione di CSS necessita della conoscenza di cosa è venuto prima e di cosa potrebbe venire dopo aka Dependencies

Cascata e ereditarietà

• Ogni porzione di CSS necessita della conoscenza di cosa è venuto prima e di cosa potrebbe venire dopo aka Dependencies

• Il CSS di un sito/Web App è un unico gigantesco albero di dipendenze

• Abbiamo bisogno di gestire questa dipendenza a basso livello

Modi di ordinare CSS

• Replicare la struttura del sito • homepage.css, contacts.css, …

• segmenti tematici: tipografia, forms, buttons, etc… “alla Foundation” • @import "foundation/components/type"

• @import "foundation/components/forms"

• Aggiungi tutto in coda, alla fine del CSS

project.css

project.css

Houston, abbiamo perso il controllo

• Undoing CSS: scrivere (ulteriori) righe di CSS per annullare l’effetto di altre righe di CSS

• Source order gestito male, unito a lunghe e complesse catene di eredità possono portare ad un grosso spreco e/o a ridondanza (e perdita di controllo del progetto)

Specificity (The Specificity wars)

• Non importa • quanta cura metti nell’ordinare i tuoi sorgenti,

• quanto bene usi la cascata,

• quale naming convention usi…

• la specificitàpuò annullare tutto.

Come si può risolvere?

Scrivi CSS in ordine di specificità.

IL TRIANGOLO NO, NON LO AVEVO CONSIDERATO

Abbiamo bisogno di…

• un ambiente sano e accessibile a più persone

• domare la cascata CSS e gestire il source order

• creare un posto in cui far vivere e coesistere tutto (vecchio e nuovo)

• ridurre lo spreco di codice (risorse) e ridondanza

• mettere fine alle Specificity Wars

generico

esplicito

vasta scala

localizzato

bassaspecificità

altaspecificità

SETTINGS

GENERIC

BASE

OBJECTS

COMPONENTS

TRUMPS

TOOLS

Organizzazione dei livelli

• Settings: variabili globali, configurazioni, …

• Tools: mixin e funzioni

• Generic: stili ground-zero (Normalize, reset, box-sizing)

• Base: elementi non classati (type selector)

• Objects: cosmetic-free design patterns

• Components: componenti, pezzi della UI

• Trumps: helpers, overrides, utilities, …

Ricapitolando…

SETTINGS

Settings disponibili globalmente

Configuration

Brand colors, etc…

$brand-color: #005dad;$gutter: 20px;

TOOLS

Tool disponibili globalmente

Public mixins

Helper functions

@mixin font-brand() { font-family: “UI Font”, sans-serif; font-weight: 400;}

GENERIC Stili ground-zero

Bassa specificità, su vasta scala

Reset, Normalize, etc…

html { box-sizing: border-box;} *, *:before,*:after { box-sizing: inherit;}

BASE

Elementi HTML senza classe

H1-H6, text link, liste, …

Ultimo livello in cui vediamo selettori di tipo (a {}, blockquote {})

ul { list-style: square outside;} textarea { height: auto; min-height: 50px;}

OBJECTS

OOCSS

Design patterns

Niente cosmetica

Si utilizzano solo classi

Nomi agnostici (.ui-list {})

.UIList { margin: 0; padding: 0; list-style: none; &__item { padding: ($gutter / 2); }}

COMPONENTS

Veri pezzi di UI

Ancora, solo classi

Nomi espliciti (.products-list {})

.ProductsList { @include font-brand(); border-top: 1px solid $brand-color; &__item { border-bottom: 1px solid $brand-color; }}

TRUMPS

Overrides, helpers, utilities

Interessa solo un pezzo di DOM alla volta

Solitamente, portatore di!important

.one-half { width: 50% !important; }

Da notare…

• Si gestisce il source order, si doma la cascata, si alleggerisce l’ereditarietà

• La specificità aumenta gradualmente, livello dopo livello

• Si toccano piccoli pezzetti del DOM alla volta • Ogni livello è un “passaggio” nel DOM

• Si aggiungono stili progressivamente, non si “annulla” mai l’effetto di altre righe CSS • Ogni stadio è più dettagliato ed esplicito del precedente

Come lavora uno scultore

• Si ricava della roccia da una cava con dell’esplosivo

• Si ricavano dei grandi blocchi

• Si inizia ad abbozzare una forma molto generica

• Si aggiungono man mano caratteristiche (aspetto)

• Solo alla fine, si lavora sui dettagli precisi

ESTENDERE L’ARCHITETTURA

CSS scalabile

• Ora, il nostro CSS può scalare facilmente

• Aggiungiamo cose nei livelli rilevanti (gli ultimi…)

• Le cose non diventano più complicate, ma più grandi

• Il trend del grafico della specificità rimane lo stesso

Architettura personalizzata

• Aggiungi o rimuovi livelli se e quando ne hai bisogno

• Non usi un preprocessor? Rimuovi i livelli Settings e Tools

• Non usi OOCSS? Rimuovi il livello Objects

• His bisogno di theming? Aggiungi un livello Theme (dopo Components e prima di Trumps)

• Fai A/B Test, devi isolare stili temporanei? Aggiungi un livello Test (prima del Trumps)

ORGANIZZAZIONE DEI FILE

Organizzazione dei file

• Prefisso nei file per indicare il livello di appartenenza • settings.global.scss

tools.functions.scssgeneric.ground-zero.scssbase.typography.scss

• Oppure una cartella per livello • 1-settings/global.scss

2-tools/functions.scss3-generic/ground-zero.scss4-base/typography.scss

• Un main.scss che include tutto nell’ordine corretto

// SETTINGS@import "1-settings/global";// TOOLS@import "2-tools/functions";@import "2-tools/mixins";// GENERIC@import “3-generic/ground-zero";@import "3-generic/normalize";...// COMPONENTS@import “6-components/infobox";...