Introduzione a ITCSS per sviluppatori Web

Esistono una serie di ottimi metodi per strutturare il codice CSS e tutti funzionano in modi diversi. I più popolari sono OOCSS e SMACSS, ma c'è anche un metodo meno conosciuto chiamato ITCSS (Inverted Triangle CSS) creato da Harry Roberts.

Non è una libreria o un framework, ma una metodologia di scrittura di codice che è scalabile e facile da manipolare. I vantaggi di ITCSS vanno dalla semplice organizzazione del codice alle dimensioni ridotte dei file e una maggiore comprensione dell'architettura CSS.

ITCSS non è adatto a tutti, ma fornisce un modo professionale per esaminare i fogli di stile con chiarezza durante il processo di codifica. Analizziamo i concetti alla base di ITCSS e vediamo come possono essere applicati ai progetti web.

Cos'è l'ITCSS?

I modi moderni di organizzare i CSS spesso ricadono sulla modularizzazione o sugli oggetti CSS per costruire idee astratte.

La nuova idea di Triangolo invertito CSS è un modo stratificato per suddividere le proprietà CSS in base al loro livello di specificità e importanza . È un metodo meno conosciuto rispetto a SMACSS e OOCSS, sebbene entrambi possano essere combinati con ITCSS.

Dato che ITCSS è per lo più proprietario, non esiste alcuna regola dettagliata sul suo utilizzo. Solo una serie di principi specifici è a nostra disposizione. L'autore ne parla nel video qui sotto.

Per impostazione predefinita, ITCSS utilizza gli stessi principi di OOCSS ma con una maggiore separazione basata sulla specificità. Quindi, se hai già familiarità con OOCSS, considera questa un'architettura CSS alternativa unica da provare.

Ecco alcuni dei maggiori vantaggi dell'utilizzo di ITCSS:

• Gli oggetti della pagina possono essere suddivisi nei propri file CSS / SCSS per la riusabilità . È semplice copiare / incollare ed estendere ogni oggetto in altri progetti .
• La profondità della specificità dipende da te .
• Non esiste una struttura di cartelle definita e non è richiesto l'uso di strumenti di pre-elaborazione.
• È possibile unire concetti da altre metodologie come i moduli CSS per creare il proprio flusso di lavoro ibrido .

Il sistema ITCSS

Diamo un'occhiata a come funziona il modello del triangolo invertito usando la seguente illustrazione dal post di Lubos Kmetko.

Un flusso direzionale dalla sommità piatta del triangolo capovolto fino alla punta in basso simboleggia un aumento della specificità . Questo focus su una minore specificità rende più facile riutilizzare le classi su un sito più volte.

Ogni sottosezione del triangolo può essere considerata un file o un gruppo di file separati, anche se non è necessario scrivere codice in questo modo. Ha più senso per gli utenti Sass / Less a causa della funzione di importazione. Basti pensare a ciascuna sottosezione come a una metodologia per suddividere e organizzare il codice CSS riutilizzabile .

Diamo una rapida occhiata a ciascuna sezione del triangolo invertito spostandosi dall'alto verso il basso fino alla punta.

• Impostazioni : variabili e metodi del preprocessore (nessuna uscita CSS effettiva)
• Strumenti - Mixin e funzioni (nessuna uscita CSS effettiva)
• Generico : ripristini CSS che potrebbero includere il ripristino di Eric Meyer, Normalize.css o il proprio lotto di codice
• Elementi : selettori di elementi HTML singoli senza classi
• Oggetti : classi per la struttura della pagina che in genere seguono la metodologia OOCSS
• Componenti - Classi estetiche per lo styling di tutti gli elementi di una pagina (spesso combinati con la struttura delle classi di oggetti)
• Trumps - Gli stili più specifici per ignorare qualsiasi altra cosa nel triangolo

Ogni strato del triangolo invertito può essere regolato in base alle proprie esigenze . Quindi, se non usi un preprocessore CSS, non avrai bisogno dei livelli di Impostazioni o Strumenti.

Dovresti sentirti libero di interpretare ogni sottosezione come meglio credi. Ad esempio, Jordan Koschei spiega come ha combinato la struttura e l'estetica insieme in classi di oggetti, lasciando ben poco nella sezione Componenti.

ITCSS non ha regole rigide da seguire. Non esiste un controllore di conformità ITCSS e nessuno ti urlerà di alterare leggermente questo modello.

Sebbene il creatore di ITCSS Harry Roberts fosse interessato a mantenere i suoi metodi di proprietà per uso interno, puoi trovare un esempio open source di ITCSS in questo repository GitHub. È ospitato dall'account CSS Wizardry, il sito personale di Harry Roberts.

BEM + IT = Denominazione BEMIT

Uno degli schemi di denominazione CSS più popolari è BEM. Questo è l'acronimo di Block-Element-Modifier e segue una sintassi molto particolare.

Ogni elemento in BEM descrive una convenzione di denominazione per le classi CSS:

• I blocchi sono classi per singoli elementi che possono essere replicati e indipendenti.
• Gli elementi fanno sempre parte di un blocco
• I modificatori modificano sempre un blocco o un elemento per modificarne leggermente l'aspetto (acceso / spento, attivo / inattivo, fisso, statico, chiaro / neutro).

BEMIT è la convenzione di denominazione adottata da ITCSS, che prende in prestito idee da BEM mentre implementa nuove idee con ITCSS.

La sintassi BEM detta regole molto specifiche. Di seguito è riportato un esempio dal sito Web BEM:

 .form {} .form - theme-xmas {} .form - simple {} .form__input {} .form__submit {} .form__submit - disabled {} 

I blocchi hanno nomi senza separazione o nomi separati da un trattino o un trattino basso. Gli elementi usano due trattini bassi e descrivono gli elementi interni coerenti con quel particolare blocco. I modificatori funzionano allo stesso modo ma usano due trattini per l'identificazione.

Harry scava più in profondità in BEMIT in questo post del blog. La sua descrizione è molto concisa e dimostra che la vera natura di ITCSS è quella di giocare amichevolmente con altre metodologie CSS .

Harry definisce gli spazi dei nomi per gli oggetti che appaiono come prefissi per ciascun nome di classe principale . Si suddividono come o- per oggetti, c- per componenti e u- per utilità (come clearfix o centratura del testo).

Ecco alcuni esempi di codice che rappresentano le tipiche convenzioni di denominazione BEMIT .

...

Raccomanda anche di usare il suffisso @ per le classi basate sugli stili dei media. Quindi la classe .o-media potrebbe cambiare in .o-media@lg per gli schermi di grandi dimensioni e .o-media@md per gli schermi di medie dimensioni.

Personalmente, penso che i suffissi aggiuntivi siano troppo complicati per i progetti web di base . Penso che la maggior parte degli sviluppatori preferirebbe utilizzare le media query comuni e riscrivere le classi in diversi punti di interruzione. Ma non posso dire che uno dei due metodi sia giusto o sbagliato, e chiunque può decidere individualmente se vuole usare BEMIT o no.

Consiglio vivamente di leggere questo articolo introduttivo di BEMIT per saperne di più sul perché ITCSS ha esteso il BEM e su come si potrebbe voler denominare le classi CSS.

ITCSS può essere riassunto come metodo organizzativo per scrivere CSS scalabili e riutilizzabili . BEM è la sintassi di denominazione preferita, e BEMIT estende questo per lavorare con namespace per codice più specifico e riconoscibile.

C'è molto da imparare, e se sei nuovo ai CSS questo sarà un concetto difficile da rompere. Ma se sei disposto a imparare, ti garantisco che sarai sorpreso dall'elegante natura del codice ITCSS.

Avvolgendo

Gli sviluppatori front-end cercano sempre di ottimizzare il loro flusso di lavoro. ITCSS è solo un altro metodo che può contribuire a migliorare il metodo di strutturazione di siti Web complessi.

La difficoltà sta imparando come funziona nel vero progetto di lavoro. Se hai la temerarietà e la capacità di imparare, allora ITCSS può essere qualcosa che vale la pena aggiungere al tuo toolkit. Anche se non ho trovato alcuna documentazione ufficiale, ci sono ancora molte risorse online per conoscere ITCSS.

• Gestisci progetti web su larga scala con la nuova architettura CSS ITCSS (creativebloq.com)
• Gestione di progetti CSS con ITCSS - Presentazioni di presentazione (speakerdeck.com)
• Progetti CSS con ITCSS (presentazione video 1 ora)
• ITCSS - Un modo interessante per organizzare progetti su larga scala (css-tricks.com)

(Foto di copertina tramite speakerdeck.com)