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.comEz 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.