Gyors bevezetés a blokkelem-módosítókba (BEM)

Szia! Tehát jobban meg akarja érteni a BEM-et? Gondolom, ha ezt olvasod, nem biztos, hogy tudod, mit jelent a BEM. Ha nem, akkor ez a B lock E elem és az M odifier rövidítése.

Mi a BEM?

A BEM egy olyan tervezési módszertan, amely elősegíti az újrafelhasználható összetevők létrehozását és a kódmegosztást a front-end fejlesztésben. - getbem.com

Ez azt jelenti, hogy a BEM olyan módszerrendszer, amely segít megírni a HTML- és CSS-kódot, így egyszerű újra felhasználni és megosztani a kód más részeivel.

A BEM működésben.

Tehát most már ismeri a BEM definícióját, de lehet, hogy nem tudja, hogyan néz ki vagy hogyan működik. Amint azt korábban említettem, a BEM rövidítés, ezért vessünk egy pillantást ezekre a szavakra és azok jelentésére.

Blokk

A „blokk” minden olyan entitásra vonatkozik, amely önállóan áll és még mindig van értelme. Példák a blokkok header, inputés checkbox. Példák nem blokkokra: fejléc címei, egy elem a listában vagy egy jelölőnégyzet címkéje.

Ha el kell távolítanunk a rádióbemenetet felcímkéző szöveget, és önmagába tesszük, annak már nincs értelme.

Ezt nézd:

Ha a felvázolt rész különálló blokkokra válik szét, akkor a felhasználó számára már nincs értelme.

Ez egy igazi szétválasztás blokkokra:

Ha eltávolítottam ezek közül a blokkok közül egyet, és elhajítottam, akkor a másik blokknak még mindig van értelme a felhasználó számára. Bár ebben az esetben nem lesz hasznos a felhasználó számára, mert ez egy választógomb a jelölőnégyzet helyett.

Fontos, hogy a blokkot több elem (vagy más blokk) bármilyen kombinációjaként (vagy egyetlen HTML-címkeként) nézzük úgy, hogy a felhasználó számára egyedüli elhelyezéskor van értelme.

Elemek

Most egy elemet egy kicsit könnyebben meg kell érteni, mivel akkor magyaráztam, amikor a Blocksról beszéltem . A blokk azon részei, amelyeknek a blokkon kívül nincs szemantikai jelentése, elemek.

Nézzük meg újra ezt:

A kiemelt részek elemek, mert segítenek meghatározni, hogy mi a blokk.

A fenti képernyőfotó kódja így néz ki:

Van három alkotó elemek a optionblokk: option__text, option__radio-button, option__note. Mégis megváltoztathatnánk ezen elemek egyikét egy saját blokkká:

Az elem option__notemost blokk note. Ez azt jelenti, hogy notea optionblokkon kívül is megtalálhatjuk a felhasználó számára hasznos módon.

Módosító

A módosító olyan jelző, amely megváltoztatja a blokk vagy elem megjelenését vagy viselkedését. Például:

A két gomb ugyanaz a blokk, de máshogy néz ki. A BEM által adott erő lehetővé teszi számunkra, hogy kétszer használjuk ugyanazt a blokkot, és így is nagyon különbözőek legyenek.

Lássuk, hogyan néz ki ennek a kódja:

Alapértelmezés szerint a gomb fehér, kék szöveggel. A variáció megszerzéséhez hozzáadunk egy button--greenzászlót, amely ezután a gombot zöld színűvé teszi fehér szöveggel.

A BEM szabályai szerint zászlónknak button--green„mellékhatása” van, ami zavart okozhat, ami a box-shadowtulajdonság. Zászlónk olyasmit tesz, amiről a neve nem árul el. De ez rendben van, mert kis projektünkben soha nem lesz zöld gombunk a-val box-shadow. Ha valaha is megtesszük, feltörhetjük a zászlót:

Most, amikor zöld dobozra van szükségünk egy doboz árnyékával, csak hozzáadjuk a button--greenzászlót. Ugyanez vonatkozik az coloringatlanra is.

Következtetés

A BEM nagyon jó módszer a HTML és CSS kód megírásához és strukturálásához. Ez az útmutató nem fedi le a BEM 100% -át, de elégnek kell lennie ahhoz, hogy megalapozottan megértse a módszertant. A BEM-ről itt olvashat bővebben.

Remélem, hogy tanultál valamit ebből, és hogy jobban megérted a BEM-et és annak való való megjelenését. Ha mégis, ne habozzon megjegyzést és néhány tapsot hagyni.

Van kérdés? Küldhet nekem DM-t a twitteren @THEozmic.