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
81
votes
3 answers

BEM block, naming & nesting

I am trying to wrap my head around BEM naming convention. I am stuck at this. I may misunderstanding something, lets see. I have a sidebar nav and a content nav. My sidebar nav looks like this
    …
aventic
  • 1,494
  • 2
  • 16
  • 23
34
votes
6 answers

Why does BEM often use two underscores instead of one for modifiers?

In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier. But why use block__element instead of block_element?
Gil Birman
  • 35,242
  • 14
  • 75
  • 119
22
votes
2 answers

Is it possible to include the parent properties in an extended Sass class?

I'd like to implement something like the BEM model in my Sass library. But I'm struggling to find a clean way to do this. For example, I'd like to declare a 'base' style for a common element, and then extend it with useful variations: .container { …
markedup
  • 1,247
  • 2
  • 12
  • 21
20
votes
3 answers

BEM with SASS and :hover

What's the proper way of declaring active/focus/hover states using BEM with SASS? For example, I have this structure:
so4t
  • 379
  • 1
  • 3
  • 5
18
votes
3 answers

naming BEM sub blocks

I'm using a BEM approach to writing html + css. With this syntax: Blocks: block_name Elements: block_name__element_name Modifiers: block_name__element_name--modifier I get confused when I have a block within another block. For instance, in a…
jeremyhoover
  • 183
  • 1
  • 1
  • 6
16
votes
2 answers

Matching multiple BEM modifiers in Sass

I am using BEM, and have an element with multiple modifiers:
I'm using SCSS and taking advantage of it to write nested rules compatible with BEM. If I want to write a rule…
Robert
  • 5,735
  • 3
  • 40
  • 53
16
votes
8 answers

How to structure BEM modifiers with nested elements in SASS

SASS + BEM is pretty much a match made in heaven most of the time, but a common struggle of mine is understand how to best define BEM modifiers on an element that affects it's child elements while using SASS parent selectors. I have the following…
Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
15
votes
4 answers

SMACSS and BEM: How to position Module inside of a Module?

Note: I use the word Module which in BEM is called a Block. Also using modified BEM naming convention BLOCK__ELEMENT--MODIFIER, please use that in your answer as well. Suppose I have a .btn module that looks something like this: .btn { …
Gil Birman
  • 35,242
  • 14
  • 75
  • 119
14
votes
2 answers

Naming A Wrapper Element Class When Using BEM

I understand that when using BEM, the classnames should not directly reflect the HTML structure, but how should a wrapper element be named? Please ignore my particular syntax(close to SUIT); it still follows BEM, just with a different way of…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
14
votes
1 answer

How to properly set an element's scope using BEM?

Given the following BEM tree structure, where five nested levels exist: collection-main__features-top__story__byline__author according to BEM's naming convention, where an element is part of a block and has no meaning outside of the block it…
Eric Xu
  • 277
  • 3
  • 9
13
votes
2 answers

How to lint for a harry robert's BEM convention with stylelint?

PostCSS BEM Linter plugin needs component definition for each block which is a time consuming thing to do in a legacy project. Is there a way to use stylelint to check for the classes pattern and show error in all stylesheets (.scss in my case) of…
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
13
votes
4 answers

BEM approach for an element than can belong and look different depending on the Block?

Let's say I have a styled checkbox (think material design, where there is a bit going on to achieve the desired checkbox style). Which block is responsible for modifying a parent-dependent child block? Example Component - Checkbox So I have the…
Chris
  • 54,599
  • 30
  • 149
  • 186
12
votes
2 answers

Confusion with BEM modifiers

I have started using BEM methodology while writing my CSS and there have been few occasions where I have struggled to find out the best way to do a particular thing. I would like to take up a simple example of a panel here. Lets say I am writing a…
Kushagra Gour
  • 4,568
  • 2
  • 22
  • 26
11
votes
2 answers

Are SMACSS, BEM and OOCSS not as portable?

SO I have a problem with OOCSS. It is supposed to be more portable but compared to how I usually do things, I'm finding it less so. My example: I have a widget testimonial. In the main content body (which has a white background) the testimonial has…
gjok
  • 195
  • 1
  • 12
10
votes
2 answers

BEM nesting SCSS with parent selectors breaks Sublime Text syntax highlighting?

I'm experimenting with BEM syntax on a project that uses SCSS. My editor is Sublime Text 3 and I'm using SCSS syntax highlighting. The problem I'm experiencing is that when I nest using the & parent selector as per this article by Mike Fowler,…
fourhexagons
  • 103
  • 1
  • 4
1
2 3
…
29 30