Ievads ITCSS tīmekļa izstrādātājiem

Ir dažas lielas metodes CSS koda strukturēšana, un viņi visi strādā dažādos veidos. Populārākās ir OOCSS un SMACSS, bet tur ir arī pazīstamākā metode ITCSS (apgriezts trīsstūris CSS) radījis Harijs Roberts.

Tā nav bibliotēka vai ietvars, bet a koda rakstīšanas metodoloģija tas ir mērogojams un viegli manipulējams. ITCSS priekšrocības ir no vienkārša kodu organizācija mazākiem faila izmēriem un CSS arhitektūras izpratnei.

ITCSS nav paredzēts visiem, bet tas nodrošina profesionālu veidu, kā kodēšanas procesā apskatīt stilu. Let's ienirt koncepcijas aiz ITCSS, un redzēt, kā tās var piemērot interneta projektiem.

Kas ir ITCSS?

Mūsdienīgi CSS organizēšanas veidi bieži atgriežas modularizācija vai CSS objekti veidot abstraktas idejas.

Jaunā ideja par apgriezto trijstūru CSS ir a slāņveida veids, kā sadalīt CSS īpašības pamatojoties uz to specifiskuma un nozīmīguma līmeni. Tā ir mazāk pazīstama metode, salīdzinot ar SMACSS un OOCSS - lai gan abus var apvienot ar ITCSS.

Tā kā ITCSS ir galvenokārt īpašumtiesības, nav detalizētu noteikumu par tās lietošanu. Tikai a konkrētu principu kopums ir mūsu rīcībā. Autors par tiem runā tālāk redzamajā videoklipā.

Pēc noklusējuma ITCSS izmanto tādus pašus principus kā OOCSS, bet ar lielāku atdalīšanu pamatojoties uz specifiskumu. Tātad, ja jūs jau esat iepazinušies ar OOCSS, uzskatiet to par unikālu alternatīva CSS arhitektūra mēģināt.

Šeit ir daži no lielākajiem ITCSS izmantošanas ieguvumiem:

• Lapas objektus var sadalīt savos CSS / SCSS failos atkārtota izmantošana. Tas ir vienkārši kopēt / ielīmēt un paplašināt katru objektu citiem projektiem.
• Specifiskuma dziļums ir atkarīgs no tevis.
• Tur ir nav iestatīta mapju struktūra, un nav nepieciešama priekšapstrādes rīku izmantošana.
• Jūs varat apvienot koncepcijas no citām metodēm, piemēram, CSS moduļiem izveidot savu hibrīda darbplūsmu.

ITCSS sistēma

Apskatīsim, kā darbojas apgrieztā trīsstūra modelis, izmantojot šādu ilustrāciju no Lubosa Kmetko amata.

Virziena plūsma no apgrieztā trijstūra plakanas augšpuses līdz galam apakšā simbolizē specifiskuma pieaugums. Tas koncentrēties uz mazāk specifiskumu ļauj vairākkārt atkārtoti izmantot klases vienā vietā.

Katru trijstūra apakšiedaļu var uzskatīt par atsevišķu failu vai failu grupu, lai gan šādā veidā jums nav nepieciešams rakstīt kodu. Tas ir vairāk jēga Sass / mazāk lietotājiem, jo ​​importēšanas funkcija. Domājiet par katru apakšnodaļu kā metodoloģiju atkārtoti izmantojamu CSS kodu sadalīšana un organizēšana.

Apskatīsim ātri katru apgrieztā trijstūra sadaļu pārvietojas no augšas uz galu.

• Iestatījumi - Priekšapstrādes mainīgie un metodes (faktiskā CSS izejas nav)
• Rīki - Sajaukumi un funkcijas (nav faktiska CSS izejas)
• Vispārējs - CSS atiestatīšana, kas var ietvert Eric Meyer atiestatīšanu, Normalize.css vai savu partijas kodu
• Elementi - Viena HTML elementa selektori bez klasēm
• Objekti - Klases lapas struktūrai parasti seko OOCSS metodikai
• Sastāvdaļas - Estētiskās nodarbības visu un visu lapu elementu veidošanai (bieži vien kopā ar objektu klasēm)
• Trumpi - Vispiemērotākie stili, lai pārvarētu kaut ko citu trīsstūrī

Katrs apvērstā trijstūra slānis var būt pielāgota jūsu vajadzībām. Tātad, ja jūs neizmantojat CSS priekšapstrādātāju, tad jums nebūs vajadzīgi iestatījumi vai rīku slāņi.

Jums vajadzētu justies brīvi interpretēt katru apakšiedaļu, kā redzat. Piemēram, Jordan Koschei izskaidro, kā viņš kopā apvieno struktūru un estētiku objektu klasēs, atstājot ļoti maz sastāvdaļu sadaļā.

ITCSS ir nav grūti un ātri noteikumi ka jums ir jāievēro. Nav ITCSS atbilstības pārbaudītāja, un neviens jums netiks kliegts, lai nedaudz mainītu šo modeli.

Lai gan ITCSS radītājs Harijs Roberts bija ieinteresēts saglabāt savas metodes, lai tās izmantotu iekšējai lietošanai, jūs varat atrast atvērtā koda piemērs ITCSS šajā GitHub repo. To vada CSS Wizardry konts, kas ir Harija Roberta personīgā tīmekļa vietne.

BEM + IT = BEMIT nosaukumi

Viena no populārākajām CSS nosaukumu shēmām ir BEM. Tas nozīmē Block-Element-Modifier un seko ļoti konkrētai sintaksei.

Katrs BEM elements raksturo CSS klasēm nosaukumu piešķiršanas konvenciju:

• Bloki ir klases atsevišķiem elementiem, ko var atkārtot un patstāvīgi.
• Elementi vienmēr ir bloka daļa
• Modifikatori vienmēr mainiet bloku vai elementu, lai nedaudz izmainītu tās izskatu (ieslēgts / izslēgts, aktīvs / neaktīvs, fiksēts, statisks, izcelt / neitrāls).

BEMIT ir nosaukuma konvencija ITCSS, kas aizņemas no BEM idejas, ieviešot jaunas idejas ar ITCSS.

BEM sintakse nosaka ļoti specifiskus noteikumus. Zemāk ir paraugs no BEM tīmekļa vietnes:

.veidlapa  .form - theme-xmas  .form - vienkārša  .form__input  .form__submit  .form__submit - izslēgta  

Blokiem ir vārdi, kuriem nav atdalīšanas, vai vārdi, kas atdalīti ar vienu domuzīmi vai vienu pasvītrojumu. Elementi izmanto divus pasvītrojumus un apraksta iekšējos elementus, kas atbilst šim konkrētajam blokam. Modifikatori darbojas vienādi, bet identifikācijai izmanto divus domuzīmes.

Harijs šajā emuāra ziņojumā padziļinās BEMIT. Viņa apraksts ir ļoti īss, un tas parāda, ka ITCSS patiesais raksturs ir spēlēt draudzīgu ar citām CSS metodēm.

Harijs definē objektu nosaukumvietas parādās kā prefiksus katram galvenajam klases nosaukumam. Tie sadalās kā o- priekšmetiem, c- komponentiem un u- komunālajiem pakalpojumiem (piemēram, skaidrojuma vai teksta centrēšana).

Šeit ir daži parauga kodi tipiskas BEMIT nosaukumu konvencijas.

  
… 
 
 

Viņš arī iesaka izmantot @ sufikss klasēm, kas balstītas uz mediju stiliem. Tātad .o-mediji klase var mainīties uz .o-media @ lg lieliem ekrāniem un .o-media @ md vidēja izmēra ekrāniem.

Personīgi es domāju, ka papildu sufiksi ir pārāk apvērsums par pamata interneta projektiem. Es domāju, ka lielākā daļa izstrādātāju drīzāk izmantotu kopīgus mediju vaicājumus un pārrakstītu klases dažādos pārtraukuma punktos. Bet es nevaru teikt, ka kāda metode ir pareiza vai nepareiza, un ikviens var individuāli izlemt, vai viņi vēlas izmantot BEMIT vai nē.

Es ļoti iesaku izlasīt šo intro BEMIT rakstu, lai uzzinātu vairāk par to, kāpēc ITCSS paplašināja BEM, un kā jūs varētu vēlēties nosaukt savas CSS klases.

ITCSS var apkopot kā organizatoriskā metode rakstīšanai atkārtoti izmantojamu un pielāgojamu CSS. BEM ir vēlamā nosaukuma sintakse un BEMIT paplašina šo darbu ar nosaukumu laukiem, lai iegūtu precīzāku un atpazīstamu kodu.

Ir daudz ko mācīties, un, ja jūs esat jauns CSS, tas būs grūts jēdziens, lai pārtrauktu. Bet, ja esat gatavs mācīties, es garantēju, ka būsiet pārsteigts ar ITCSS koda gludo raksturu.

Iesaiņošana

Front-end izstrādātāji vienmēr cenšas optimizēt savu darbplūsmu. ITCSS ir tikai vēl viena metode, kas var palīdzēt uzlabot sarežģītu tīmekļa vietņu strukturēšanas metodi.

Grūtības ir mācīties, kā tā darbojas reālā projekta darbā. Ja jums ir savlaicīgums un brauciens, lai uzzinātu, ITCSS var būt kaut kas, kas ir noderīgs, lai pievienotu jūsu rīkkopa. Lai gan es neesmu atradis nevienu oficiālu dokumentāciju, tiešsaistē joprojām ir daudz resursu, lai uzzinātu par ITCSS.

• Pārvaldiet liela mēroga tīmekļa projektus ar jaunu CSS arhitektūru ITCSS (creativebloq.com)
• CSS projektu vadīšana ar ITCSS - prezentācijas slaidi (speakerdeck.com)
• CSS projekti ar ITCSS (1 stundu video prezentācija)
• ITCSS - interesants veids, kā organizēt liela mēroga projektus (css-tricks.com)

(Cover photo via speakerdeck.com)