BEM

Kokeneet kirjoittajat eivät ole vielä tarkistaneet sivun nykyistä versiota, ja se voi poiketa merkittävästi 11. lokakuuta 2015 tarkistetusta versiosta . tarkastukset vaativat 23 muokkausta .

BEM (Block-Element-Modifier) ​​on web-kehitysmetodologia sekä joukko käyttöliittymäkirjastoja, kehyksiä ja aputyökaluja.

Yleiskatsaus

Peruskäsitteet

"Block", "element" ja "modifier" ovat BEM-perustermit. Nämä ovat välttämättömiä ja riittäviä käsitteitä minkä tahansa monimutkaisen rajapinnan kuvaamiseen.

Estä

Lohko on itsenäinen liitäntäkomponentti. Lohko voi olla yksinkertainen tai yhdistelmä (sisältää muita lohkoja). Lohkoa luotaessa on varmistettava, että sitä voidaan käyttää missä tahansa verkkosivulla sekä toistaa samassa paikassa sivulla (emoelementti). Lohkon tulee sisältää kaikki toteutus, joka tarvitaan edustamaan sen ilmaisemaa käyttöliittymän osaa.

Elementti

Elementti on lohkon osa. Elementit ovat kontekstiherkkiä: niillä on järkeä vain lohkossaan. Elementti on lohkon valinnainen komponentti; pienet lohkot pärjäävät ilman elementtejä.

Modifier

Muokkaus on lohkon tai elementin ominaisuus, joka määrittää muutoksia sen ulkonäköön tai käyttäytymiseen. Muokkaus voi olla looginen (esim . button_big) tai avainarvo-pari (esim . menu_type_bullet, menu_type_numbers). Lohkolla tai elementillä voi olla useita muokkauksia samanaikaisesti.

BEM:n luomisen tarkoitus

BEM tarjoaa yhteisen semanttisen mallin kaikille etupään kehityksessä käytetyille teknologioille (HTML, CSS, JavaScript, mallit jne.)

Käyttämällä käsitteitä "lohko", "elementti" ja "muuntaja" voidaan kuvata dokumentin puurakennetta. Tällaista kuvausta kutsutaan BEM-puuksi ja se on käyttöliittymän semanttinen esitys, abstraktio DOM-puusta.

BEM:n käyttö erilaisissa verkkoteknologioissa

HTML/CSS

HTML / CSS :ssä lohkot, elementit ja modifioijat esitetään CSS-luokina, jotka on nimetty nimeämiskäytännön mukaan . Samassa DOM-solmussa voi sijaita useita lohkoja, jolloin DOM-solmulle on määritetty 2 CSS-luokkaa. Myös lohko ja toisen lohkon elementti voivat sijaita samassa DOM-solmussa.

Yandexin BEM-luokkien nimeämissäännöt

Lohkon CSS-luokka vastaa lohkon nimeä. Tavuviivaa käytetään sanojen erottamiseen monimutkaisissa lohkonimissä.

<div class= "header" > ... </div> <ul class= "menu" > ... </ul> <span class= "button" > ... </span> <div class= "tabed-pane" > ... </div>

Elementin CSS-luokka sisältää lohkon nimen ja elementin nimen kahdella alaviivalla erotettuna.

<div class= "header" > <div class= "header__bottom" > ... </div> </div> <ul class= "menu" > <li class= "menu__item" > ... </li> </ul> <span class= "button" > <input class= "button_control" > ... </input> </span> <div class= "tabbed-pane" > <div class= "tabbed-pane__panel" > ... </div> </div>

Muokkaajan CSS-luokka sisältää lohkon nimen ja muuntajan nimen erotettuna yhdellä alaviivalla. Jos muuntaja on avain-arvo-pari, ne erotetaan myös alaviivalla. Elementtimuuttajalle sekä lohkon nimi että elementin nimi tallennetaan CSS-luokkaan. Muutos-CSS-luokkaa käytetään yhdessä sen lohko- (tai elementti-) luokan kanssa.

<div class= "header header_christmas" > ... </div> <!-- Otsikon jouluversio --> <ul class= "menu" > <li class= "menu__item menu__item_current" > ... </li> </ul> <span class= "button button_theme_night" > ... </span> <div class= "tabed-pane tabed-pane_disabled" > ... </div> Harry Robertsin BEM-luokan nimeämiskäytännöt

Vaihtoehtoisia nimeämiskäytäntöjä on ehdottanut Harry Roberts [1] . Hän neuvoo käyttämään kahta tavuviivaa erottamaan lohko- ja elementtinimet muokkauksesta.

<div class= "header header--christmas" > ... </div> <!-- Otsikon jouluversio --> <ul class= "menu" > <li class= "menu__item menu__item--current" > ... </li> </ul> <span class= "button button--theme_night" > ... </span> <div class= "tabed-pane tabed-pane--disabled" > ... </div> Etuliitteet

Jotkut nimeämiskäytännöt suosittelevat etuliitteiden käyttöä . Joten kaikki lohkoluokat voivat alkaa etuliitteellä b-.

<div class= "b-header" > ... </div> <ul class= "b-menu" > ... </ul> <span class= "b-button" > ... </span> <div class= "b-tabbed-pane" > ... </div>

Joskus etuliitteenä käytetään projektin lyhennettyä nimeä. Esimerkiksi OrangePool->op.

<div class= "op-header" > ... </div> <ul class= "op-menu" > ... </ul> <span class= "op-button" > ... </span> <div class= "op-tabbed-pane" > ... </div>

JavaScript

BEM :ssä JavaScript toimii lohkoelementtien ja muokkaajien abstraktin rakenteen kanssa käyttämättä suoraan alla olevia DOM-solmuja ja niiden CSS-luokkia. Myöskään ylimääräisiä "JavaScript-spesifisiä" CSS-luokkia ei käytetä DOM-solmujen tunnistamiseen. Tämän mahdollisuuden tarjoamiseksi käytetään viitekehystä tai omaa apujoukkoaan.

Apua BEM-rakenteen parissa työskentelemiseen

Joten jos jokainen JavaScript-toiminnallisuudella varustettu lohko vastaa objektia, sen menetelmät sallivat:

  • käyttää sisäkkäisiä elementtejä:
// oletetaan, että blockObj osoittaa lohkoobjektiin <div class="tabbed-pane"> blockObj . elem ( 'paneeli' ); // palauttaa elementit <div class="tabbed-pane__panel">
  • työskennellä muuntajien kanssa
// oletetaan, että blockObj osoittaa lohkoobjektiin <div class="tabbed-pane"> blockObj . setMod ( 'poistettu' ); // asettaa muokkaimen <div class="tabbed-pane tabbed-pane_disabled"> blockObj . delMod ( 'poistettu' ); // poista muuntaja Reaktio modifiointien asennukseen/poistoon

Koska modifioija heijastaa lohkon tilaa, lohko tai elementti on saatettava oikeaan tilaan, kun muokkaaja määrätään. Ulkoasun muuttamiseen riittää, että määrität muuntajan CSS-luokan. Monimutkaisemmissa tapauksissa lohkon saattaminen haluttuun tilaan vaatii JavaScript-toiminnallisuuden. Siksi käytetyn JavaScript-kehyksen on kyettävä ilmoittamaan luettelo toiminnoista, jotka vastaavat muokkaajaa.

BlockObj . on ({ aktiivinen : toiminto () { // tee jotain, kun aktiivinen }, ei käytössä : function () { // tee jotain, kun se ei ole käytössä } }); i-bem.js

Tähän mennessä kehys i-bem.js(osa kirjastosta bem-core) tarjoaa JavaScriptin BEM-periaatteiden täydellisimmän toteutuksen. Tietoja kehyksestä ja käyttöesimerkkejä löytyy sivuilta:

Mallit

Projektin tiedostorakenne

Tiedostojärjestelmässä lohkot, elementit ja muokkaajat esitetään tiedostoina niiden toteutuksista erilaisissa verkkoteknologioissa. Yhteen lohkoon kuuluvat tiedostot yhdistetään yhdeksi hakemistoksi.

Tasainen rakenne

Yksinkertaisin projektirakenne ei sisällä sisäkkäisyyttä lohkohakemistoon:

painike/ button.css button.js button.tpl button_control.css otsikko/ header.css header.tpl header_christmas.css tabed-pane/ välilehti pane.css tabed-pane.js tabed-pane.tpl Sisäkkäinen rakenne

Suurissa projekteissa tai kirjastoissa on kätevää käyttää sisäkkäistä lohkotiedostorakennetta, jossa hakemistoja on varattu elementeille ja muokkauksille.

painike/ __control/ button_control.css button.css button.js button.tpl otsikko/ _joulu/ header_christmas.css header.css header.tpl tabed-pane/ välilehti pane.css tabed-pane.js tabed-pane.tpl

Sovellus

Metodologian on kehittänyt Yandex , ja sitä käytetään laajasti tämän yrityksen tuotteissa [2] .

Se on löytänyt sovelluksen osana erityisesti kehitettyä HTML5 -kehystä mail.ru- sähköpostipalvelun uudelleensuunnitteluun ja uudelleenkäsittelyyn [3] [4] .

Samaa menetelmää käytti muun muassa BBC televisio- ja radioyhtiö kehittäessään uutta verkkosivustoaan [5] .

BEM:ää käytetään myös Googlen vuoden 2015 Material Design Lite -julkaisussa , HTML5 - kehyksessä, kuten Twitter Bootstrapissa , joka tukee Material Designia [6] .

Muistiinpanot

  1. ↑ Harry Roberts. MindBEMding – BEM-syntaksin ymmärtäminen . csswizardry (25. tammikuuta 2013). Haettu 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 8. heinäkuuta 2015.
  2. ↑ Varvara Stepanova. Mitä voit lainata Yandex frontend dev:ltä . Riga WebConf, bem.info (marraskuu 2012). Haettu 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 8. heinäkuuta 2015.
  3. ↑ Juri Vetrov. Tuotesuunnittelun yhdistämisen tapaustutkimus: Mobile Web Framework . Smasing Magazine (4. helmikuuta 2015). Haettu 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 8. heinäkuuta 2015.
  4. ↑ Juri Vetrov. Design Unification: Mail.Ru Group Framework for the Mobile Web . bem.info (20. toukokuuta 2015). Haettu 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 8. heinäkuuta 2015.
  5. ↑ Andrew Hillel. Vanhempi verkkokehittäjä, sisältö. Kuinka rakensimme uuden BBC - kotisivun . BBC:n blogi (16. helmikuuta 2015). Käyttöpäivä: 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 3. heinäkuuta 2015.
  6. ↑ B.E.M. _ materiaali-design-lite. Haettu 7. heinäkuuta 2015. Arkistoitu alkuperäisestä 11. tammikuuta 2019.

Kirjallisuus

Linkit