Stack Overflow
Stack Overflow

Questions tagged [bem]

BEM is an abbreviation for Block-Element-Modifier. It's a convention for naming HTML DOM elements, CSS classes, JavaScript variables, and other web programming identifiers in a way that is easy to support and develop. It can be used for the individual development of a single website or for a large team working across multiple websites.

In some ways, BEM (bem.info, getbem.com) is similar to OOP. It's a way of describing reality in code, a range of patterns, and a way of thinking about program entities regardless of programming languages being used.

BEM principles are used to create a set of front-end development techniques and tools, that allows to build websites quickly and maintain them over a long time.

Learn more

436 questions
9
votes
3 answers

Modifying BEM classes with Sass @extend

With the BEM methadology, say I have two classes like this: .staff__teacher and .staff__teacher--professor In the markup for the professor, is the idea to have both classes or just the modified class?
Lars
  • 7,908
  • 11
  • 52
  • 70
9
votes
3 answers

Can Elements contain Blocks in bem

I have been told I was wrong for writing the code like I have below. I suppose elements can not contain blocks and its bad b.e.m.
Eric Harms
  • 569
  • 5
  • 17
8
votes
1 answer

Correct approach for a navbar structure with BEM

I'm trying to wrap my head around BEM naming in CSS and am wondering if I'm understanding it correctly. Per the official docs, an element is: A part of a block that has no standalone meaning and is semantically tied to its block. Given the code…
Chris Brauckmuller
  • 333
  • 4
  • 10
8
votes
2 answers

What is BEM methodology?

I recently heard about BEM methodology. What exactly is the use of BEM methodology ? In what way does BEM make our work easier ? Is it a good practice to use BEM ?
Rasik
  • 893
  • 1
  • 8
  • 30
8
votes
4 answers

Sass BEM: avoid modifier duplication when element is inside a modifier

Can I somehow refactor the following code snippet to get rid of double modifier declaration? .block { &__element { rule: value; } &--modifier { rule: value; } &--modifier & { &__element { rule: value; } } } Output…
Yan Takushevich
  • 1,843
  • 2
  • 18
  • 23
8
votes
1 answer

The differences between BEM and SUIT CSS naming conventions

What are the differences between BEM and SUIT CSS naming conventions?
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
8
votes
2 answers

BEM and "active" classes / Decoupling HTML and JS

I've started using BEM methodology to decouple my HTML and CSS ... and it works pretty well most of the time. Even if its only your personal opinion, i would still like to know how others deal with this: Let's assume we need to build a simple…
mrksbnch
  • 1,792
  • 2
  • 28
  • 46
7
votes
1 answer

Is it OK to use multiple modifiers for a class in BEM?

Is it ok to add multiple modifiers to an element in BEM like this: my-item__icon--open--not-red As you can see I added --open and --not-red to my-item__icon. Is this ok? Is there a better way to achieve the same?
user1941537
  • 6,097
  • 14
  • 52
  • 99
7
votes
4 answers

How to properly mix Bootstrap and BEM?

I'm looking at slowly refactoring a pretty big project that is built on Angular / Bootstrap that has just over 16,000 lines of CSS. Yay! I've been looking more and more into BEM and believe it would be a good way to go for this. There is also a…
bernk
  • 1,155
  • 2
  • 12
  • 22
7
votes
1 answer

How to structure css using BEM methodology for adaptive web pages?

It is easy to use BEM for fixed layouts. What is about css styles structure for adaptive web pages with media queries? html sample:
pepeevich
  • 183
  • 1
  • 4
  • 20
7
votes
6 answers

Is CSS !important ok into a BEM modifier?

Given an element with some styling and an additional class (mywidget_button--disabled) that works as BEM modifier, does it has sense, as practice, to use the !important clause? .mywidget__default ~ .mywidget__button { border: 1px solid…
Kamafeather
  • 8,663
  • 14
  • 69
  • 99
7
votes
2 answers

Sass with BEM, inherit selector

I'm using Sass 3.4.1 and BEM so my scss is: .photo-of-the-day{ &--title{ font-size: 16px; } } and I want every time hover over .photo-of-the-day something happen with title, that's pretty common so usually in…
alexrqs
  • 183
  • 1
  • 6
7
votes
1 answer

BEM CSS: Similar blocks and style sharing

Reading about BEM CSS and having coded some small sites using - I am fairly familiar with it. However, I'm still unsure about how to deal with blocks that are very similar, but have no relation. Say I have lots of unordered list blocks, which all…
Andy
  • 117
  • 7
7
votes
2 answers

What is the point of BEM's explicit descendant class naming in the presence of SCSS?

I'm trying to pickup and understand the reasoning behind CSS naming conventions such as BEM or SUITCss. I'm having a hard time understanding the value of descendent class names in the presence of SCSS. For example:
7
votes
1 answer

BEM Confusions with naming elements

I have been using BEM on a project at work for keeping my CSS more modular and come across a few situations I feel a need for a bit of clarification on: Context dependent styles. I keep coming across a need to change a style of a module/component…
rctneil
  • 7,016
  • 10
  • 40
  • 83
1
2
3
…
29 30