Intrați în ITCSS pentru dezvoltatorii web

Există o mână de metode excelente pentru structurarea codului CSS, și toate funcționează în moduri diferite. Cele mai populare sunt OOCSS și SMACSS, dar există și o metodă mai puțin cunoscută numită ITCSS (CSS triangular inversat) create de Harry Roberts.

Nu este o bibliotecă sau un cadru, ci a metodologia de scriere a codului este scalabil și ușor de manipulat. Beneficiile ITCSS variază de la simpla organizare a codurilor la dimensiuni mai mici de fișiere și o mai bună înțelegere a arhitecturii CSS.

ITCSS nu este pentru toată lumea, dar oferă o modalitate profesionistă de a analiza foile de stil cu claritate în timpul procesului de codificare. Să abordăm conceptele din spatele ITCSS și să vedem cum pot fi aplicate proiectelor web.

Ce este ITCSS??

Căile moderne de organizare a CSS se întorc adesea Modularizarea sau Obiecte CSS pentru a construi idei abstracte.

Noua idee a Triunghiului inversat CSS este a modul stratificat de divizare a proprietatilor CSS pe baza nivelului lor de specificitate și importanță. Este o metodă mai puțin cunoscută comparativ cu SMACSS și OOCSS - deși ambele pot fi combinate cu ITCSS.

Deoarece ITCSS este mai ales proprietari, nu există o carte de reglementare detaliată despre utilizarea sa. Doar a set de principii specifice este la dispoziția noastră. Autorul vorbește despre ele în videoclipul de mai jos.

Implicit, ITCSS utilizează aceleași principii ca și OOCSS, dar cu o separare mai mare pe baza specificității. Deci, dacă sunteți deja familiarizat cu OOCSS, considerați acest lucru unic arhitectură alternativă CSS a incerca.

Iată câteva dintre cele mai mari beneficii ale utilizării ITCSS:

Obiectele de pagină pot fi împărțite în propriile fișiere CSS / SCSS pentru reutilizabil. Este simplu să copiați / inserați și să extindeți fiecare obiect în alte proiecte.
Adâncimea specificității este depinde de tine.
Există nici o structură de folder setată, și nu necesită utilizarea instrumentelor de preprocesare.
Puteți combina concepte de la alte metodologii, cum ar fi modulele CSS creați propriul flux hibrid de lucru.

Sistemul ITCSS

Să aruncăm o privire asupra modului în care lucrează modelul triunghiului inversat, utilizând ilustrația de mai jos din postul lui Lubos Kmetko.

Un flux direcțional de la vârful plat al triunghiului inversat până la vârful din partea inferioară simbolizează o creșterea specificității. Acest se concentreze pe mai puțină specificitate ușurează refolosirea claselor de pe un site de mai multe ori.

Fiecare subsecțiune a triunghiului poate fi considerată un fișier separat sau un grup de fișiere, deși nu aveți nevoie să scrieți codul în acest fel. Are mai mult sens pentru utilizatorii Sass / Less din cauza funcției de import. Gândiți-vă la fiecare subsecțiune ca metodologie divizarea și organizarea codului CSS reutilizabil.

Să aruncăm o privire rapidă fiecare secțiune a triunghiului inversat trecând de sus în jos până la vârf.

Setări - Variabile și metode preprocesor (fără ieșire CSS efectivă)
Unelte - Mixuri și funcții (fără ieșire CSS actuală)
Generic - Restabilirea CSS care ar putea include resetarea lui Eric Meyer, Normalize.css sau propriul lot de cod
element - Selectori de elemente unice HTML fără clase
Obiecte - Clase pentru structura paginilor care urmează în mod obișnuit metodologia OOCSS
Componente - Clase estetice pentru styling orice & toate elemente de pagină (adesea combinate cu structura de clase de obiecte)
Trumps - Cele mai specifice stiluri pentru a exclude orice altceva din triunghi

Fiecare strat al triunghiului inversat poate fi ajustat pentru a se potrivi nevoilor dvs.. Deci, dacă nu utilizați un preprocesor CSS, nu veți avea nevoie de straturile Setări sau Instrumente.

Ar trebui să vă simțiți liber să interpretați fiecare subsecțiune după cum doriți. De exemplu, Jordan Koschei explică cum a combinat structura și estetica împreună în clase obiect, lăsând foarte puțin în secțiunea Componente.

ITCSS are nu există reguli grele și rapide că trebuie să urmați. Nu există nicio verificare a conformității ITCSS și nimeni nu va țipa la tine pentru modificarea ușoară a acestui model.

Deși creatorul ITCSS, Harry Roberts, a fost interesat să-și păstreze propriile metode de utilizare internă, puteți găsi unul open source exemplu de ITCSS în acest repo GitHub. Este găzduit de contul CSS Wizardry, care este site-ul personal al lui Harry Roberts.

BEM + IT = denumirea BEMIT

Una dintre cele mai populare scheme de numire CSS este BEM. Aceasta înseamnă Modificator de elemente bloc și urmează o sintaxă foarte specială.

Fiecare element din BEM descrie o convenție de numire pentru clasele CSS:

blocuri sunt clase pentru elemente individuale care pot fi replicate și separate.
element sunt întotdeauna parte a unui bloc
Modificatorii modificați întotdeauna un bloc sau un element pentru a schimba ușor aspectul său (pornire / oprire, activ / inactiv, fix, static, evidențiere / neutru).

BEMIT este convenția de numire adoptat de ITCSS, care împrumută idei de la BEM în timp ce implementează idei noi cu ITCSS.

Sintaxa BEM dictează reguli foarte specifice. Mai jos este o mostră de pe site-ul BEM:

.form  .form - tema-xmas  .form - simplu  .form__input  .form__submit  .form__submit - dezactivat

Blocurile au nume cu nici o separare, sau nume separate printr-o linie sau o subliniere. Elementele utilizează două liniuțe și descriu elementele interne compatibile cu acel bloc. Modificatorii funcționează în același mod, dar utilizează două liniuțe pentru identificare.

Harry intră mai adânc în BEMIT în acest post pe blog. Descrierea lui este foarte concisă și arată că este adevărata natură a ITCSS jucați prietenos cu alte metodologii CSS.

Harry definește spații de nume pentru obiecte care apare ca prefixe pentru fiecare nume de clasă majoră. Se descompun ca o- pentru obiecte, c- pentru componente și u- pentru utilități (cum ar fi clarificarea textului sau corecția textului).

Iată câteva exemple de cod care reprezintă convențiile convenționale de numire BEMIT.

...

De asemenea, el recomandă utilizarea @ sufix pentru clase bazate pe stilurile mass-media. Asa ca .o-media clasa s-ar putea schimba .o-media @ lg pentru ecranele mari și .o-media @ md pentru ecrane de dimensiuni medii.

Personal, cred că sufixele suplimentare sunt prea complicat pentru proiectele web de bază. Cred că majoritatea dezvoltatorilor ar prefera să utilizeze interogările media comune și să rescrie clasele la puncte de întrerupere diferite. Dar nu pot spune că niciuna dintre metode nu este corectă sau nu, iar oricine poate decide individual dacă vrea sau nu să folosească BEMIT.

Vă recomandăm foarte mult să citiți acest articol introductiv BEMIT pentru a afla mai multe despre motivul pentru care ITCSS a extins BEM și cum ați putea dori să vă numiți clasele CSS.

ITCSS poate fi rezumată ca o metodă organizatorică pentru scris reutilizabile și scalabile CSS. BEM este sintaxa de numire preferată și BEMIT extinde acest lucru la locul de muncă cu spații de nume pentru un cod mai specific și mai ușor de recunoscut.

Există multe de învățat, iar dacă sunteți nou la CSS, acesta va fi un concept greu de rupt. Dar dacă sunteți dispus să învățați, vă garantează că veți fi surprinși de natura delicată a codului ITCSS.

Înfășurarea în sus

Dezvoltatorii din front-end încearcă întotdeauna să-și optimizeze fluxul de lucru. ITCSS este doar o altă metodă care poate contribui la o metodă îmbunătățită de structurare a site-urilor complexe.

Dificultatea este de a învăța cum funcționează în activitatea reală a proiectului. Dacă aveți temeritate și conduceți să învățați, ITCSS poate fi ceva care merită adăugat la setul dvs. de instrumente. Chiar dacă nu am găsit nicio documentație oficială, există încă multe resurse online pentru a afla mai multe despre ITCSS.

Gestionați proiecte web la scară largă cu noua ITCSS arhitectură CSS (Creativebloq.com)
Gestionarea proiectelor CSS cu ITCSS - Slide de prezentare (Speakerdeck.com)
Proiecte CSS cu ITCSS (prezentare video de 1 ore)
ITCSS - Un mod interesant de organizare a proiectelor la scară largă (Css-tricks.com)

(Coperta fotografie prin speakerdeck.com)