User Experience on mobile might not be great yet, but I'm working on it.

Your first time on this page? Allow me to give some explanations.

Awesome BEM

Just a repo full of BEM resources

Here you can see meta information about this topic like the time we last updated this page, the original creator of the awesome list and a link to the original GitHub repository.

Last Update: June 24, 2021, 9:02 a.m.
Thank you sturobson & contributors
View Topic on GitHub:
sturobson/BEM-resources

Search for resources by name or description.
Simply type in what you are looking for and the results will be filtered on the fly.

Further filter the resources on this page by type (repository/other resource), number of stars on GitHub and time of last commit in months.

Articles

A CSS Guideline Tutorial: BEM with Sass

https://assist-software.net/blog/css-guideli…

BEMantic - DRY like you mean it

https://medium.com/@stowball/bemantic-dry-li…

BEM & Atomic Design: A CSS Architecture Worth Loving

https://www.lullabot.com/articles/bem-atomic…

Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them

https://www.smashingmagazine.com/2016/06/bat…

BEM and SMACSS: Advice From Developers Who’ve Been There

http://www.sitepoint.com/bem-smacss-advice-f…

MindBEMding - getting your head around BEM syntax

by Harry Roberts (1/25/13)

http://csswizardry.com/2013/01/mindbemding-g…

A New Front-End Methodology: BEM - Smashing Magazine

https://www.smashingmagazine.com/2012/04/a-n…

BEM 101 - CSS Tricks

https://css-tricks.com/bem-101/

An Introduction to the BEM Methodology - Tuts Plus

http://webdesign.tutsplus.com/articles/an-in…

Scaling Down The BEM Methodology For Small Projects - Smashing Magazine

https://www.smashingmagazine.com/2014/07/bem…

Fifty Shades of BEM - Kaelig

http://blog.kaelig.fr/post/48196348743/fifty…

Keeping the Front-End Modular with BEM - Thoughtbot

https://robots.thoughtbot.com/keeping-the-fr…

CSS class naming and BEM: Contemporary practice - Phil Baker

http://philbaker.me/2014/02/css-class-naming…

The Evolution Of The BEM Methodology - Smashing Magazine

https://www.smashingmagazine.com/2013/02/the…

BEM Basics - 8th Light

http://blog.8thlight.com/nelsol-batalla/2014…

How To BEM - Roman Kuba

https://medium.com/@Codebryo/how-to-bem-4a55…

Expressive BEM with Sass: a different approach - Anders Hansen

http://codepen.io/andersschmidt/post/express…

Expressive BEM with Sass Part II: A first draft of mixins - Anders Hansen

http://codepen.io/andersschmidt/post/express…

Learning to love BEM

http://mono.company/journal/frontend/learnin…

Working with BEM at Scale — Advice From Top Developers

http://www.sitepoint.com/working-bem-scale-a…

CSS Architecture: BEMCSS — Block, Element & Modifier

https://medium.com/@mjtweaver/css-architectu…

BEM Guidelines for component focused development

http://www.joelambert.co.uk/article/bem-guid…

BEMIT: Taking the BEM Naming Convention a Step Further

http://csswizardry.com/2015/08/bemit-taking-…

CSS BEM Syntax Basics

https://coryrylan.com/blog/css-bem-syntax-ba…

BEM official naming convention

https://en.bem.info/method/naming-convention/

BEM for CSS - An Introduction

http://www.gapintelligence.com/blog/2015/bem…

Getting Started With BEM (with a little help from Sass)

https://www.packtpub.com/books/content/getti…

BEM (Block element modifier) - CSS Methodologies Part 3

http://techblog.buyapowa.com/css/frontend/sc…

How I stopped worrying and learned to love the CSS with BEM

http://www.theodo.fr/blog/2015/10/how-i-stop…

BEM CSS Basics for WordPress Themes Developers

https://ahmadawais.com/bem-css-basics-for-wo…

Generate responsive BEMIT classes with Sass

http://codepen.io/craigmdennis/post/generate…

The BEMIT naming convention

http://www.jamesturneronline.net/beautifulwe…

An Introduction to the BEM Methodology for effective Front-End Development

http://4digits.net/blog/sass/introduction-to…

CSS Organisation with BEM

http://www.blankmaker.com/css-organization-w…

Patterns For Scaling CSS

https://dominikpiatek.com/patterns-for-scali…

BEM by example

https://seesparkbox.com/foundry/bem_by_examp…

Introducing BEM: The popular CSS naming convention

https://assortment.io/posts/introducing-bem-…

7 Reasons To Use BEM CSS

https://medium.com/soliddigital/7-reasons-to…

Resources

BEM

https://en.bem.info/

Get BEM

http://getbem.com/introduction/

BEM Cheat Sheet

https://gist.github.com/ingdir/0b211b9253c37…

With Pre-processors

Generating BEM selectors with CSS preprocessors - Frontend Babel

http://frontendbabel.info/articles/bem-with-…

Sass

Even Easier BEM-ing with Sass 3.3 - alwaystwisted

http://alwaystwisted.com/articles/2014-02-27…

BEM Mixins - CSS Tricks

https://css-tricks.com/snippets/sass/bem-mix…

Stylus

Stylus and BEM: a quick mixin - Frank M Taylor

http://blog.frankmtaylor.com/2014/07/16/styl…

PostCSS

postcss/postcss-bem-linter

A BEM linter for postcss

504
34
2y 92d
MIT

Repos

danielguillan/bem-constructor

A Sass library for building immutable and namespaced BEM-style CSS objects

534
37
4y 10m
MIT

roikles/Wordpress-Bem-Menu

Better menu implementation for Wordpress using BEM syntax

139
22
4y 12m
n/a

bem-incubator/bem-grid

Modular grid powered by Lost and BEM

137
18
4y 4m
n/a

flexiblegs/flexiblegs-bem

Flexible Grid System BEM

14
0
2y 6m
MIT

maykinmedia/bem.js

DOM selection and manipulation using BEM (Block, Element, Modifier).

7
2
2y 91d
MIT

Slides

BEM CSS Workshop - Varya Stepanova

http://varya.me/bem-css-workshop/

BEM - Luciano Battagliero

https://speakerdeck.com/battaglr/bem

Videos

Writing Modular CSS With Sass and BEM - Tuts Plus

https://www.youtube.com/watch?v=WH4U4K5W8N8

MindBEMding – Rethink Web Development - Kevin Mack

https://www.youtube.com/watch?v=vgg-NsKZaE4

Other Awesome Lists

sindresorhus/awesome

😎 Awesome lists about all kinds of interesting topics

153.57K
19.99K
4m
CC0-1.0