9 Best Articles in 2021
9elements.com
BEM Naming Cheat Sheet by 9elements
9elements.com
3 min read · 67 saves · 2020-04-03 · A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.
Smashing Magazine
Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them
Smashing Magazine
~11 min read · 52 saves · From 2016 · Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, because I’ll be using terms that assume a basic understanding of this CSS methodology. This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it. Now, I’m under no illusion that this is a beautiful way to name things. It’s absolutely not. One of things that put me off of adopting it for such a long time was how eye-gougingly ugly the syntax is. The designer in me didn’t want my sexy markup cluttered with dirty double-underscores and foul double-hyphens.
getbem.com
BEM — Block Element Modifier
getbem.com
44 saves · From 2015 · BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
CSS-Tricks
ABEM. A more useful adaptation of BEM.
CSS-Tricks
39 saves · From 2017 · BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar
Harry Roberts
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance…
Harry Roberts
4 min read · 23 saves · From 2014 · A primer on the oft-confusing BEM notation for CSS
lullabot.com
Scaling CSS Components with BEM, REMs, & EMs
lullabot.com
6 min read · 21 saves · From 2016 · How a little BEM and cleverness can make extensive use of EMs worth doing, and how it can up your game.
seesparkbox.com
BEM by Example: Best Practices for BEM CSS Naming
seesparkbox.com
3 min read · 20 saves · From 2017 · BEM is a popular CSS naming convention. While the fundamentals of BEM are simple and straightforward, mistakes are common. These BEM examples will help you apply this useful naming convention and avoid some of the pitfalls many face when using BEM naming conventions.
colourgarden.net
Avalanche - Responsive, Sass-based, BEM-syntax CSS grid system
colourgarden.net
1 min read · 24 saves · From 2015 · Superclean, powerful, responsive, Sass-based CSS grid system. Based on the BEM syntax, Avalanche allows you to customize your grid to your own specifications.
Smashing Magazine
BEM For Beginners: Why You Need BEM
Smashing Magazine
~19 min read · 22 saves · From 2018 · CSS styles isolation is the most frequent start point of the BEM usage. But this is the least that BEM can give you. BEM brings a system approach in your project and keeps it from the mess.
More like this
SitePoint
BEM and SMACSS: Advice From Developers Who've Been There
SitePoint
~16 min read · 13 saves · From 2015 · Patrick contacted a number of developers who have used BEM and SMACSS in their projects, and collected their thoughts on how they can be used effectively.
pawelgrzybek.com
BEM with Emmet
pawelgrzybek.com
1 min read · 11 saves · From 2016 · Emmet is one of my favourite plugins for a lightning fast HTML & CSS workflow. BEM methodology helps me to keep my projects sane. Let’s try them together!
blog.elpassion.com
5 Reasons To Use BEM (a.k.a. why is BEM G.R.E.A.T.)
blog.elpassion.com
3 min read · 11 saves · From 2017 · BEM is a kind of superhero — it keeps the world of CSS safe from mess and clutter.
getbem.com
BEM — Naming
getbem.com
1 min read · 20 saves · From 2016 · BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
scalablecss.com
BEM Methodology In CSS: A Quick Start Guide
scalablecss.com
5 min read · 21 saves · 2020-01-15 · Tom Ray · Start practicing the BEM naming convention today with this short, actionable guide. Learn the fundamentals so you can start using BEM in your next project.
CSS-Tricks
Combining the Powers of SEM and BIO for Improving CSS
CSS-Tricks
68 saves · From 2018 · CSS is easy, some might argue, but that "easiness" can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell. If your Sass
seesparkbox.com
BEM: 4 Hang-Ups & How It Will Help Your CSS Organization
seesparkbox.com
10 min read · 16 saves · 2019-02-20 · Sparkbox developer Philip Zastrow addresses four common misconceptions about BEM and explains how and why the CSS naming convention of Block Element Modifier helps solve organizational thinking around…
medium.com
Block, Element, Modifying Your JavaScript Components
medium.com
6 min read · 16 saves · From 2015 · BEM was a transformative methodology in the world of CSS, but — when limited to the style sheet — it can only take us so far.
Harry Roberts
More Transparent UI Code with Namespaces – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more,…
Harry Roberts
20+ min read · 37 saves · From 2015 · Employing a suite of namespaces to make your UI code more readable and transparent
