Sisältö
- Esittelyssä ITCSS
- Edellytykset
- Keskeiset mittarit
- 01. Yleinen nimenomaiseen
- 02. Matala spesifisyys korkealle spesifisyydelle
- 03. kauaskantoinen lokalisoitu
- Kerrokset
- Osittaiset
- Lopputulos
Harry Roberts puhuu Luo Bangalore 2. joulukuuta. Älä missaa hänen puhettaan refraktoida CSS menettämättä mieltäsi, jossa hän jakaa vinkkejä ja tekniikoita vanhan CSS: n käsittelemiseksi. Varaa nyt tulla Generate-perustajajäseneksi ja saada 50% alennus kaikista tulevista Generate-konferensseista maailmanlaajuisesti!
CSS-arkkitehtuuri näyttää olevan hieman muodissa juuri nyt. Se on jotain, jonka olet epäilemättä kuullut mainittavan useita kertoja kuluneen vuoden aikana, ja syystä: Käyttöliittymät (ja niitä rakentavat tiimit) ovat suurempia ja monimutkaisempia kuin koskaan ennen.
CSS: stä on useita näkökohtia, jotka tekevät siitä hankalaa. Se on vakuuttava, eli ei ole logiikkaa tai ohjausvirtaa, joka kerroisi muille kehittäjille paljon projektin tilasta tai rakenteesta. Se toimii globaalissa nimitilassa, mikä tarkoittaa, että saamme törmäyksiä, vuotavia tyylejä ja tahatonta regressiota. Se hyödyntää perintöä, mikä tekee kaikesta jonkin verran toisistaan riippuvaisen ja hauraan. Lopuksi väistämätön spesifisyysmalli voi aiheuttaa ongelmia, kun valitsimet taistelevat keskenään näkyvyyden puolesta.
Nämä kaikki ovat itsessään ongelmia, mutta työskennellessään missä tahansa kohtuullisessa mittakaavassa ne joko näkyvät suoraan tai todennäköisyys tällaisten ongelmien kohtaamisesta on tilastollisesti paljon suurempi. Anna CSS-arkkitehtuuri: tapa suunnitella ja jäsentää CSS suurille ja pitkäkestoisille projekteille.
Esittelyssä ITCSS
Arkkitehtuuria, jota tarkastelemme tänään, kutsutaan nimellä ITCSS - ”Inverted Triangle CSS”. Tämä on menetelmä, johon sisältyy koko CSS-projektisi visualisointi kerrostettuna, ylösalaisin kolmiona. Tämä hierarkkinen muoto edustaa mallia, joka auttaa sinua tilaamaan CSS: n tehokkaimmalla ja vähäisimmällä tavalla. Kaivetaan sisään!
ITCSS on asia, jonka parissa olen työskennellyt muodossa tai toisessa jo noin neljä vuotta. Ei ole sattumaa, että olen myös viettänyt viimeiset neljä vuotta yksinomaan digitaalisten tuotteiden parissa: suuret, pitkäkestoiset projektit, joissa kokonaiset insinööritiimit työskentelevät kuukausien ajan samalla koodipohjalla.
Tällaisessa ympäristössä (perintö, uudet ominaisuudet, lukuisat avustajat, suuri nopeus, kertynyt tekninen velka, ristiriitaiset sidosryhmien huolenaiheet) tarvitaan paljon huolellisuutta ja rakennetta kirjoittamallemme koodille. Siksi keksin ITCSS: n; auttaa näiden suurten projektien parissa työskenteleviä kehittäjiä organisoimaan, laajentamaan ja hallinnoimaan CSS: ää paremmin.
ITCSS pyrkii tarjoamaan muodollisuuden ja rakenteen CSS: n kirjoittamistavallemme. Se ei ole valtava poikkeaminen normista, mikä tarkoittaa, että siirtyminen ITCSS: ään ei saisi osoittautua liian vaikeaksi. Lisäksi, jos useimmissa arkkitehtuureissa ja lähestymistavoissa yritetään välttää CSS: n ärsyttävät näkökohdat, ITCSS omaksuu ja kesyttää ne ja saa ne toimimaan hyödyksi. ITCSS määrittelee projektin yhteiset näkökohdat loogisella ja järkevällä tavalla ja tarjoaa samalla vankan kapseloinnin ja irrotuksen, joka suojaa jakamattomat näkökohdat häiritsemästä toisiaan.
ITCSS on myös uskomattoman joustava. Se on yhteensopiva muiden menetelmien, kuten SMACSS, OOCSS ja jopa BEM, näkökohtien kanssa. Sitä voidaan laajentaa tai parittaa takaisin tarvittaessa projektistasi riippuen. Se toimii esiprosessorin kanssa tai ilman sitä, eikä se pakota mitään erityisiä nimeämiskäytäntöjä (vaikka suosittelen aina käyttämään sellaista). Tämä joustavuus tarkoittaa, että ITCSS: ää voidaan käyttää minkä tahansa kokoisessa tai tyylisessä projektissa.
Edellytykset
Ennen kuin perehdymme yksityiskohtiin, on muutama edellytys työskennellessäsi ITCSS: n kanssa.Kaikista näistä on tulossa standardikäytäntö jokaiselle modernille käyttöliittymäkehittäjälle. Ensinnäkin, ei tunnuksia CSS: ssä. Henkilötunnukset ovat spesifisiä raskaspainoja, ja niiden käyttö heittää spesifisyytemme kokonaan nivelestä.
Toiseksi sinun on työskenneltävä komponentoituun käyttöliittymäarkkitehtuuriin. Et enää rakenna sivun mallin mukaan, vaan widgetien / moduulien / komponenttien mallin mukaan (ITCSS viittaa näihin komponentteihin). Rakennat erillisiä, itsenäisiä käyttöliittymän osia uudelleenkäytettävinä komponentteina.
Lopuksi, ITCSS edellyttää, että kannatat luokkapohjaista arkkitehtuuria. Et pelkää luokkien lisäämistä HTML-koodiin; et usko, että "vähemmän merkintöjä" ja "puhtaita merkintöjä" ovat sama asia; ja ymmärrät, että sitoutuminen luokkiin paljaiden HTML-elementtien sijasta tarjoaa vankemman ja skaalautuvamman arkkitehtuurin.
Keskeiset mittarit
ITCSS on täysin hallittu arkkitehtuuri, mikä tarkoittaa, että se kertoo kuinka rakentaa koko CSS-projekti. Se ei vain kerro sinulle, miten esimerkiksi komponentit rakennetaan, vaan auttaa sinua hallitsemaan kaikkea Sass-arkkitehtuurista lähdeluetteloon, matalan tason typografisiin tyyleihin ja paljon muuta.
ITCSS toimii tilaamalla koko CSS-projektisi kolmella keskeisellä mittarilla. Katsomme näitä nyt.
01. Yleinen nimenomaiseen
Aloitamme yleisimmillä, matalimmilla, kattavimmilla, huomaamattomimmilla tyyleillä ja edistymme lopulta selkeämpiä ja tarkempia sääntöjä edetessä projektia. Voisimme aloittaa palautuksestamme ja siirtyä sitten hieman laajempiin sääntöihin, kuten h1–6 {}, aivan äärimmäisen selkeisiin sääntöihin, kuten .text-center {}.
02. Matala spesifisyys korkealle spesifisyydelle
Pienimmän spesifisyyden valitsimet näkyvät alussa, ja spesifisyys kasvaa tasaisesti projektin edetessä. Haluamme varmistaa, että vältämme niin paljon spesifisyyden sotia kuin pystymme, joten yritämme pidättäytyä kirjoittamasta korkeamman spesifisyyden valitsimia ennen matalamman spesifisyyden omaavia. Lisäämme aina tarkkuutta samaan suuntaan välttäen konflikteja.
03. kauaskantoinen lokalisoitu
Valitsimet kohti projektin alkua vaikuttavat suureen osaan DOM: a, ja tätä ulottuvuutta vähennetään asteittain, kun käymme läpi koodipohjan. Haluamme tehdä "läpäisyjä" DOM: n yli kirjoittamalla sääntöjä, jotka vaikuttavat asteittain yhä vähemmän siihen.
Voisimme aloittaa pyyhkimällä marginaalit ja pehmusteet kaikesta, sitten voimme tyylittää jokaisen tyyppisen elementin, sitten kaventaa sen alas jokaiselle elementtityypille, johon on sovellettu tietty luokka, ja niin edelleen. Se on tämä asteittainen kapeneminen, joka antaa meille kolmion muodon.
Projektien tilaamisella näiden keskeisten mittareiden mukaan on useita etuja. Voimme alkaa jakaa globaaleja ja kauaskantoisia tyylejä paljon tehokkaammin, pienennämme huomattavasti spesifisyysongelmien todennäköisyyttä ja kirjoitamme CSS: n loogisessa ja progressiivisessa järjestyksessä. Tämä tarkoittaa suurempaa laajennettavuutta ja vähemmän redundanssia, mikä puolestaan tarkoittaa vähemmän jätettä ja paljon pienempiä tiedostokokoja.
Kerrokset
Voimme pitää kiinni näistä mittareista jakamalla CSS: n useisiin osioihin tai kerroksiin. Jokainen kerros on sijoitettava paikkaan, joka täyttää kaikki kriteerit. Suurin osa ihmisistä (ja arkkitehtuureista) yrittää jakaa CSS-projektit temaattisiin ryhmiin: tässä ovat typografiset tyylimme, tässä ovat lomaketyylimme, tässä ovat kuvagalleriatyylimme. Tämän haittapuoli on, että se ei ole kovin sympaattinen CSS: n todelliselle toiminnalle, eikä se tilaa CSS: ää tavalla, joka parhaiten hyödyntää, kesyttää tai hyödyntää kaskadia, perintöä tai spesifisyyttä.
ITCSS: ssä jokainen taso on looginen edistysaskel viimeisestä. Se lisää spesifisyyttä, se tulee selkeämmäksi ja tarkoituksellisemmaksi ja kaventaa käytettyjen valitsimien ulottuvuutta. Tämä tarkoittaa, että CSS: ää on luonnostaan helpompi skaalata, koska kirjoitamme sen järjestyksessä, joka vain lisää aikaisemmin kirjoitettua. Emme tuhlaa aikaa kumoamalla tai ohittamalla aiemmin kirjoitettua liian mielipiteellistä CSS: ää.
Se tarkoittaa myös, että kaikilla ja kaikilla tavoilla on oma johdonmukainen, ennustettavissa oleva paikka elää. Tämä tekee sekä tyylien löytämisen että lisäämisen paljon yksinkertaisemmaksi, mikä on erityisen hyödyllistä, kun monet kehittäjät osallistuvat koodipohjaan.
ITCSS: llä on oletuksena seitsemän tasoa. Tarkastelemme näitä kaikkia vuorotellen.
01. Asetukset
Jos käytät esiprosessoria, aloita tästä. Tämä sisältää kaikki projektisi globaalit asetukset. Haluaisin korostaa sanaa globaali - tähän kerrokseen tulisi sijoittaa vain asetukset, joihin on päästävä käsiksi mistä tahansa. Asetukset, kuten $ head-size-1, tulisi määrittää osiossa Otsikot. Tämä varmistaa, että tämä kerros pysyy mukavana ja ohutna, ja tarkoittaa, että suurin osa asetuksista löytyy niitä käyttävän koodin rinnalla, mikä tekee asioiden löytämisestä paljon yksinkertaisempaa.
Esimerkkejä globaaleista asetuksista voivat olla esimerkiksi kirjasimen peruskoko, väripaletit, config (esimerkiksi $ ympäristö: dev;) ja niin edelleen.
02. Työkalut
Seuraava kerros sisältää maailmanlaajuisesti käytettävissä olevat työkalut - nimittäin mikit ja toiminnot. Miksauksen tai toiminnon, jota ei tarvitse käyttää maailmanlaajuisesti, tulisi kuulua osaan, johon se liittyy. Työkalut-kerros tulee Asetukset-tason jälkeen, koska miksaus voi edellyttää jotakin globaaleista asetuksista oletusparametrina. Esimerkkejä globaaleista työkaluista voivat olla gradienttiyhdistelmät, kirjasinkokoiset sekoitukset ja niin edelleen.
03. Yleinen
Yleinen kerros on ensimmäinen, joka todella tuottaa minkä tahansa CSS: n. Siinä on erittäin korkeatasoisia, kauaskantoisia tyylejä. Tätä tasoa muokataan harvoin, ja se on yleensä sama kaikissa projekteissa, joissa työskentelet. Se sisältää asioita, kuten Normalize.css, globaalit laatikon kokosäännöt, CSS-nollaus ja niin edelleen. Geneerinen kerros vaikuttaa suureen osaan DOM: ia, joten se on mukava ja leveä Triangle-mallissa ja esiintyy hyvin varhaisessa vaiheessa.
04. Elementit
Nämä ovat paljaita, luokittelemattomia HTML-elementtejä. Miltä h1 näyttää ilman luokkaa? Miltä ulkonäkö näyttää ilman luokkaa? Elements-kerros sitoutuu vain paljaisiin HTML-elementtien (tai ”tyypin”) valitsimiin. Se on hieman selkeämpi kuin edellinen kerros siinä, että sanomme nyt "tee jokaisesta h1: stä näin iso" tai "tee jokaisesta a tietyn värinen". Se on edelleen hyvin matala-spesifinen kerros, mutta vaikuttaa hieman vähemmän DOM: iin, ja on hieman enemmän mielipidettä, joten sen sijainti kolmiossa.
Elementit-kerros on tyypillisesti viimeinen, josta löydämme paljaita, elementtipohjaisia valitsimia, ja se lisätään tai muutetaan hyvin harvoin alkuasetusten jälkeen. Kun olemme määrittäneet elementtitason tyylit, kaikki lisäykset ja poikkeamat tulisi toteuttaa luokkien avulla.
05. Esineet
OOCSS: n käyttäjät tuntevat esineiden käsitteen. Tämä on ensimmäinen kerros, josta löydämme luokkaperusteiset valitsimet. Nämä koskevat muiden kuin kosmeettisten muotoilumallien tai ”esineiden” muotoilua. Objektit voivat vaihdella niin yksinkertaisesta kuin .wrapper-elementistä asettelujärjestelmiin, esimerkiksi OOCSS-juliste-alkuun - mediaobjektiin. Tämä kerros vaikuttaa vähemmän DOM: iin kuin viimeinen kerros, sillä on korkeampi spesifisyys ja se on hieman selvempi siinä, että kohdennamme DOM: n osiin nyt luokkia.
06. Komponentit
Komponentit-taso on paikka, josta alamme muotoilla tunnistettavia käyttöliittymän osia. Olemme edelleen sitovia täällä oleviin luokkiin, joten spesifisyytemme ei ole vielä lisääntynyt. Tämä kerros on kuitenkin selkeämpi kuin viimeinen, koska nyt muotoilemme nimenomaisia, suunniteltuja kappaleita DOM: sta.
Tästä kerroksesta ei pitäisi löytää valitsimia, joiden spesifisyys on matalampi kuin yhden luokan. Täällä suurin osa työstäsi tapahtuu projektin alustavan asennuksen jälkeen. Uusien komponenttien ja ominaisuuksien lisääminen on yleensä valtaosa kehityksestä.
07. Trumps
Tämä kerros voittaa - tai 'lyö' - kaikki muut kerrokset, ja sillä on valta kumota kaikki edeltäjänsä. Se on epälegantti ja raskaskätinen, ja se sisältää apu- ja apuluokkia, hakkereita ja ohituksia.
Paljon tämän kerroksen ilmoituksista on! Tärkeää (esim. .Teksti-keskus {teksti-tasaa: keskusta! Tärkeä;}). Tämä on korkein spesifisyystaso - se sisältää kaikkein selkeimmät sääntötyypit, kapeimmalla kohdennuksella. Tämä kerros muodostaa kolmion pisteen.
Joten sen sijaan, että ryhmiteltäisiin asiat ”typografisiin tyyleihin” tai ”muodon tyyleihin”, jaamme ne ryhmiin, jotka perustuvat spesifisyyteen, ulottuvuuteen ja selitykseen. Tämän muodon avulla voimme kirjoittaa CSS: n järjestyksessä, joka vain lisää ja perii aikaisemman.
Vietämme hyvin vähän aikaa kumoamaan asioita, koska kaskadimme ja spesifisyytemme osoittavat kaikki samaan suuntaan. Vähennämme huomattavasti törmäysten, vuotojen ja uudelleenmäärittelyjen määrää.
Osittaiset
Jokainen kerros sisältää sarjan osioita. Suosittelen nimeämiskäytäntöä _layer> .partial> .scss (esimerkiksi: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss).
Nämä osiot on pidettävä mahdollisimman pieninä ja rakeisina, ja kukin niistä sisältää vain niin paljon CSS: ää kuin tarvitaan tehtävänsä suorittamiseen. Joten _elements.headings.scss sisältäisi vain säännöt h1 - h6 eikä mitään muuta. Jos sinulla on esimerkiksi Sivun otsikkokomponentti, joka saa pääotsikon (esim. H1) ja alaotsikon (esim. H2) näyttämään tietyllä tavalla, luodaan _components.page-title.scss osittain Komponentit-kerrokseen ja sidotaan luokkiin (esim. .page-title, .page-title-sub), ei HTML-elementteihin.
Näin ITCSS toimii: emme aseta kaikkia otsikkoon liittyviä tyylejämme yhteen. Sen sijaan sijoitamme kaikki elementtipohjaiset säännöt yhteen ja kaikki luokkaperusteiset säännöt yhteen. Tilaamme nyt projektin hyödyllisten CSS-mittareiden perusteella, emmekä luo hankalia spesifisyyksiä ja kaskadiryhmiä tilaamalla projektin temaattisiksi paloiksi.
Lopputulos
Kun tämä kaikki tulee yhteen, se voi näyttää tältä:
@import "settings.global"; @import "settings.colors"; @import "tools.functions"; @import "tools.mixins"; @import "generic.box-sizing"; @import "generic.normalize"; @import "elements.headings"; @import "elements.linkit"; @import "object.wrappers"; @import "objects.grid"; @import "components.site-nav"; @import "komponentit.painikkeet"; @import "komponentit.karuselli"; @import "trumps.clearfix"; @import "trumps.utilities"; @import "trumps.ie8";
Jopa tässä pienessä esimerkissä näet, kuinka kukin kerros voi sisältää minkä tahansa määrän osia, ja nämä osiot voivat teoriassa istua missä tahansa haluamassasi @import-järjestyksessä. Ainoa vaatimus on, että kerrokset itse pysyvät aina tässä muodostumassa.
Varmistamme, että jokainen kerros sisältää CSS:
- Samanlainen erityispiirre: Kaikki elementtipohjaiset valitsimet tai kaikki luokkapohjaiset valitsimet tai apuohjelmaluokat!
- Samanlainen selitys: Kaikkien paljaiden HTML-elementtien tai käyttöliittymän osien muotoilu tai tiettyjen auttajaluokkien muotoilu
- Samankaltainen ulottuvuus: Kyky vaikuttaa kaikkeen DOM: iin (esim. * {}), DOM: n osajoukkoon (esim. {}), DOM: n osaan (esim. Karuselli {}) tai tiettyyn DOM-solmuun (esim. .clearfix {})
Tämä porausmenetelmä antaa meille paljon hallittavamman CSS-arkkitehtuurin. Nyt tiedämme, että kaiken lisäämämme pitäisi olla lisäys kaikkeen, mitä on ennen mennyt. Tiedämme, missä kukin sääntömuoto elää ja mihin laittaa kaikki uudet tyylit, ja olemme varmoja siitä, että kaikki eri valitsemamme pelaavat hienosti rinnakkain.
Jos haluat tutkia ITCSS: ää tarkemmin, katsokaa Harry Robertsin esittelypuhetta DaFED: ssä ...
Vihatko vanhojen CSS: ien kanssa työskentelyä? Älä missaa Harry Robertsia Luo Bangalore puhu vaan refraktoida CSS menettämättä mieltäsi. Varaa nyt nauttia tästä ja muista johtavien verkkonimien keskusteluista, mukaan lukien Jonathan Snook, Stephanie Rieger ja Shikhar Kapoor.
Tämä artikkeli ilmestyi alun perin numerossa 267 nettilehti.
