Introduzione a ITCSS per sviluppatori Web

C'è una manciata di ottimi metodi per strutturazione del codice CSS, e lavorano tutti in modi diversi. I più popolari sono OOCSS e SMACSS, ma c'è anche un metodo meno conosciuto chiamato ITCSS (CSS triangolo invertito) creato da Harry Roberts.

Non è una biblioteca o un quadro, ma a metodologia di scrittura del codice è scalabile e facile da manipolare. I vantaggi dell'ITCSS vanno da organizzazione del codice semplice a dimensioni di file più ridotte e una maggiore comprensione dell'architettura CSS.

ITCSS non è per 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'è ITCSS?

I modi moderni di organizzare i CSS spesso ricadono in modularizzazione o Oggetti CSS costruire idee astratte.

La nuova idea di Triangolo invertito CSS è a 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.

Poiché ITCSS è per lo più di proprietà, non esiste un libro delle regole dettagliato sul suo utilizzo. Solo un insieme 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 maggiore separazione basato sulla specificità. Quindi, se hai già familiarità con OOCSS, considera questo un unico architettura CSS alternativa provare.

Ecco alcuni dei maggiori vantaggi dell'utilizzo di ITCSS:

Gli oggetti della pagina possono essere suddivisi nei loro file CSS / SCSS per riutilizzabilità. È semplice copiare / incollare ed estendere ogni oggetto in altri progetti.
La profondità della specificità è sta a te.
C'è nessuna struttura di cartelle impostata, e non è richiesto l'uso di strumenti di pre-elaborazione.
È possibile unire concetti da altre metodologie come i moduli CSS a crea il tuo 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 di specificità. Questo concentrarsi su meno 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, sebbene non sia 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 dividere e organizzare codice CSS riutilizzabile.

Diamo un'occhiata veloce ogni sezione del triangolo invertito spostandosi dall'alto verso il basso fino alla punta.

impostazioni - Variabili e metodi del preprocessore (nessuna uscita CSS reale)
Utensili - Mixin e funzioni (nessuna uscita CSS reale)
Generico - Ripristini CSS che potrebbero includere il reset di Eric Meyer, Normalize.css o il tuo batch di codice
Elementi - Singoli selettori di elementi HTML senza classi
Oggetti - Classi per struttura di pagina che seguono in genere 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 preferisci. 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 ha nessuna regola dura e veloce che devi 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:

blocchi sono classi per singoli elementi che possono essere replicati e stand-alone.
Elementi sono sempre parte di un blocco
modificatori modificare sempre un blocco o un elemento per modificarne leggermente l'aspetto (on / off, attivo / inattivo, fisso, statico, evidenziato / neutro).

BEMIT è la convenzione di denominazione adottato 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 carattere di sottolineatura. 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ù a fondo su BEMIT in questo post del blog. La sua descrizione è molto concisa e dimostra che la vera natura di ITCSS è giocare amichevole con altre metodologie CSS.

Harry definisce namespace per oggetti apparendo come prefissi per ciascun nome di classe principale. Si rompono come o- per oggetti, c- per componenti, e u- per utilità (come clearfix o centratura del testo).

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

...

Raccomanda anche di usare il @ suffisso per le classi basate sugli stili del supporto. Così la .O-media la classe potrebbe cambiare .o-media @ lg per schermi di grandi dimensioni, e .o-media @ md per schermi di medie dimensioni.

Personalmente, penso che i suffissi aggiuntivi siano troppo complicato per 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 BEM e su come si potrebbe voler nominare le proprie classi CSS.

ITCSS può essere riassunto come un metodo organizzativo per scrivere CSS riutilizzabile e scalabile. BEM è la sintassi di denominazione preferita e BEMIT estende questo per funzionare 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 si ha la temerarietà e si impara a imparare, allora ITCSS può essere qualcosa che vale la pena aggiungere al proprio 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 (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)