Kiire sissejuhatus elementide muundurite (BEM) juurde

Ploki elemendi modifikaator

Tere! Kas soovite BEM-ist paremini aru saada? Ma arvan, et kui te seda loete, ei pruugi te teada, mida BEM tähistab. Kui te seda ei tee, on see lühend Block Element and Modifier.

Mis on BEM?

BEM on disainimetoodika, mis aitab teil luua korduvkasutatavaid komponente ja koodijagamist esiotsa arendamisel. - getbem.com

See tähendab, et BEM on meetodite süsteem, mis aitab teil HTML-i ja CSS-koodi kirjutada, nii et seda on lihtne oma koodi muude osadega uuesti kasutada ja jagada.

BEM tegevuses.

Nüüd teate BEM-i määratlust, kuid ei pruugi teada, kuidas see välja näeb või kuidas see töötab. Nagu ma varem ütlesin, on BEM lühend, nii et vaatame kõiki neid sõnu ja nende tähendusi.

Blokeeri

„Plokk” viitab mis tahes üksusele, mis võib olla eraldiseisev ja veel mõttekas. Plokkide näideteks on päis, sisend ja märkeruut. Näited asjadest, mis ei ole plokid, on päise pealkirjad, üksus loendis või märkeruudu silt.

Kui peaksime eemaldama raadiosisendit sildistava teksti ja panema selle omaette, pole sellel enam mõtet.

Vaata seda:

Kui visandatud osa jagatakse üksikuteks plokkideks, pole neil enam kasutajale mingit mõtet.

See on tõeline jaotus plokkideks:

Kui ma eemaldasin ühe neist plokkidest ja viskasin selle minema, on teisel blokeerijal siiski kasutaja jaoks mõtet. Kuigi sel juhul pole see kasutajale kasulik, kuna see on märkeruudu asemel raadionupp.

Oluline on vaadata plokki kui mitme elemendi (või muude plokkide) mis tahes kombinatsiooni (või ühte HTML-i silti) viisil, mis on kasutajale üksi asetades mõistlik.

Elemendid

Elementi peaks nüüd pisut lihtsamini mõistma, kuna selgitasin seda blokkidest rääkides. Need ploki osad, millel pole väljaspool plokki semantilist tähendust, on elemendid.

Vaatame seda uuesti:

Esiletõstetud osad on elemendid, kuna need aitavad määratleda, mis on plokk.

Ülaltoodud ekraanipildi kood näeks välja umbes selline:

Meil on kolm elementi, mis moodustavad valikuploki: variant__tekst, variant__radio-nupp, variant__note. Kuid me saaksime ühe neist elementidest muuta omaette plokiks:

Elemendi variant__note on nüüd plokkmärkus. See tähendab, et me leidsime märkme väljaspool valikuplokki viisil, mis on kasutajale kasulik.

Modifikaator

Modifikaator on lipp, mis muudab ploki või elemendi väljanägemist või käitumist. Näiteks:

Kaks nuppu on sama plokk, kuid need näevad välja erinevad. Võimsus, mille BEM meile annab, võimaldab meil kasutada sama plokki kaks korda ja ikkagi vaadata neid väga erinevalt.

Vaatame, kuidas selle kood välja näeb:

Vaikimisi on nupp valge sinise tekstiga. Variatsiooni saamiseks lisame nupu - rohelise lipu, mis muudab nupu valge tekstiga roheliseks.

BEM-i reeglite kohaselt on meie lipunupul - rohelisel - nn kõrvalmõju, mis võib põhjustada segadust, mis on kasti varju omadus. Meie lipp teeb midagi sellist, mida selle nimi meile ei ütle. Kuid see on okei, sest meie väikeses projektis ei ole meil kunagi rohelist nuppu koos varjuga. Kui me seda kunagi teeme, võime lipu lõhkuda:

Nüüd, kui vajame rohelist kasti varjuga nuppu, lisame ainult selle nupu - rohelise lipu. Sama asi kehtib värviomaduste kohta.

Järeldus

BEM on väga tore viis HTML-i ja CSS-koodi kirjutamiseks ja struktureerimiseks. See juhend ei hõlma 100% kõigest BEM-ist, kuid sellest peaks piisama, et anda teile metoodikast täielik ülevaade. BEM-i kohta saate rohkem lugeda siit.

Loodan, et olete sellest midagi õppinud ja et teil on parem tunne BEM-ist ja kuidas see reaalses maailmas välja näeb. Kui te seda teete, jätke kõhklemata kommentaar ja mõni plaksutus.

Kas teil on küsimusi? Võite saata mulle DM-i twitteris @THEozmic.