BEM

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.

Adding further meaning and information to the BEM naming convention

BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

BEM was a transformative methodology in the world of CSS, but — when limited to the style sheet — it can only take us so far.

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.

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.

What’s the big deal, just name it the first thing that makes sense, right? It makes sense now, so it will probably always make sense! .btn–small, .btn–tiny, .btn–really-tiny…

BEM (Block, Element, Modifier) is a great way to keep class naming consistent and meaningful. If you’ve never used BEM before but want to understand how it works, or if you’re thinking …

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 class names.

A tutorial on working with Sass and BEM when building a more obscure than usual component.

Maintaining CSS can be problem in large projects. Here are some notes to make the maintainance a breeze

“Though nothing is perfect, I really appreciate the way BEM's structure makes it easy to tell at a glance exactly how selectors relate to each other.”

“If you have to imagine this kind of pain, think about new versions of Bootstrap. And multiply it by 1000 due to the bigger size of the library and the amount of projects. These were the problems which BEM offered to solve.”

“While I really like the flat selector approach that BEM defines, I prefer to not clutter my elements with a bunch of classes. My decision was then to use data attributes to apply my modifiers and contexts.”

Prägnanz & Pragmatik

BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

Using Pattern Lab and BEM on a project I stumbled upon a great way of structuring CSS, better naming, and better a developer experience.

“I have preached BEM, and I think it's a good solution to a lot of CSS semantic issues. But I think having a well documented naming scheme is more important than having a perfect one, and being dogmatic doesn't help anyone.”

Tim Baxter’s recent A List Apart article, Meaningful CSS: Style Like You Mean It, has once again re-ignited the debate that front-end…

I’m a designer at Sentry and a writer at CSS-Tricks.

Front-end development is no longer about individual frameworks. Tools are available — we merely have to choose. To make the right choices for your project, you need to start with a general approach, or methodology. But most methodologies have been created by big companies? Are they still useful for small companies, or do we need to reinvent them at a small scale?

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

There are benefits and drawbacks to every CSS styling approach. Keeping an open mind helps.

I'm a massive fan of BEM, however there are a few problems I have with the syntax. I've made some slight tweaks to improve on it. I call this adapted syntax ABEM.

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.

There are fashions in CSS usage, and I don’t always keep up with them. Structural markup like BEM block — element-modifier is currently…

The focus was on improving our Front End skills through a two-day workshop, but the experience gave us more than a bunch of technical skills and knowledge. Writing CSS is very simple.