Objektikohtaisen CSS n (OOCSS) perusteet

Frontend-kehitys siirtyy nopeasti, ja uusia tekniikoita lisätään vuosittain. Se voi olla kehittäjien taistelu pysyä kaikessa. Sassin ja PostCSSin välillä on helppo eksyä kehitystyökalujen meressä.

Yksi uudempi tekniikka on Object-Oriented CSS, jota kutsutaan myös OOCSS: ksi. Tämä ei ole työkalu vaan pikemminkin CSS: n kirjoittamismenetelmä tee CSS-modulaarinen ja objektipohjainen.

Tässä viestissä haluan esitellä OOCSS: n perusperiaatteet, ja miten näitä ideoita voidaan soveltaa etuosan web-työhön. Tämä tekniikka ei välttämättä tartu kaikkiin kehittäjiin, mutta on syytä ymmärtää uusia käsitteitä päättää, voiko työnkulku hyötyä siitä.

Mikä tekee CSS-objektiivista?

Objektikohtainen ohjelmointi (OOP) on ohjelmointiparadigma, joka keskittyy uudelleenkäytettävien objektien luominen ja suhteiden luominen niiden välillä, toisin kuin menettelyohjelmointi, joka järjestää koodin menettelyiksi (rutiinit, aliohjelmat tai toiminnot).

OOP on yleisesti käytetty molemmissa JavaScript- ja taustakielet viime vuosina, mutta CSS: n järjestäminen sen periaatteiden mukaisesti on edelleen uusi käsite.

“esine” OOCSS: ssa tarkoitetaan HTML-elementti tai mitään siihen liittyvää (kuten CSS-luokat tai JavaScript-menetelmät). Saatat esimerkiksi olla sivupalkin widget-objektin, jota voidaan kopioida eri tarkoituksiin (uutiskirjeen rekisteröinti, mainoslohkot, viimeisimmät viestit jne.). CSS voi kohdista nämä esineet masseiksi mikä tekee skaalauksesta helppoa.

Yhteenvetona OOCSSin GitHub-merkinnästä CSS-objekti voi koostua neljästä asiasta:

1. DOM: n HTML-solmu (t)
2. CSS-ilmoitukset näiden solmujen tyylistä
3. Komponentit, kuten taustakuvat
4. JavaScript-toiminnot, kuuntelijat tai kohteisiin liittyvät menetelmät

Yleisesti ottaen CSS on objektiivinen, kun se katsoo uudelleenkäytettäviä luokkia ja kohdistettavissa useille sivuelementeille.

Monet kehittäjät sanoisivat, että OOCSS on helpompi jakaa muiden kanssa ja helpompi poimia kuukausien (tai vuosien) jälkeen. Tämä vertaa muihin modulaarisiin menetelmiin, kuten SMACSSiin, jossa on tiukemmat säännöt objektien luokittelemiseksi CSS: ään.

OOCSS-usein kysytyissä kysymyksissä on joukko tietoa, jos haluat tietää lisää. Ja luoja Nicole Sullivan puhuu usein OOCSS: stä ja siitä, miten se liittyy moderniin web-kehitykseen.

Erillinen rakenne tyylistä

Suuri osa OOCSSista on koodin kirjoittaminen, joka erottaa sivun rakenteen (leveys, korkeus, marginaalit, pehmusteet) ulkonäöstä (fontit, värit, animaatiot). Tämä mahdollistaa mukautettu nylkeminen sovellettava useille sivuelementeille vaikuttamatta rakenteeseen.

Tämä on hyödyllistä myös sellaisten komponenttien suunnittelussa, jotka voivat olla liikkui asettelun ympärillä helposti. Esimerkiksi a “Uusimmat viestit” sivupalkin widgetin pitäisi olla siirrettävissä alatunnisteen tai sisällön yläpuolelle säilyttäen samankaltaisia ​​tyylejä.

Tässä on esimerkki OOCSS: sta a “Uusimmat viestit” widget, joka tässä tapauksessa on CSS-objekti:

 / * Rakenne * / .side-widget leveys: 100%; pehmuste: 10px 5px;  / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; väri: # 2b2b2b; fontti-koko: 1.45em;  

Huomaa, että layout hallitaan .puoli-widget luokka, jota voidaan soveltaa myös useisiin sivupalkin elementteihin ulkomuoto hallitaan .Uusimmat viestit luokkaan, jota voitaisiin käyttää myös muiden widgetien \ t Jos esimerkiksi .Uusimmat viestit widget siirrettiin alatunnisteeseen, se ei ehkä ota samaa sijaintia, mutta sillä voi olla sama ulkoasu ja tunnelma.

Katsokaa myös tätä sivupalkin esimerkkiä CodePenistä. Se käyttää erillistä luokkien eroa uimurien ja tekstin kohdistus niin, että replikointi ei vaadi ylimääräistä CSS-koodia.

Erillinen kontti sisällöstä

Sisällön erottaminen sen säiliöelementistä OOCSS on toinen tärkeä periaate.

Yksinkertaisemmin tämä tarkoittaa vain sitä, että sinun pitäisi välttää lastenvalitsimien käyttö aina kun se on mahdollista. Kun muokkaat mitä tahansa ainutlaatuisia sivuelementtejä, kuten ankkurilinkkejä, otsikoita, lohkomerkkejä tai järjestämättömiä luetteloita, sinun pitäisi antaa heille ainutlaatuisia luokkia jälkeläisvalitsimien sijaan.

Tässä on yksinkertainen esimerkki:

 / * OOCSS * / .sidebar / * sivupalkin sisältö * / h2.sidebar-title / * erityiset h2-elementtityylit * / / * ei-OOCSS * / .sidebar / * sama sivupalkin sisältö * / .sidebar h2 / * lisää lisää spesifisyyttä kuin tarvitaan * / 

Vaikka toisen koodimuodon käyttö ei ole hirvittävää, on suositeltavaa seurata ensimmäistä muotoa, jos haluat kirjoittaa puhtaita OOCSS-muotoja.

Kehityssuuntaviivat

On vaikea karsia tarkkoja eritelmiä, koska kehittäjät keskustelevat jatkuvasti OOCSS: n tarkoituksesta. Mutta tässä on joitakin ehdotuksia, joiden avulla voit kirjoittaa puhtaampaa OOCSS-koodia:

• Työskennellä tunnisteiden sijaan muotoiluun.
• Yrittää pidättäytyä monitasoisesta jälkeläisluokan spesifisyydestä ellei sitä tarvita.
• Määritellä ainutlaatuiset tyylit toistettavien luokkien kanssa -.
• Laajenna elementtejä kohdennettuja luokkia sijaan vanhempien luokkiin.
• Järjestä tyylitaulukko osiin, harkita sisällön lisäämistä.

Huomaa, että kehittäjien olisi edelleen käytettävä tunnisteita JavaScript-kohdistuksessa, mutta niitä ei tarvita CSS: lle, koska he ovat liian tarkkoja. Jos yksi kohde käyttää tunnusta CSS-muotoiluun, sitä ei voi koskaan kopioida, koska tunnukset ovat yksilöllisiä tunnisteita. Jos käytät vain tyylityyppejä sitten perintö on paljon helpompi ennustaa.

Lisäksi luokat voidaan ketjuttaa yhteen lisäominaisuuksia varten. Yksittäisellä elementillä voi olla 10+ luokkaa. Vaikka yhdellä elementillä 10+ luokkaa ei ole henkilökohtaisesti suositeltavaa, kehittäjät voivat kerätä uudelleenkäytettäviä tyylejä sisältävän kirjaston rajoittamattomia sivuelementtejä varten..

OOCSS: n luokkien nimet ovat hieman kiistanalaisia, eivätkä ne ole asetettu kiveen. Monet kehittäjät pitävät luokkia lyhyinä ja pisteinä.

Camel-kotelo on myös suosittu esimerkiksi .errorBox sijasta .virhe-box. Jos katsot luokan nimeämistä OOCSS: n dokumentaatiossa, huomaat kamelin tapaus “virallinen” suositus. Viivauksissa ei ole mitään vikaa, mutta yleensä on parasta noudattaa OOCSS-ohjeita.

OOCSS + Sass

Useimmat web-kehittäjät rakastavat jo Sassia ja se on nopeasti ohittanut frontend-yhteisöä. Jos et ole vielä kokeillut Sassia, kannattaa antaa se laukaus. Sen avulla voit kirjoittaa koodin muuttujilla, toiminnoilla, pesimis- ja kokoamismenetelmillä, kuten matemaattisilla toiminnoilla.

Toimivaltaisissa käsissä Sass ja OOCSS voisivat olla taivaassa tehty ottelu. Löydät tästä erinomaisen kirjoituksen Sass Way-blogissa.

Esimerkiksi käyttämällä Sassia @extend voit soveltaa yhden luokan ominaisuuksia toiseen luokkaan. Ominaisuudet eivät ole päällekkäisiä, vaan kaksi luokkaa yhdistetään pilkulla. Näin voit päivittää CSS-ominaisuuksia yhdessä paikassa.

Jos kirjoitat jatkuvasti tyylitaulukoita, se säästää tuntia kirjoittamista ja apua automatisoida OOCSS-prosessi.

Muista myös Koodin ylläpito on suuri osa OOCSS: ää. Käyttämällä Sassia työsi helpottuu muuttujien, sekoittimien ja kehittyneiden työvälineiden avulla.

Suuren OOCSS-koodin keskeinen ominaisuus on kyky jakaa se kenenkään kanssa, jopa itsellesi myöhemmin, ja pystyt ottamaan sen helposti.

Suorituskyvyn näkökohdat

OOCSS: n on tarkoitus toimia sujuvasti ja ilman suurta sekaannusta. Kehittäjät yrittävät parhaansa ei toistaa itsensä joka käänteessä, itse asiassa se on DRY-kehityksen taustalla. Ajan mittaan OOCSS-tekniikka voi johtaa satoihin CSS-luokkiin, joilla on yksilöllisiä ominaisuuksia, joita käytetään tietyissä asiakirjoissa kymmeniä kertoja.

Koska OOCSS on edelleen uusi aihe, on vaikea kiistellä paisuntaa. Monet CSS-tiedostot paisuvat pienellä rakenteella, kun taas OOCSS tarjoaa jäykän rakenteen ja (mieluiten) vähemmän turvotusta. Suurin suorituskyvyn huolenaihe olisi HTML: ssä, jossa jotkin elementit voivat kerätä kourallisen eri luokkia ulkoasun rakenteeseen ja suunnitteluun.

Löydät mielenkiintoisia keskusteluja tästä aiheesta sivustoissa, kuten Stack Overflow ja CSS-Tricks.

Suosittelen yrittää rakentaa näytehankkeen ja nähdä, miten se tapahtuu. Jos rakastat OOCSSiin, se voi muuttaa radikaalisti verkkosivustojen koodia. Vaihtoehtoisesti, jos vihaat sitä, opit edelleen uutta tekniikkaa ja ajattelette kriittisesti, miten se toimii. Se on win-win mitä tahansa.

Hanki kiireinen kirjoittaminen OOCSS

Paras tapa oppia jotain web-kehityksestä on harjoitella. Jos jo ymmärrät CSS: n perusteet, olet hyvin matkalla!

Koska OOCSS ei tarvitse esikäsittelyä, voit kokeilla sitä online-IDE: llä, kuten CodePen. Yksinkertaiset projektit ovat paras tapa aloittaa ja parantaa tietämystä sieltä.

Tutustu näihin resursseihin, jotta voit jatkaa tutkimusta OOCSS: n kehittyvällä alalla.

• OOCSS: n virallinen sivusto
• Object-Oriented CSS: Mitä, miten ja miksi
• OOCSS + Sass = Paras tapa CSS: ään
• Johdatus objektiin suuntautuneeseen CSS: ään