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
7
votes
4 answers

Confusion with BEM class naming convention. One level deeper

For example I have a menu block with menu elements: .menu .menu__element .menu__element--current But lets say .menu block is contained inside another block, .header How to deal with naming in this case? .header .header__menu .header__element…
gskalinskii
  • 967
  • 2
  • 11
  • 17
6
votes
1 answer

How to express structural pseudo-classes (ex `:last-child`) in BEM?

I'm trying to express a simple CSS3 selector in BEM: CSS .block__elem { /* ELEM RULES */ } .block__subelem { /* SUBELEM RULES */ } .block__elem:not(:last-child) .block__subelem { /* HOW CAN I EXPRESS THIS? */ } HTML
Minkiele
  • 1,260
  • 2
  • 19
  • 32
6
votes
2 answers

Configuring Sass Lint for BEM

So i'm moving to writing my sass to the BEM convention. I've used the sass-lint configuration generator to create my config and only edited the class-name-format's - convention: to strictbem however I'm still having some issues with it. Maybe I'm…
Jam3sn
  • 1,077
  • 4
  • 17
  • 35
6
votes
1 answer

CSS BEM, which chars for the modifier..?

I'm not sure which is the official website, I've found getbem.com and en.bem.info. One suggests using -- for the modifier (Naming): CSS class is formed as block’s or element’s name plus two dashes. The other _ for the modifier (Modifier name): A…
Stephen Last
  • 5,491
  • 9
  • 44
  • 85
6
votes
1 answer

BEM: What are modifiers allowed to modify?

Let's say I have the following CSS for a generic list component, using BEM and SCSS: .list { &__item { &:not(:last-child) { margin-right: .3em; } } } I want to add a modifier that can make the list vertical, like…
Malax
  • 9,436
  • 9
  • 48
  • 64
5
votes
3 answers

What to do when the Block element in a BEM component doesn't need any styles?

Let's say I have a structure like this:
5
votes
1 answer

How to select nth-child inside Element BEM Scss

I am using BEM Scss explain please how to select inside nth-child element. I tried below format but it didn't work for me
B.Vinothkumar
  • 153
  • 1
  • 8
5
votes
2 answers

BEM CSS and states

Been trying to learn BEM and while I know that BEM is not just CSS it seems like a best place to start. So I made some basic preloader css: https://jsfiddle.net/ygz931s7/ And modified it to fit BEM notation: https://jsfiddle.net/af36921w/ The…
12init
  • 127
  • 8
5
votes
3 answers

SCSS + BEM style children structure when parent has modificator

Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
Hello
Dawe
  • 562
  • 1
  • 9
  • 19
5
votes
2 answers

Child element of modifier element?

Take the following structure:
...
...
If I need to make article__headline…
Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
5
votes
2 answers

Trouble naming children of BEM modifiers

So I have the following BEM classes: .block .block--modified .block__child Now from what I have seen most people would name the child of the modified .block like so: .block--modified__child Which I get that makes sense, but is there a reason you…
Otis Wright
  • 1,980
  • 8
  • 31
  • 53
5
votes
3 answers

What benefit does using BEM --modifier bring?

I'm having trouble understanding advantage of using BEM --modifier css naming convention. Can someone tell me why is this: .my-element--checked { color: green; } better than this? .my-element.checked { color: green; } Markup is clearly…
smohadjer
  • 801
  • 1
  • 9
  • 24
5
votes
2 answers

BEM - Where to include modifiers for specific pages?

I am trying to use BEM naming convention and having some slight difficulty in deciding where to include a modifier for a specific page. For example, say I have an orange button: My project has 3…
brunodd
  • 2,474
  • 10
  • 43
  • 66
5
votes
2 answers

Specifying styles for child elements of a BEM modifier

I have the following BEM style Css to define a simple box: .box { /*styles */ } .box__heading {/*styles */} .box__image { /*styles */} I also need to be able to show the box in error mode so have defined the following modifier: .box--error…
Mike Rifgin
  • 10,409
  • 21
  • 75
  • 111
5
votes
1 answer

Using HTML5 Semantic Elements with BEM Methodology

Is it a good practice to use HTML5 semantic elements with BEM? E.g. is
OK or I should use divs instead?
chervand
  • 83
  • 8
1 2
3
…
29 30