CSS Academy · Oppitunti

BEM: lohko, elementti ja muunnin -nimeäminen

Soveltakaa Block-Element-Modifier-menetelmää ennakoitavien ja uudelleenkäytettävien luokkanimien luomiseen.

Oppitunti 2/413 vaihetta

BEM: lohko, elementti ja muunnin -nimeäminen on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mikä on BEM?

BEM (Block–Element–Modifier) on nimeämiskäytäntö, joka luo itseään kuvaavia luokkien nimiä. Se tekee CSS-komponenteista ennakoitavia ja itseään dokumentoivia.

Lohko

Lohko on itsenäinen, merkityksellinen käyttöliittymäkomponentti, joka voi toimia erillään. Se on komponentin juuriluokka.

  <div class="card">Card block</div>
  <nav class="nav">Nav block</nav>
  <button class="button">Button block</button>
  <form class="search-form">Search form block</form>

Elementti

Elementti on lohkon lapsielementti, jolla ei ole merkitystä lohkon ulkopuolella. Elementeissä käytetään kahta alaviivaa: .block__element.

  <div class="card">
    <div class="card__image">Image</div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
    </div>
  </div>
  <nav class="nav">
    <div class="nav__item"><a class="nav__link" href="#">Link</a></div>
  </nav>

Muunnin

Muunnin on lohkon tai elementin muunnelma tai tila. Muuntimissa käytetään kahta yhdysmerkkiä: .block--modifier.

  <button class="button button--primary">Primary</button>
  <button class="button button--large">Large</button>
  <div class="card card--featured">Featured Card</div>
  <nav class="nav">
    <div class="nav__item nav__item--active">Active Item</div>
  </nav>

Täydellinen BEM-esimerkki

BEM-nimeämistä käyttävä korttikomponentti:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button button--primary card__action" href="#">Read More</a>
    </div>
  </div>

BEM:n CSS-rakenne

Kortin vastaava BEM-CSS:

  <div class="card card--featured">
    <div class="card__image" role="img" aria-label="Card image"></div>
    <div class="card__body">
      <h2 class="card__title">Title</h2>
      <p class="card__text">Content</p>
      <a class="button card__action" href="#">Read More</a>
    </div>
  </div>

BEM:n spesifisyyshyöty

BEM-luokat ovat kaikki yksittäisiä luokkia (spesifisyys 0,1,0). Mikään valitsin ei ole toista spesifisempi, joten ohittaminen on suoraviivaista: lisää vain oikea muunninluokka.

Yleiset BEM-virheet

Välttäkää näitä BEM:n ongelmakohtia:

Monitasoiset elementit: .card__body__title — yksinkertaistakaa muotoon .card__title
HTML:ssä lohkonsa ulkopuolella olevat elementit
Elementtivalitsinten, kuten .nav__link a, käyttäminen — se lisää tarpeettomasti spesifisyyttä

BEM ja CSS:n mukautetut ominaisuudet

BEM ja CSS-muuttujat sopivat luontevasti yhteen. Määritelkää lohkotasoiset tokenit, jotka muuntimet ohittavat:

  <button class="button">Default</button>
  <button class="button button--danger">Danger</button>

Milloin BEM:iä ei pidä käyttää

BEM on sanallinen eikä sovellu ihanteellisesti utility-luokille tai yksittäisiin tyyleihin. Tailwindin kaltaiset utility-first-kehykset korvaavat BEM:n kokonaan. Käyttäkää BEM:iä mukautetuissa komponenttikirjastoissa, joissa semanttisella nimeämisellä on merkitystä.

BEM käytännössä

Monet design-järjestelmät käyttävät BEM-muunnelmia tai vastaavia nimeämismalleja. Tarkka syntaksi on vähemmän tärkeä kuin yhdenmukainen periaate: lohko → elementti → muunnin, ei syvää sisäkkäisyyttä ja tasainen spesifisyys.

Pikatarkistus

Mikä syntaksi tarkoittaa BEM:ssä elementtiä nimeltä "title" lohkossa nimeltä "card"?

Vastaa interaktiivisessa oppitunnissa

Kertaus

BEM käyttää Block-, Element- ja Modifier-nimeämistä: .block__element--modifier. Kaikki luokat ovat yksittäisiä luokkia, joten niiden spesifisyys on tasainen ja yhtä suuri. Elementit (__) kuuluvat lohkonsa sisään. Muuntimet (--) luovat muunnelmia. Välttäkää syvää sisäkkäisyyttä, kuten .card__body__title, ja yksinkertaistakaa se muotoon .card__title.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”BEM: lohko, elementti ja muunnin -nimeäminen” ilmainen?

Kyllä – oppitunnin ”BEM: lohko, elementti ja muunnin -nimeäminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”BEM: lohko, elementti ja muunnin -nimeäminen”?

Soveltakaa Block-Element-Modifier-menetelmää ennakoitavien ja uudelleenkäytettävien luokkanimien luomiseen. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”BEM: lohko, elementti ja muunnin -nimeäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Miksi CSS-arkkitehtuurilla on väliä
BEM: lohko, elementti ja muunnin -nimeäminen
Tiedostojen organisointi: ITCSS ja 7-1-malli
Spesifisyyskiistojen välttäminen

← Takaisin: CSS Academy