This BEM Mistake Has Me Bummed

.block {}
.block__element {}
.block--modifier {}

How You’re Doing it Wrong

<div class="card">
<div class="card__header">

<h2 class="card__title">Title text here</h2>

</div>
<div class="card__body">

<img class="card__img" src="some-img.png">

<p class="card__text">Lorem ipsum dolor sit amet, consectetur</p>
<p class="card__text">Adipiscing elit.
<a href="/somelink.html" class="card__link">Pellentesque amet</a>
</p>

</div>
</div>
.card {...}
.card__header {...}
.card__title {...}
.card__body {...}
.card__img {...}
.card__text {...}
.card__link {...}

How you should do it

<div class="card">
<div class="card__header">

<h2 class="heading-secondary">Title text here</h2>

</div>
<div class="card__body">

<img src="some-img.png">

<p class="caption">Lorem ipsum dolor sit amet, consectetur</p>
<p class="additional-info">Adipiscing elit.
<a class="external-link" href="/somelink.html">Pellentesque amet</a>
</p>

</div>
</div>

--

--

--

UX Engineering & Design Systems Lead at Quicken Loans. Love CSS, HTML, RWD, and Design Systems. Created @sparkql, @scalescss, @devtroit, & @stellardetroit.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Gillhespy

Dave Gillhespy

UX Engineering & Design Systems Lead at Quicken Loans. Love CSS, HTML, RWD, and Design Systems. Created @sparkql, @scalescss, @devtroit, & @stellardetroit.

More from Medium

CSS, the silent beautifier.

Squarespace Header Button CSS Tips

#100DaysOfCode — Day 4

Practice Makes Perfect