CSS-kirjoitusmenetelmien ymmärtäminen

Tässä viestissä aiomme nähdä mitä CSS: n kirjoittamismenetelmät ovat, joitakin hyvin tunnettuja menetelmiä ja miten ne voivat olla hyödyllisiä CSS-koodin optimoinnissa. Aloitetaan yksinkertaisimmalla kysymyksellä, kun haluat saada pallon. Mikä on menetelmä?

Menetelmä on menetelmien järjestelmä. Ajattele menetelmää, joka on yksinkertainen tapa tehdä jotain järjestelmällisesti, tietyssä esiasetuksessa, jolla saavutetaan haluamasi tulos.

Saat parempia tuloksia, parannamme menetelmiä suunnittelemalla niitä paremmin, järjestyksen muuttaminen, vaiheiden yksinkertaistaminen - mikä tahansa nopeampi ja se on enemmän tehokas.

CSS-metodologia

Puhutaan nyt CSS-metodologiasta. Aivan kuten kaikessa elämässä, olemme myös kirjoittaneet CSS: n: jotkin kirjoittavat reset CSS: n ensin, jotkut paikan ulkoasutyypit, jotkut alkavat kahdesta kolmeen luokkaan elementin muotoiluun, jotkut kirjoittavat kaikki CSS-koodit yksi tiedosto.

Meidän suositusmenetelmämme on joko perustettu ajan myötä tai muille tai niitä tarvitaan työpaikalla tai kaikkien edellä mainittujen vuoksi. Mutta ajan myötä CSS-veteraanit ovat muotoillut menetelmät CSS: n kirjoittamiseksi jotka ovat enemmän joustava, määritelty, uudelleenkäytettävä, ymmärrettävä ja hallittavissa.

Aiomme tarkastella niitä muotoiltuja menetelmiä, joihin kuuluu:

OOCSS (Object Oriented CSS)
BEM (Block, Element, Modifier)
ACSS (Atomic CSS)
SMACSS (skaalautuva ja modulaarinen arkkitehtuuri CSS: lle)

Huomautus: Mitään alla mainituista käsitteistä ei pidä sekoittaa mihinkään kehykseen, kirjastoon tai työkaluun, jolla voi olla sama nimi ja käsite kuin näillä menetelmillä. Tämä viesti koskee vain menetelmiä, joilla kirjoitetaan CSS.

1. OOCSS

Nicole Sullivanin vuonna 2008 kehittämä OOCSS: n (Object Oriented CSS) keskeiset käsitteet sisältävät CSS: n esine tunnistaminen, rakenteen ja visuaalisen tyylin erottaminen ja paikkatietojen välttäminen.

OOCSS: ssa ensimmäinen vaihe, jonka Nicole ehdottaa, on tunnistaa objektit CSS: ssä.

“Periaatteessa CSS-objekti on toistuva visuaalinen kuvio, joka voidaan tiivistää itsenäiseksi HTML-, CSS- ja mahdollisesti JavaScript-katkelmaksi. Tämä kohde voidaan sitten käyttää uudelleen koko sivustossa. - Nicole Sullivan, Github (OOCSS)“

Ota esimerkiksi tämä rakenne tästä sivustosta. Tässä on jotain toistuvaa visuaalista kuviota ja sillä on oma itsenäinen HTML ja / tai CSS:

Meillä on täällä kaksi erilaista esinettä, isompi esikatselu nimikkeistä, joita me nimemme post-esikatselu-ensisijainen ja sivupalkki, jossa on nimiä post-esikatselu-asteen.

Meidän täytyy erillinen rakenne ja iho (eli tyylit, jotka luovat esineiden ulkonäön). Kahden tyyppisillä objekteilla on erilaiset rakenteet, joista toinen on suurempaan laatikkoon, vaikka ne näyttävät samankaltaisilta, ja kuvat vasemmalle ja otsikot oikealle.

Anna molempien objektien kuvat luokalle post-esikatselu-kuvan ja lisää koodi, joka asettaa kuvan vasemmalle. Tämä estää meitä toistamasta koodia, mistä kuva CSS: n sisällä oleviin kohteisiin sijoitetaan. Jos on olemassa muita vastaavia kohteita, käytämme niitä uudelleen post-esikatselu-kuvan heille.

Ihon erottaminen voidaan tehdä myös yksinkertaisemmille tyyleille rajoja tai taustat. Jos sinulla on useita kohteita, joilla on sama sininen reunus, luodaan erillinen luokka siniselle rajalle ja lisäämällä se kohteisiin vähennä sitä, kuinka monta kertaa siniset reunat on koodattava CSS: ssä.

Nicole ehdottaa myös ei lisää tyylit sijainnin perusteella, esimerkiksi sen sijaan, että kohdennettaisiin kaikkia tietyn divin sisällä olevia linkkejä korostamaan, anna nämä linkit a korostusluokka sopivat CSS-tyylit. Näin sinun on korostettava linkki sivun toisessa osassa, joten voit käyttää korostusluokkaa uudelleen.

OOCSS: n edut: Uudelleenkäytettäviä visuaalisen muotoilun koodeja, joustavia paikannuskoodeja, syvien sisäkkäisten valintakoodien vähentäminen.

Haittoja OOCSS: Ilman toistuvia visuaalisia kuvioita, erottava rakenne ja visuaaliset tyylikoodit näyttävät tarpeettomilta.

2. BEM

Kehittäjien Yandexissa vuonna 2009 kehittämät BEM: n (Block, Element, Modifier) keskeiset käsitteet sisältävät tunnistamisen lohko, elementti & määrite ja nimeämällä ne vastaavasti.

“lohko” on olennaisesti sama kuin “esine”(esimerkistä aiemmin), a “elementti” viittaa lohkon komponentteihin (kuva, otsikko, esikatselusteksti edellä esikatselu-post- objektit). “määrite” voidaan käyttää, kun lohkon tai elementin tila muuttuu, esimerkiksi kun lisäät aktiivisen luokan valikkokohtaan korostamaan sitä, aktiivinen luokka toimii muokkaajana.

Kun olet tunnistanut komponentit, nimeä ne vastaavasti. Esimerkiksi:

valikkolohkossa on luokka valikko
sen tuotteilla on luokka menu__item (lohko ja elementti erotetaan kaksoisalustalla)
valikon vammaisen tilan muokkaaja voi olla luokassa menu_disabled (yksi alaviiva rajattu muokkaaja)
valikkokohdan vammaisen tilan muokkaaja voi olla menu__item_disabled.

Modifioijia varten voimme myös käyttää key value nimitysmuoto. Esimerkiksi vanhentuneisiin artikkeleihin linkittävien valikkokohtien erottamiseksi voimme antaa heille luokan menu__item_status_obsolete, ja mihin tahansa valikkokohteen muotoiluun, joka viittaa odottaviin asiakirjoihin, luokan nimi voi olla menu__item_status_pending.

Nimitystä voidaan muuttaa siihen, mikä toimii sinulle. Ajatuksena on pystyä tunnista, lohkot, elementit ja modifikaattorit luokan nimistä. Tutustu BEM-sivustossa lueteltuun nimeämisjärjestelmään.

BEM: n sivusto on myös luettelossa miten lohko, elementti ja muokkaaja erottelu voidaan tuoda myös CSS-tiedostojärjestelmään. Lohkot pitävät “painikkeet” ja “tulot” voi olla omat kansiot, jotka koostuvat tiedostoista (.css, .js), jotka liittyvät kyseisiin lohkoihin, mikä helpottaa asioita, kun haluamme tuoda nämä lohkot muissa projekteissa.

BEM: n edut:Helppokäyttöiset luokkien nimet ja syvien CSS-valitsimien vähentäminen.

Huonot puolet BEM: stä:Jotta nimet pysyisivät terveenä, BEM suosittelee, että pidämme lohkoa elementtinäköisenä matalana.

3. ACSS

Valmistettu Yahoo, kuuluisa jonnekin ensimmäisen loppupäähän 21 vuotta^st vuosisadalla, ACSS: n keskeisimpiä käsitteitä on luokkien luominen muotoilun kaikkein atomipitoisimmalle tasolle eli omaisuusarvoparille, ja sitten käyttää niitä HTML-muodossa tarpeen mukaan.

On vaikea määrittää, milloin ACSS (Atomic CSS) kehitettiin ensimmäisen kerran, koska konsepti on ollut käytössä jo jonkin aikaa. Kehittäjät ovat käyttäneet luokkia kuten .clearfix overflow: hidden pitkään aikaan. ACSS: n ajatus on sinulla on luokka melko paljon jokaiselle uudelleenkäytettävälle, ei-sisältöön liittyvälle omaisuusarvoparille Tarvitsemme sivustossamme ja lisäämään ne luokat HTML-elementteihin.

Alla on esimerkki luokista, jotka perustuvat ACSS: ään ja miten niitä käytetään HTML-muodossa.

 .mr-8 marginaali-oikea: 8px; .fl-r float: right;

Kuten näette, luokkien määrä nousee tämän menetelmän avulla, ja kaikki nämä luokat ovat HTML: n täynnä. Tämä menetelmä ei ole 100% tehokas, mutta se voidaan tehdä hyödylliseksi, jos halutaan. Yahoo käyttää tätä.

ACSS: n edut:HTML: n muotoilu jättämättä HTML-koodia.

ACSS: n haitat:Liian monta luokkaa, ei kovin siisti ja saatat vihata sitä.

4. SMACSS

Jonathan Snookin vuonna 2011 kehittämä SMACSS (skaalautuva ja modulaarinen arkkitehtuuri CSS: lle) toimii tunnistamalla viisi erilaista tyylisääntöä. Luokkien nimet ja arkistointijärjestelmä luodaan näiden perusteella.

“SMACSS on tapa tutkia suunnitteluprosessia ja tapa sovittaa nämä jäykät kehykset joustavaan ajattelutapaan. - Jonathan Snook”

SMACSS tunnistaa viisi tyylien tyyppiä, nimittäin pohja, asettelu, moduuli, tila, ja teema.

Perustyylit ovat HTML-tunnisteille suunnattuja oletusmalleja
, .
Layout-tyylit ovat tyylejä, joilla määritetään sivun ulkoasu, kuten koodaus, jossa otsikko, alatunniste ja sivuvalikot menevät.
Moduulityylit ovat moduulin kaltaisia, kuten galleria tai diaesitys.
Valtion tyylit korostavat elementtejä, joilla on muuttuvia tiloja, kuten piilotettuja tai poistettuja.
Teemaa käytetään sivun visuaalisen kaavion muuttamiseen.

Eri tyylisäännöt voidaan tunnistaa käyttämällä etuliitettä luokan nimessä, esimerkiksi l-otsikko (asettelua varten) tai t-otsikko (teema). Voimme myös järjestää nämä erilaiset säännöt asettamalla ne erillisiin tiedostoihin ja kansioihin.

SMACSS: n edut:Parempi järjestetty koodi.

Miinukset SMACSS: Ei mitään.

On ilmainen online-kirja, josta voit lukea SMACSSista, tai voit ostaa sen ebook-version opiskelemaan sitä enemmän.

johtopäätös

Edellä mainitut CSS-menetelmät antavat sinulle järjestelmän hallita ja optimoida CSS-koodisi. Ne voidaan yhdistää yhteen, kuten OOCSS-SMACSS tai OOCSS-BEM, tai BEM-SAMCSS tarpeisiisi.

On myös kehyksiä ja kirjastoja, jos haluat automaattisen järjestelmän CSS-menetelmien suorittamiseen, kuten:

OOCSS-kehys
BEM-työkalut
Orgaaninen CSS-kehys (noudattaa atomikonseptia).