Nopea johdanto elementtien muuntajiin (BEM)

Estä elementin muokkain

Hei siellä! Haluat siis ymmärtää paremmin BEM: ää? Luulen, että jos luet tätä, et ehkä tiedä mitä BEM tarkoittaa. Jos et, niin se on lyhenne elementistä Block Element and Modifier.

Mikä on BEM?

BEM on suunnittelumenetelmä, jonka avulla voit luoda uudelleenkäytettäviä komponentteja ja koodinjakoa käyttöliittymäkehityksessä. - getbem.com

Tämä tarkoittaa, että BEM on menetelmäjärjestelmä, joka auttaa sinua kirjoittamaan HTML- ja CSS-koodisi niin, että sitä on helppo käyttää uudelleen ja jakaa koodin muiden osien kanssa.

BEM toiminnassa.

Joten nyt tiedät BEM: n määritelmän, mutta et ehkä tiedä miltä se näyttää tai miten se toimii. Kuten aiemmin totesin, BEM on lyhenne, joten katsotaanpa kaikkia näitä sanoja ja niiden merkityksiä.

Lohko

”Lohko” tarkoittaa mitä tahansa kokonaisuutta, joka voi olla itsenäinen ja silti järkevä. Esimerkkejä lohkoista ovat otsikko, syöttö ja valintaruutu. Esimerkkejä asioista, jotka eivät ole lohkoja, ovat otsikon otsikot, luettelon kohde tai valintaruudun tarra.

Jos meidän pitäisi poistaa teksti, joka merkitsee radiosisällön, ja laittaa se itselleen, sillä ei ole enää merkitystä.

Katso tätä:

Jos hahmoteltu osa jaetaan erillisiksi lohkoiksi, niillä ei ole enää mitään järkeä käyttäjälle.

Tämä on todellinen jako lohkoiksi:

Jos poistin yhden näistä lohkoista ja heitin sen pois, toisella lohkolla on silti järkeä käyttäjälle. Vaikka tässä tapauksessa siitä ei ole hyötyä käyttäjälle, koska se on valintanappi valintaruudun sijasta.

On tärkeää tarkastella lohkoa kuten mitä tahansa usean elementin (tai muun lohkon) yhdistelmää (tai yksittäistä HTML-tunnistetta) tavalla, joka on järkevää käyttäjälle, kun se asetetaan yksin.

elementit

Elementin pitäisi olla hieman helpompi ymmärtää nyt, koska selitin sen, kun puhuin Blocksista. Ne lohkon osat, joilla ei ole semanttista merkitystä lohkon ulkopuolella, ovat elementtejä.

Katsotaanpa tätä uudelleen:

Korostetut osat ovat elementtejä, koska ne auttavat määrittelemään, mikä lohko on.

Yllä olevan kuvakaappauksen koodi näyttää tältä:

Meillä on kolme elementtiä, jotka muodostavat valintalohkon: option__text, option__radio-button, option__note. Silti voimme muuttaa yhden näistä elementeistä omaksi lohkoksi:

Alkuvaihtoehto__note on nyt lohkoilmoitus. Tämä tarkoittaa, että voimme löytää muistiinpanon optiolohkon ulkopuolelta käyttäjän kannalta hyödyllisellä tavalla.

määrite

Modifikaattori on lippu, joka muuttaa sen, miten lohko tai elementti näyttää tai käyttäytyy. Esimerkiksi:

Kaksi painiketta on sama lohko, mutta ne näyttävät erilaisilta. BEM: n antama voima antaa meille käyttää samaa lohkoa kahdesti ja pitää ne silti hyvin erilaisina.

Katsotaanpa, kuinka sen koodi näyttää:

Painike on oletuksena valkoinen ja sinisellä tekstillä. Muunnelman saamiseksi lisäämme painikkeen - vihreän lipun, joka tekee painikkeesta vihreän valkoisella tekstillä.

BEM-sääntöjen mukaan vihreällä lippupainikkeellamme on ”sivuvaikutus”, joka saattaa johtaa sekaannukseen, mikä on laatikon varjo-ominaisuus. Lippumme tekee jotain, josta sen nimi ei kerro meille. Mutta se on kunnossa, koska pienessä projektissamme meillä ei ole koskaan vihreää painiketta laatikon varjossa. Jos teemme niin, voimme hajottaa lipun:

Nyt kun tarvitsemme vihreää painiketta laatikon varjossa, lisäämme vain napin - vihreän lipun. Sama asia koskee väriominaisuutta.

johtopäätös

BEM on erittäin mukava tapa kirjoittaa ja jäsentää HTML- ja CSS-koodiasi. Tämä opas ei kata 100% kaikesta BEM: stä, mutta sen pitäisi riittää antamaan sinulle perusteellinen käsitys menetelmästä. Voit lukea lisää BEM: stä täältä.

Toivon, että olet oppinut tästä jotain ja että ymmärrät paremmin BEM: n ja sen näyttämisen todellisessa maailmassa. Älä epäröi jättää kommenttia ja muutamaa pilaamista.

Onko kysymyksiä? Voit lähettää minulle DM: n twitterissä @THEozmic.