Hallitse suuria CSS-projekteja ITCSS: n avulla

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 kertomaan 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ähiten tuhlaavalla tavalla. Kaivetaan sisään!

ITCSS on asia, jonka parissa olen työskennellyt muodossa tai toisessa noin neljä vuotta. Ei ole sattumaa, että olen myös viettänyt viimeiset neljä vuotta yksinomaan digitaalisten tuotteiden parissa: suuret, pitkät projektit, joissa kokonaiset insinööritiimit työskentelevät saman koodipohjan kanssa kuukausia peräkkäin.

Tällaisessa ympäristössä (perintö, uudet ominaisuudet, lukuisat avustajat, suuri nopeus, kertynyt tekninen velka, ristiriitaiset sidosryhmien huolenaiheet) tarvitaan paljon enemmän huolellisuutta ja rakennetta kirjoittamallemme koodille. Siksi keksin ITCSS: n; auttaa näiden suurten projektien parissa työskenteleviä kehittäjiä organisoimaan, laajentamaan ja hallinnoimaan CSS: ää.



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, missä useimmissa arkkitehtuureissa ja lähestymistavoissa yritetään välttää CSS: n ärsyttäviä näkökohtia, 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.

kuinka tallentaa polku Photoshopiin

Edellytykset

Ennen kuin perehdymme yksityiskohtiin, ITCSS: n kanssa työskentelyssä on muutama edellytys. 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ä komponentoidun käyttöliittymäarkkitehtuurin parissa. Et enää rakenna sivumalliin, vaan widgetien / moduulien / komponenttien malliin (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.

Opi kuinka CSS muokataan menettämättä mieltäsi Generate Bangaloressa

Opi kuinka CSS muokataan menettämättä mieltäsi Generate Bangaloressa

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ähdetilaukseen, matalan tason typografisiin tyyleihin ja paljon muuta.

ITCSS toimii tilaamalla koko CSS-projektisi kolmella keskeisellä mittarilla. Katsomme näitä nyt.

Epätavallinen tai harkitsematon lähdekoodijärjestys voi johtaa tyylien virheelliseen ja hyppäämiseen

Epätavallinen tai harkitsematon lähdekoodijärjestys voi johtaa tyylien virheelliseen ja hyppäämiseen

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 siten 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 tyylitellä 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.

kuinka piirtää pieni lintu

Projektien tilaamisella näiden tärkeiden 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

Käänteisen kolmion kolme keskeistä mittaria

Käänteisen kolmion kolme keskeistä mittaria

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 liian kirjoitettuja CSS: iä.

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: ssä on oletuksena seitsemän tasoa. Katsotaan nyt kutakin näistä vuorotellen.

01. Asetukset

Jos käytät esiprosessoria, aloita tästä. Tämä sisältää kaikki projektisi globaalit asetukset. Haluan korostaa sanaa globaali - tämän tason tulisi sisältää vain asetukset, joihin on päästävä käsiksi mistä tahansa. Asetukset, kuten $ head-size-1, tulisi määritellä Otsikot osittain. 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 vierestä, 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-taso tulee Asetukset-tason jälkeen, koska miksaus voi edellyttää jotakin yleisasetuksista oletusparametrina. Esimerkkejä globaaleista työkaluista voivat olla gradienttiyhdistelmät, fonttien koonmuutosseokset 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 paljon DOM: iin, 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-elementin (tai 'tyypin') valitsimiin. Se on hieman selkeämpi kuin edellinen kerros siinä, että sanomme nyt 'tee jokaisesta h1: stä 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.

Elements-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ä kasvanut. 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ä suurin osa kehityksestä.

07. Trumps

Tämä kerros voittaa - tai 'lyö' - kaikki muut kerrokset, ja sillä on voima ohittaa 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.

Tämän kerrostetun, keskeisiin mittareihin perustuvan ITCSS-lähdetilausmenetelmän noudattaminen antaa meille järkevän tyylien soveltamisen koko projektissamme

Tämän kerrostetun, keskeisiin mittareihin perustuvan ITCSS-lähdetilausmenetelmän noudattaminen antaa meille järkevän tyylien soveltamisen koko projektissamme

Joten sen sijaan, että ryhmitettäisiin asiat 'typografisiin tyyleihin' tai 'muotoihin', 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ää.

Jos kuvittelemme kolmion uudelleen kartiona, voimme katsoa sitä alaspäin nähdäksesi jokaisen kerroksen ulottuvuuden

Jos kuvittelemme kolmion uudelleen kartiona, voimme katsoa sitä alaspäin nähdäksesi jokaisen kerroksen ulottuvuuden

Osittaiset

Jokainen kerros sisältää sarjan osioita. Suosittelen nimeämiskäytäntöä _ .. 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 asetamme 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.links'; @import 'objects.wrappers'; @import 'objects.grid'; @import 'components.site-nav'; @import 'components.buttons'; @import 'components.carousel'; @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 taso sisältää CSS:

  • Samanlainen spesifisyys: Kaikki elementtipohjaiset valitsimet tai kaikki luokkapohjaiset valitsimet tai apuohjelmaluokat!
  • Samanlainen selitys: Kaikkien paljaiden HTML-elementtien tai käyttöliittymän 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. korjaus {})

Tämä poraustapa 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.

parhaat sosiaalisen median sivustot taiteilijoille

Jos haluat tutkia ITCSS: ää tarkemmin, katsokaa Harry Robertsin esittelypuhetta DaFED: ssä ...

Vihaatko 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 .