BEMantic: DRY Like You Mean It

  • Consistency and predictability
  • Specificity
  • Portability and resilience
  • Performance
  • Maintenance and other benefits

Consistency and predictability

Specificity

Portability and resilience

In your control

[type="email"], [type="number"], [type="password"], [type="search"], [type="text"], [type="tel"], textarea { }
.o-text-input { }
fieldset, .field-group { }legend, .field-group > h2:first-child, .field-group > h3:first-child, .field-group > h4:first-child, .field-group > h5:first-child, .field-group > h6:first-child { }
.field-group { }.field-group__legend { }
.tab-trigger {
// Styles for a tab link
&.is-selected {
// Styles for a selected tab link
}
}
.accordion-trigger {
// Styles for an accordion link. Could also be a heading when it's a singular piece of collapsible content
&.is-selected {
// Styles for a selected accordion link
}
}

Out of your hands

Performance

Maintenance and other benefits

Summary

--

--

--

I design digital, craft and board games. I write code, fiction andreviews. I play games, guitar and football.

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
Matt Stow

Matt Stow

I design digital, craft and board games. I write code, fiction andreviews. I play games, guitar and football.

More from Medium

MDN Styling and Layout w/CSS chapter 9

HTML5 Canvas Blend mode with globalCompositeOperation

CSS Trick: Keep items of a card container at the bottom

A Comprehensive Checklist For Front-End Testing