Įvadas į ITCSS for Web Developers

Yra daug puikių metodų CSS kodo struktūrizavimas, jie visi dirba skirtingai. Populiariausi yra „OOCSS“ ir „SMACSS“, tačiau taip pat yra mažesnis žinomas metodas ITCSS (atvirkštinis trikampis CSS) sukūrė Haris Robertsas.

Tai ne biblioteka ar sistema, bet a kodo rašymo metodika tai galima keisti ir lengvai valdyti. ITCSS privalumai - nuo paprastas kodų organizavimas mažesnių failų dydžių ir didesnio CSS architektūros supratimo.

ITCSS nėra skirtas visiems, tačiau jis suteikia profesionalų būdą, kaip kodavimo proceso metu pažvelgti į stilių lenteles. Paimkime į ITCSS koncepcijas ir pažiūrėkite, kaip jie gali būti taikomi interneto projektams.

Kas yra ITCSS?

Šiuolaikiniai CSS organizavimo būdai dažnai atsilieka modularizacija arba CSS objektai sukurti abstrakčias idėjas.

Nauja apsisukimo trikampio CSS idėja yra a sluoksniuotas būdas suskaidyti CSS savybes atsižvelgiant į jų specifiškumo ir svarbos lygį. Tai mažiau žinomas metodas, lyginant su SMACSS ir OOCSS - nors abu galima derinti su ITCSS.

Kadangi ITCSS yra daugiausia nuosavybės teise, nėra išsamios taisyklės dėl jos naudojimo. Tik a konkrečių principų rinkinys yra mūsų žinioje. Autorius apie juos kalba žemiau esančiame vaizdo įraše.

Pagal nutylėjimą, ITCSS naudoja tuos pačius principus kaip OOCSS, bet su didesniu atskyrimu remiantis specifika. Taigi, jei jau esate susipažinę su OOCSS, laikykite tai unikalia alternatyvi CSS architektūra bandyti.

Štai keletas didžiausių ITCSS naudojimo privalumų:

• Puslapio objektai gali būti suskirstyti į savo CSS / SCSS failus pakartotinis naudojimas. Tai paprasta kopijuoti / įklijuoti ir išplėsti kiekvieną objektą į kitus projektus.
• Specifiškumo gylis yra priklauso nuo tavęs.
• Yra nenustatyta aplanko struktūra, ir nereikalingas išankstinio apdorojimo įrankių naudojimas.
• Galite sujungti sąvokas nuo kitų metodikų, pvz., CSS modulių sukurti savo hibridinę darbo eigą.

ITCSS sistema

Pažvelkime, kaip „Apverstų trikampio modelis“ veikia, naudodamas šį paveikslą iš Lubos Kmetko žinutės.

Kryptinis srautas nuo plokščio apversto trikampio viršaus iki galo apačioje simbolizuoja specifiškumo didinimas. Tai sutelkti dėmesį į mažiau specifiškumą palengvina klasių pakartotinį naudojimą kelis kartus.

Kiekvienas trikampio poskyris gali būti laikomas atskiru failu arba failų grupe, nors jums nereikia rašyti kodo tokiu būdu. Sass / Less vartotojams tai yra prasmingesnė dėl importo funkcijos. Pagalvokite apie kiekvieną poskyrį kaip metodiką pakartotinai naudojamo CSS kodo suskaidymas ir organizavimas.

Pažvelkime greitai kiekvieną apversto trikampio dalį iš viršaus į apačią į viršų.

• Nustatymai - Išankstinio apdorojimo kintamieji ir metodai (nėra faktinės CSS išvesties)
• Įrankiai - Mišiniai ir funkcijos (nėra CSS išvesties)
• Bendrasis - CSS atstata, kuri gali apimti Eric Meyer atstatymą, Normalize.css arba savo partijos kodą
• Elementai - Vieno HTML elemento selektoriai be klasių
• Objektai - Puslapių struktūros klasės, paprastai vadovaujantis OOCSS metodika
• Komponentai - Estetinės klasės bet kokių ir visų puslapių elementų formavimui (dažnai derinamos su objektų klasių struktūra)
• Trumps - Labiausiai konkretūs stiliai, kad trikampyje būtų niekas kitas

Kiekvienas apversto trikampio sluoksnis gali būti pritaikytas jūsų poreikiams. Taigi, jei nenaudojate CSS išankstinio apdorojimo įrenginio, jums nereikės nustatymų ar įrankių sluoksnių.

Turėtumėte jaustis laisvai interpretuoti kiekvieną poskyrį, kaip matote. Pavyzdžiui, Jordan Koschei paaiškina, kaip jis kartu sujungė struktūrą ir estetiką į objektų klases, paliekant labai mažai komponentų skiltyje.

ITCSS turi jokių sunkių ir greitų taisyklių kad jums reikia sekti. Nėra ITCSS atitikties tikrintojo, ir niekas tavęs nepaaiškins, kad šiek tiek pakeistumėte šį modelį.

Nors ITCSS kūrėjas Haris Robertsas buvo suinteresuotas išlaikyti savo metodus nuosavybės teise, galite rasti atviro kodo ITCSS pavyzdys šiame „GitHub“ repo. Tai talpina „CSS Wizardry“ sąskaita, kuri yra asmeninė „Harry Roberts“ svetainė.

BEM + IT = BEMIT pavadinimai

Viena iš populiariausių CSS pavadinimų schemų yra BEM. Tai reiškia „Block-Element-Modifier“ (bloko elemento modifikatorius) ir seka labai konkrečią sintaksę.

Kiekvienas BEM elementas aprašo CSS klasių pavadinimo konvenciją:

• Blokai yra klasių atskiriems elementams, kuriuos galima kopijuoti ir atskirti.
• Elementai visada yra bloko dalis
• Modifikatoriai visada pakeiskite bloką ar elementą, kad šiek tiek pakeistumėte jo išvaizdą (įjungta / išjungta, aktyvi / neaktyvi, fiksuota, statinė, paryškinti / neutrali).

BEMIT yra pavadinimo konvencija ITCSS, kuri skolina idėjas iš BEM, diegdama naujas idėjas su ITCSS.

BEM sintaksė diktuoja labai konkrečias taisykles. Žemiau pateikiamas pavyzdys iš BEM svetainės:

.forma  .form - theme-xmas  .form - simple  .form__input  .form__submit  .form__submit - išjungta  

Blokuose yra pavadinimai, kuriuose nėra atskyrimo, arba pavadinimai atskirti vienu brūkšniu arba vienu pabraukimu. Elementuose naudojami du pabraukimai ir jie apibūdina vidinius elementus, atitinkančius tą bloką. Modifikatoriai veikia vienodai, tačiau identifikavimui naudojami du brūkšneliai.

Haris giliau įsijungia į BEMIT šiame dienoraštyje. Jo aprašymas yra labai glaustas ir rodo, kad tikrasis ITCSS pobūdis yra žaisti draugiškai su kitomis CSS metodikomis.

Haris apibrėžia objektų vardų vietos pasirodo kaip kiekvienos pagrindinės klasės pavadinimą. Jie suskirstomi kaip o- objektams, c- komponentams ir u- komunalinių paslaugų (pvz., išvalymo arba teksto centravimo).

Štai keletas pavyzdinio kodo tipiškos BEMIT pavadinimų konvencijos.

  
… 
 
 

Jis taip pat rekomenduoja naudoti @ priesagas klasėms, pagrįstoms medijos stiliais. Taigi .o-žiniasklaida klasė gali pasikeisti į .o-media @ lg dideliems ekranams ir .o-media @ md vidutinio dydžio ekranams.

Asmeniškai manau, kad papildomi priesagos yra pernelyg sukrečia pagrindiniams interneto projektams. Manau, kad dauguma kūrėjų mieliau naudos bendras žiniasklaidos užklausas ir perrašytų klases skirtingais taškais. Bet aš negaliu pasakyti, kad vienas iš būdų yra teisingas ar neteisingas, ir kiekvienas gali individualiai nuspręsti, ar jie nori naudoti BEMIT, ar ne.

Labai rekomenduoju perskaityti šį intro BEMIT straipsnį, kad sužinotumėte daugiau apie tai, kodėl ITCSS išplėtė BEM ir kaip galbūt norėsite pavadinti savo CSS klases.

ITCSS galima apibendrinti kaip organizacinis metodas rašyti pakartotinai naudoti ir keičiamo dydžio CSS. BEM yra pageidaujama vardų sintaksė ir BEMIT praplečia šį darbą su vardų erdvėmis, kad būtų galima tiksliau ir atpažinti kodą.

Yra daug ką išmokti, ir jei esate naujas CSS, tai bus sunki lūžio koncepcija. Bet jei esate pasiruošęs mokytis, aš garantuosiu, kad būsite nustebinti su elegantišku ITCSS kodo pobūdžiu.

Apvyniojimas

Front-end kūrėjai visuomet siekia optimizuoti savo darbo eigą. ITCSS yra tik dar vienas būdas, kuris gali prisidėti prie patobulinto sudėtingų svetainių struktūrizavimo metodo.

Sunku išmokti, kaip jis veikia tikrame projekto darbe. Jei turite tam tikrą laiką, o paskatinti mokytis, ITCSS gali būti kažkas, ką verta pridėti prie jūsų įrankių rinkinio. Nors aš neradau jokių oficialių dokumentų, vis dar yra daug išteklių internete, kad galėčiau sužinoti apie ITCSS.

• Valdykite didelio masto interneto projektus su nauja CSS architektūra ITCSS (creativebloq.com)
• CSS projektų valdymas su ITCSS - pristatymo skaidres (speakerdeck.com)
• CSS projektai su ITCSS (1 val. Vaizdo pristatymas)
• ITCSS - įdomus būdas organizuoti didelio masto projektus (css-tricks.com)

(Viršelio nuotrauka per speakerdeck.com)