Intro ITCSS veebiarendajatele

Seal on käputäis suurepäraseid meetodeid CSS-koodi struktureerimine, ja nad kõik töötavad erinevalt. Kõige populaarsemad on OOCSS ja SMACSS, kuid ka vähem tuntud meetodit nimetatakse ITCSS (pööratud kolmnurk CSS) loodud Harry Roberts.

See ei ole raamatukogu ega raamistik, vaid a koodide kirjutamise metoodika see on skaleeritav ja kergesti manipuleeritav. ITCSSi eelised ulatuvad lihtne koodikorraldus väiksematele failisuurustele ja CSS-arhitektuuri paremale mõistmisele.

ITCSS ei ole mõeldud kõigile, kuid see pakub professionaalset viisi, kuidas vaadata kodeerimisprotsessi ajal stiilitabeleid selgesti. Lähme ITCSS-i taga olevate kontseptsioonide juurde ja vaadake, kuidas neid veebiprojektidele rakendada.

Mis on ITCSS?

Kaasaegsed viisid CSS-i korraldamiseks langevad sageli tagasi modulariseerimine või CSS-objektid abstraktsete ideede loomiseks.

Uue idee pööratud kolmnurga CSS on a CSS-i omaduste jagamise kiht nende spetsiifilisuse ja tähtsuse alusel. See on vähem tuntud meetod kui SMACSS ja OOCSS - kuigi mõlemat saab kombineerida ITCSSiga.

Kuna ITCSS on enamasti varaline, selle kasutamise kohta puuduvad üksikasjalikud reeglid. Ainult a konkreetsete põhimõtete kogum on meie käsutuses. Autor räägib neist allpool olevas videos.

Vaikimisi kasutab ITCSS samu põhimõtteid nagu OOCSS suurema eraldatusega põhineb spetsiifilisusel. Seega, kui olete juba OOCSSiga tuttav, pidage seda ainulaadseks alternatiivne CSS-arhitektuur proovima.

Siin on mõned ITCSSi kasutamise suurimad eelised:

• Lehekülje objekte saab jagada oma CSS / SCSS failideks korduvkasutatavus. Iga objekti kopeerimine / kleepimine ja laiendamine on lihtne muudesse projektidesse.
• Spetsiifilisuse sügavus on sõltub sinust.
• Seal on ei ole määratud kausta struktuuri, ja eeltöötlusvahendite nõutav kasutamine.
• Te saate ühendada mõisteid teistest metoodikatest, näiteks CSS moodulitest luua oma hübriidse töövoo.

ITCSS süsteem

Vaatame, kuidas ümberpööratud kolmnurga mudel töötab, kasutades järgmist illustratsiooni Lubose Kmetko ametikohast.

Suundvool ümberpööratud kolmnurga tasasest ülemisest otsast allapoole tippu sümboliseerib spetsiifilisuse suurenemine. See keskenduda vähem spetsiifilisusele lihtsustab klasside korduvkasutamist mitu korda.

Kolmnurga iga alajaotist võib pidada eraldi failiks või failirühmaks, kuigi te ei pea sellisel viisil koodi kirjutama. Sass / vähem kasutajate jaoks on see impordi funktsiooni tõttu mõttekam. Mõelge iga alajaole kui metoodikale korduvkasutatava CSS-koodi jagamine ja korraldamine.

Vaatame kiiresti ümberpööratud kolmnurga iga osa liigub ülevalt alla otsa.

• Seaded - Eeltöötluse muutujad ja meetodid (tegelik CSS-väljund puudub)
• Tööriistad - Segud ja funktsioonid (tegelik CSS-väljund puudub)
• Üldine - CSS-i lähtestamine, mis võib hõlmata Eric Meyeri lähtestamist, Normalize.css või oma koodi
• Elemendid - Üksikute HTML-elementide valikud ilma klassideta
• Objektid - Lehekülje struktuuri klassid, mis tavaliselt järgivad OOCSSi metoodikat
• Komponendid - Esteetilised klassid mis tahes & kõigi lehekülje elementide kujundamiseks (sageli kombineeritud objektiklasside struktuuriga)
• Trumpid - Kõige spetsiifilisemad stiilid mistahes muu kolmnurga ülekirjutamiseks

Iga tagurpidi kolmnurga kiht võib olla kohandatud vastavalt teie vajadustele. Nii et kui te ei kasuta CSS eelprotsessorit, siis ei ole teil vaja seadeid või tööriistu kihte.

Sa peaksid vabalt tõlgendama iga alajaotust, kui näete seda sobivaks. Näiteks selgitab Jordan Koschei, kuidas ta kombineeris struktuuri ja esteetikat üheskoos objektiklassideks, jättes osa komponentidest väga vähe..

ITCSS on raskeid ja kiireid reegleid mida peate järgima. ITCSS-i vastavuskontrolli ei ole ja keegi ei soovi teid selle mudeli veidi muutmise eest.

Kuigi ITCSSi looja Harry Roberts oli huvitatud oma meetodite sisemises kasutuses hoidmisest, võite leida ITCSSi avatud lähtekoodiga näide selles GitHub repos. Seda haldab CSS Wizardry konto, mis on Harry Roberti isiklik veebisait.

BEM + IT = BEMIT nimetamine

Üks populaarsemaid CSS-i nimetuskavasid on BEM. See tähistab Block-Element-Modifierit ja järgib väga konkreetset süntaksit.

Iga BEM-i element kirjeldab CSS-klasside nimetamise konventsiooni:

• Blokid on üksikute elementide klassid, mida saab paljundada ja iseseisvalt.
• Elemendid on alati ploki osa
• Modifikaatorid muutke alati plokki või elementi, et veidi muuta selle välimust (sisse / välja, aktiivne / mitteaktiivne, fikseeritud, staatiline, esiletõstmine / neutraalne).

BEMIT on nimetamise konventsioon ITCSS, mis laenab ideid BEM-ist uute ideede rakendamisel ITCSSiga.

BEM-i süntaks määrab väga spetsiifilised reeglid. Allpool on näidis BEM-i veebisaidilt:

.vorm  .form - theme-xmas  .form - lihtne  .form__input  .form__submit  .form__submit - keelatud  

Blokid sisaldavad nimesid, millel puudub eraldamine, või nimed, mis on eraldatud ühe kriipsuga või ühe allakriipsuga. Elemendid kasutavad kahte allajoonist ja kirjeldavad sisemisi elemente, mis on selle konkreetse plokiga kooskõlas. Modifikaatorid töötavad samal viisil, kuid kasutavad identifitseerimiseks kahte kriipsut.

Harry läheb selles blogipostis sügavamale BEMITisse. Tema kirjeldus on väga lühike ja näitab, et ITCSS tõeline olemus on mängida sõbralikult teiste CSS-meetoditega.

Harry määratleb objektide nimeruumid ilmub iga peamise klassi nime eesliited. Nad murduvad nagu o- objektide jaoks, c- komponentide jaoks ja u- kommunaalteenuste jaoks (nt selgitus või teksti keskendus).

Siin on mõned näidiskoodid tüüpilised BEMITi nimetamise konventsioonid.

  
… 
 
 

Ta soovitab ka kasutada @ meediastiilidel põhinevate klasside sufiks. Seega .o-meedia klass võib muutuda .o-meedia @ lg suurte ekraanide puhul ja .o-media @ md keskmise suurusega ekraanidele.

Isiklikult arvan, et täiendavad järelliited on liiga keeruline põhiliste veebiprojektide jaoks. Ma arvan, et enamik arendajaid kasutaks pigem ühiseid meediaküsimusi ja kirjutaks klassid ümber erinevates punktides. Aga ma ei saa öelda, et ükski meetod on õige või vale, ja igaüks võib ise otsustada, kas nad soovivad kasutada BEMITi või mitte.

Soovitan lugeda seda intro BEMITi artiklit, et saada rohkem teavet selle kohta, miks ITCSS laiendatud BEM-i ja miks võiksite oma CSS-klassi nimetada.

ITCSS võib kokku võtta järgmiselt organisatsiooniline meetod kirjutamiseks korduvkasutatav ja skaleeritav CSS. BEM on eelistatud nimesüntaks ja BEMIT laiendab seda tööle spetsiifilisema ja äratuntava koodi jaoks koos nimeruumidega.

Seal on palju õppida, ja kui sa oled uus CSS-ile, siis on see raske mõiste. Aga kui sa oled valmis õppima, siis ma garanteerin, et sa oled üllatunud ITCSS-koodi klanitud olemusega.

Pakkimine üles

Front-end arendajad otsivad alati oma töövoo optimeerimist. ITCSS on vaid üks meetod, mis aitab kaasa keerukate veebilehtede struktureerimise täiustatud meetodile.

Raske on õppida, kuidas see reaalses projektitöös toimib. Kui teil on tempel ja õppida, siis võib ITCSS olla midagi, mida teie tööriistakomplekti lisada. Isegi kui ma pole ametlikku dokumentatsiooni leidnud, on ITCSSi kohta veel palju ressursse.

• Hallake suuremahulisi veebiprojekte uue CSS-arhitektuuriga ITCSS (creativebloq.com)
• CSS-projektide haldamine ITCSS-iga - esitlusslaidid (speakerdeck.com)
• CSS-projektid ITCSS-iga (1 h video esitlus)
• ITCSS - huvitav viis suurprojektide korraldamiseks (css-tricks.com)

(Cover photo via speakerdeck.com)