A bam-ot helyesen írjuk

A korai BEM volt. Most támogatja Harry Roberts és sok nem-Yandex fejlesztők által használt. A blokkok névterének és logikai partícióinak létrehozására használják.







BEMIT: névterek

Harry Roberts elődeinek és utótagainak továbbfejlesztett használata. Megpróbáljuk leírni a független blokkok közötti kapcsolatot SMACSS és OOCSS szempontjából.

Harry Roberts stílus

Sokan kedvelik a módosító külföldi formátumát, a "-" -en keresztül, olvashatóbb.

Stílus camelCase

És keresztül camelCase - még olvasható!

Stílus aláhúzás nélkül

Néhányan tovább mennek, és a "-" helyett "__" -t cserélik ki. A camelCase csak garantálja, hogy megérted, hol van a blokk, és hol van az elem.

Rövid módosítások

Rövid módosítások

Helyesen írj így:
.block-name__elem _key_value

Vagy úgy:
.blockName__elem --key_value

Nincs bizonytalanság, a módosító blokk nélkül átvihető:

Rövid módosítások

A bam-ot helyesen írjuk






- Hagyja el a blokkok keveredését módosító eszközökkel!
- Nem használhatjuk a Full BEM Stack-t!

A megoldás egy módosító oszlopban történhet

És még mindig lehetséges Jade, és a Yandex általában nem írni html-kódot kézzel, ezeken BEMJSON.

Ez a css-blokk és a js-blokk egy kombinációja egy dom-node-ban. A kanonikus BEM úgy véli, hogy nincs rá szükség, mert Az js-funkcionalitásnak nincs értelme elválasztani a mondattól. Harry Roberts és a nem-Yandex fejlesztők aktívan használják őket, és támogatják őket. Az elválasztás megkönnyíti a css-blokk másolását a társított JS nélkül.

Alternatív megvalósítások: OPOR

Ismeretes példa a BEM módszertan egy külső fejlesztő - Artem Sapegin használatára

Alternatív megvalósítások: BEViS

A dialektus BEM, szigorúbb szabályokkal a maximális megbízhatóság érdekében, a Vadim Makishvili által Yandex.Map.

Alternatív megvalósítások:
Google MDL

A könyvtár blokkolja a Google-t, az anyagi tervük css-implementációja az Android számára.

Teljes BEM verem a HTML-ben

Saját útmutatókat hozhat létre

A BEM csak egy alapvető szabálycsomagot, a konkrét megvalósítást és szintaxist kínál Önnek.

Ez mind BEM

A BEM finomsága

A BEM számos technikát tartalmaz

Valami, amit megvitattunk / megemlítettünk:

  • miért nem tud befektetni blokkokat
  • bem-tools és alternatív eszközök a BEM-elnevezési egyszerűsített íráshoz a HTML-ben:
    • BEML - html előfeldolgozó a BEM számára
    • posthtml-bem ugyanaz, de PostHTML-en keresztül
    • bemto - myxinok a JEME írására BEM
  • miksovaniya
  • Miért van szükség névterekre / előtagokra (beleértve a js-blokkokat is)

De sok marad a színfalak mögött

  • Nem mondtam el, hogy miként oszthatod meg a blokkokat fájlokba, és hozzáadhatod őket a fájlrendszerhez
  • miért nem használja a @extend sass-ot
  • körülbelül i-bem.js
  • és absztrakt blokkokra (i-)
  • ... összefüggésblokkok (m-)
  • ... blokkok (h-)
  • ... felülbírálja a szinteket
  • ... globális módosítók
  • ... és a BEM története - miért van így?

Bővebben




Kapcsolódó cikkek