Intro ITCSS lle Web-kehittäjille

Siellä on kourallinen hienoja menetelmiä CSS-koodin jäsentäminen, ja ne kaikki toimivat eri tavoin. Suosituimmat ovat OOCSS ja SMACSS, mutta tunnetaan myös vähemmän tunnettu menetelmä ITCSS (käänteinen kolmio CSS) luonut Harry Roberts.

Se ei ole kirjasto tai kehys, vaan a koodin kirjoittamisen menetelmät se on skaalautuva ja helppo käsitellä. ITCSS: n edut vaihtelevat yksinkertainen koodijärjestely pienempiä tiedostokokoja ja ymmärtää paremmin CSS-arkkitehtuuria.

ITCSS ei ole kaikille, mutta se tarjoaa ammattimaisen tavan tarkastella tyylitaulukoita selkeästi koodausprosessin aikana. Lyömme ITCSS: n takana oleviin käsitteisiin ja katso, miten niitä voidaan soveltaa web-projekteihin.

Mikä on ITCSS?

Nykyaikaiset tapoja järjestää CSS usein takaisin modularisointi tai CSS-objektit rakentaa abstrakteja ideoita.

Uusi idea käännetystä kolmiosta CSS on a kerrostettu CSS-ominaisuuksien jakaminen niiden erityispiirteen ja tärkeyden perusteella. Se on vähemmän tunnettu menetelmä kuin SMACSS ja OOCSS - vaikka molemmat voidaan yhdistää ITCSS: iin.

Koska ITCSS on enimmäkseen omistusoikeus, sen käytöstä ei ole olemassa yksityiskohtaisia ​​sääntöjä. Vain a tiettyjä periaatteita on käytössä. Kirjoittaja puhuu niistä alla olevassa videossa.

Oletuksena ITCSS käyttää samoja periaatteita kuin OOCSS mutta suuremmalla erottelulla spesifisyyden perusteella. Joten jos olet jo perehtynyt OOCSSiin, pidä tätä ainutlaatuisena vaihtoehtoinen CSS-arkkitehtuuri yrittää.

Seuraavassa on joitakin ITCSS: n käytön suurimpia etuja:

• Sivun kohteet voidaan jakaa omiin CSS / SCSS-tiedostoihinsa uudelleenkäytettävyys. On helppo kopioida / liittää ja laajentaa jokaista kohdetta muihin hankkeisiin.
• Spesifisyyden syvyys on sinusta kiinni.
• Siellä on ei asetettu kansiorakenne, ja esikäsittelyvälineiden käyttöä ei tarvita.
• Voit yhdistää käsitteitä muista menetelmistä, kuten CSS-moduuleista luo oma hybridi työnkulku.

ITCSS-järjestelmä

Katsotaanpa, miten käännetyt kolmion mallit toimivat käyttämällä seuraavaa kuvaa Lubos Kmetkon virasta.

Suuntavirta käännetyn kolmion tasaisesta yläosasta alaspäin kärjeen alapuolelle symboloi spesifisyyden lisääntyminen. Tämä keskittyä vähemmän spesifisyyteen helpottaa luokkien uudelleenkäyttöä sivustossa useita kertoja.

Jokainen kolmion osa voidaan pitää erillisenä tiedostona tai tiedostojen ryhmänä, vaikka sinun ei tarvitse kirjoittaa koodia tällä tavalla. Se on järkevämpää Sass / vähemmän käyttäjille tuontiominaisuuden vuoksi. Ajattele jokainen alajakso metodologiaksi uudelleenkäytettävän CSS-koodin jakaminen ja järjestäminen.

Katsotaanpa nopeasti käännetyn kolmion jokainen osa liikkuu ylhäältä alas kärjelle.

• asetukset - Preprocessor-muuttujat ja -menetelmät (ei todellista CSS-lähtöä)
• Työkalut - Sekoittimet ja toiminnot (ei todellista CSS-lähtöä)
• yleinen - CSS nollaa, johon voi sisältyä Eric Meyerin nollaus, Normalize.css tai oma koodiosa
• elementit - Yksittäiset HTML-elementtivalitsimet ilman luokkia
• esineet - Luokat sivurakenteelle tyypillisesti OOCSS-menetelmää noudattaen
• komponentit - Esteettiset luokat minkä tahansa & kaikkien sivuelementtien muotoiluun (usein yhdistettynä objektiluokkien rakenteeseen)
• valtti - Kaikkein erityisimpiä tyylejä, jotka ylittävät kaiken muun kolmion

Jokainen käännetyn kolmion kerros voi olla säädetty tarpeidesi mukaan. Joten jos et käytä CSS-esikäsittelijää, sinun ei tarvitse asetuksia tai työkaluja.

Sinun pitäisi vapaasti tulkita jokainen alajakso sopivaksi. Esimerkiksi Jordan Koschei kertoo, miten hän yhdistää rakenteen ja esteettisyyden yhdessä objektiluokkiin ja jättää vain vähän osia Komponentit-osaan.

ITCSS: llä on ei kovia ja nopeita sääntöjä että sinun on noudatettava. ITCSS-vaatimustenmukaisuuden tarkastajaa ei ole, eikä kukaan huutaa sinua, jos muutat tätä mallia hieman.

Vaikka ITCSS: n luoja Harry Roberts oli kiinnostunut pitämään omia menetelmiä omaan käyttöönsä, löydät sen ITCSS: n avoimen lähdekoodin esimerkki tässä GitHub-repossa. Sen isännöi CSS Wizardry -tili, joka on Harry Robertsin henkilökohtainen verkkosivusto.

BEM + IT = BEMIT-nimeäminen

Yksi suosituimmista CSS-nimitysjärjestelyistä on BEM. Tämä tarkoittaa Block-Element-Modifieria ja seuraa hyvin tiettyä syntaksia.

Jokainen BEM-elementti kuvaa CSS-luokkien nimeämiskäytäntöjä:

• lohkot ovat luokkia yksittäisille elementeille, jotka voidaan kopioida ja olla itsenäisiä.
• elementit ovat aina osa lohkoa
• muokkaajia muokkaa lohkoa tai elementtiä aina muuttamalla sen ulkonäköä (päälle / pois, aktiivinen / ei-aktiivinen, kiinteä, staattinen, korostettu / neutraali).

BEMIT on nimityssopimus ITCSS, joka lainaa ideoita BEM: ltä uusien ideoiden toteuttamisessa ITCSS: n kanssa.

BEM-syntaksi sanelee hyvin erityisiä sääntöjä. Alla on esimerkki BEM-sivustosta:

.lomake  .form - teema-xmas  .form - yksinkertainen  .form__input  .form__submit  .form__submit - pois käytöstä  

Lohkoissa on nimiä, joissa ei ole erottelua, tai nimiä, jotka on erotettu yhdellä viivalla tai yhdellä alaviivalla. Elementit käyttävät kahta alaviivaa ja kuvaavat sisäisiä elementtejä, jotka ovat sopusoinnussa kyseisen lohkon kanssa. Muuttimet toimivat samalla tavalla, mutta käyttävät kahta viivaa tunnistamiseen.

Harry delves syvemmälle BEMITiin tässä blogipostissa. Hänen kuvauksensa on hyvin tiivis ja osoittaa, että ITCSS: n todellinen luonne on pelata ystävällisesti muiden CSS-menetelmien kanssa.

Harry määrittelee nimiavaruudet kohteille näkyvät etuliitteet kullekin pääluokan nimelle. Ne hajoavat O- esineille, C- komponenteille ja U- apuohjelmille (kuten selkeys tai tekstin keskittäminen).

Tässä on joitakin esimerkkikoodeja tyypillisiä BEMIT-nimeämissopimuksia.

  
... 
 
 

Hän suosittelee myös käyttämään @ oheislaji luokkiin, jotka perustuvat mediatyyliin. Joten .O-media luokka saattaa muuttua .O-media @ lg suurille näytöille ja .O-media @ md keskikokoisille näytöille.

Henkilökohtaisesti uskon, että lisäliittymät ovat liian kieroutunut peruspalveluihin. Luulen, että useimmat kehittäjät käyttävät mieluummin tavallisia mediakyselyjä ja kirjoittavat luokat uudelleen eri pisteisiin. Mutta en voi sanoa, että kumpi tahansa menetelmä on oikea tai väärä, ja kuka tahansa voi erikseen päättää, haluavatko he käyttää BEMITia vai ei.

Suosittelen, että luet tämän BEMIT-artikkelin, jotta saat lisätietoja siitä, miksi ITCSS laajensi BEM: ää ja miten haluat nimetä CSS-luokkasi.

ITCSS voidaan tiivistää organisatorinen menetelmä kirjoitusta varten uudelleenkäytettävä ja skaalautuva CSS. BEM on suosituin nimeämissyntaksin ja BEMIT laajentaa tämän toimimaan nimipaikat tarkemman ja tunnistettavissa olevan koodin kanssa.

On paljon opittavaa, ja jos olet uusi CSS: lle, se tulee olemaan kova käsite. Mutta jos olet valmis oppimaan, taaten sinun yllättyvän ITCSS-koodin tyylikästä luonteesta.

Käärimistä

Etukäteen kehittäjät pyrkivät aina optimoimaan työnkulunsa. ITCSS on vain toinen menetelmä, joka voi auttaa parantamaan monimutkaisten verkkosivujen jäsentämisen menetelmää.

Vaikeus on oppia, miten se toimii todellisessa projektityössä. Jos sinulla on tiheys ja oppia, ITCSS voi olla jotain, joka kannattaa lisätä työkalupakettisi. Vaikka en ole löytänyt mitään virallista dokumentaatiota, verkossa on vielä paljon resursseja oppia ITCSS: stä.

• Hallitse suuria verkkoprojekteja uuden CSS-arkkitehtuurin ITCSS: n avulla (Creativebloq.com)
• CSS-projektien hallinta ITCSS: n kanssa - esitystiedot (Speakerdeck.com)
• CSS-projektit ITCSS: llä (1 h videoesitys)
• ITCSS - mielenkiintoinen tapa järjestää suuria hankkeita (Css-tricks.com)

(Kannen kuva osoitteessa speakerdeck.com)