BEM-metodologia: Block, Element ja Modifier
Nimeä CSS-luokat Block__Element--Modifier-mallin mukaisesti luodaksesi itseään dokumentoivia, vähäisen spesifisyyden ja uudelleenkäytettäviä komponenttityylejä
BEM-metodologia: Block, Element ja Modifier on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mikä BEM on
BEM (Block, Element, Modifier) on CSS:n nimeämiskäytäntö, joka tekee tyyleistä ennakoitavia, uudelleenkäytettäviä ja ristiriidattomia. Kun komponentin rakenne koodataan luokkien nimiin, se poistaa spesifisyyskiistat ja tahattomat tyylien yhteentörmäykset.
Lohkot — itsenäiset komponentit
Lohko on itsenäinen, uudelleenkäytettävä komponentti, kuten card, button tai nav. Luokan nimi on lohkon nimi, joka kirjoitetaan pienillä kirjaimilla ja yhdysmerkeillä.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Elementit — lohkon osat
Elementti on lohkon osa, jolla ei ole itsenäistä merkitystä. Käyttäkää kahta alaviivaa: block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Muokkaajat — muunnelmat ja tilat
Muokkaaja muuttaa lohkon tai elementin ulkoasua tai toimintaa. Käyttäkää kahta yhdysmerkkiä: block--modifier tai block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>BEM:n CSS-säännöt
BEM-luokilla on matala ja keskenään sama spesifisyys (yksi luokka kutakin sääntöä kohti). Siksi tyylit on helppo ylikirjoittaa. Älkää koskaan käyttäkö ID-tunnisteita tai sisäkkäisiä elementtivalitsimia, sillä ne kasvattavat spesifisyyttä ennakoimattomasti.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM ja Sass
Sassin &-vanhempivalitsin vähentää BEM-koodin toisteisuutta. Käännetty CSS on identtinen tavallisen BEM:n kanssa.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Milloin uusi lohko kannattaa luoda
Luokaa uusi lohko, kun komponentti voi toimia itsenäisesti ja sitä voidaan käyttää uudelleen eri yhteyksissä. Luokaa elementti, kun osa on järkevä vain yhden tietyn lohkon sisällä.
BEM välttää sisäkkäisyyttä
BEM ei suosittele syvää sisäkkäisyyttä HTML:ssä eikä CSS:ssä. Elementin sisällä oleva elementti on edelleen block__element, ei block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM ja JavaScript
Käyttäkää toiminnan koukkuihin erillistä JavaScript-kohtaista luokkaa, jossa on js--etuliite. Näin tyylit ja komentosarjat eivät ole riippuvaisia toisistaan: BEM-luokan nimen muuttaminen ei riko JavaScript-toimintaa.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);BEM-lohkojen yhdistäminen
Yhdellä elementillä voi olla useita lohkoluokkia, jolloin voitte määrittää yhteyskohtaisia tyylejä sitomatta lohkoja toisiinsa.
<button class="btn btn--primary form__submit">Submit</button>BEM:n rajoitukset
Luokkien nimistä voi tulla pitkiä. BEM toimii parhaiten suurissa tiimeissä ja design-järjestelmissä, joissa tyylien yhtenäisyys koko sovelluksessa on tärkeää. Komponenttikehyksissä (React/Vue), joissa käytetään rajattuja tyylejä, BEM:n nimiavaruuden hyödyt ovat vähemmän merkittäviä.
Pikatarkistus
Mitä card__title--truncated edustaa BEM:ssä?
Kertaus: BEM
Lohko: itsenäinen komponentti. Elementti (kaksi alaviivaa __): lohkon osa. Muokkaaja (kaksi yhdysmerkkiä --): muunnelma tai tila. Matala ja keskenään sama spesifisyys. Välttäkää ID-valitsimia ja syvää sisäkkäisyyttä. Käyttäkää js-etuliitettä JavaScript-koukkuihin. Sassin & vähentää BEM-koodin toisteisuutta. Erinomainen suurille tiimeille ja design-järjestelmille.
Opi HTML 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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”BEM-metodologia: Block, Element ja Modifier” ilmainen?
Kyllä – oppitunnin ”BEM-metodologia: Block, Element ja Modifier” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”BEM-metodologia: Block, Element ja Modifier”?
Nimeä CSS-luokat Block__Element--Modifier-mallin mukaisesti luodaksesi itseään dokumentoivia, vähäisen spesifisyyden ja uudelleenkäytettäviä komponenttityylejä Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”BEM-metodologia: Block, Element ja Modifier”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- BEM-metodologia: Block, Element ja Modifier
- CSS Modules: rajatut luokan nimet
- CSS-in-JS: Styled-components ja Emotion
- Tailwind CSS:n utility-first-lähestymistapa