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

Can we make an element of block modifier in BEM?

I just wanted to know whether the following code follows BEM methodology best practices? Creating an element for the block modifier i.e. in this case "block--mod" is a modifier for the "block" block. Is it allowed to create a nested element with…
Amit Kumar
  • 301
  • 2
  • 13
3
votes
3 answers

Modifying elements within a block--modifier correctly

I am trying to closely stick to the BEM methodology and I am frequently running into this issue which I feel it is time to ask for a solution (or opinion) to. Consider I have a human body; this human body is light by default and therefore, it's arms…
dnlwtsn
  • 180
  • 2
  • 10
3
votes
1 answer

Bem naming underscore, hyphen or camelcase in element names

I have an element call "user nav" Currently I have .header__user-nav With a modifier .header__user-nav--active Is it better to use single underscores for element names .header__user_nav--active or hyphens .header__user-nav--active or…
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
3
votes
3 answers

CSS: Avoiding IDs ? Use classes / direct child selectors / nth-child?

Trying to tidy up my CSS, it's a mess, I have a number of IDs spread throughout the divs, child divs so that I am able to select them in CSS. I was wondering what the correct way of doing this ? I thought about using classes, which appears to be a…
Martin
  • 23,844
  • 55
  • 201
  • 327
3
votes
1 answer

Get ampersand modifier to inherit all properties from parent

I'm using SASS's handy ampersand notation to add BEM-style modifiers to my classes: .box { display: inline-block; width: 100px; height: 100px; background: magenta; &--selected { background: cyan; } } I'm exploring…
Sandy Gifford
  • 7,219
  • 3
  • 35
  • 65
3
votes
4 answers

BEM Methology: Elements outside Block

Wonder if that is correct the BEM way. Let's say I have a component/block "box".
Box Title
This box can be used everywhere. But then for example this box can also be used in a list…
kingmauri
  • 345
  • 1
  • 3
  • 9
3
votes
2 answers

I want to know the difference between rscss and bem

I don't understand the difference between RSCSS vs BEM. Someone says RSCSS and someone says BEM. Pls let me know the difference that
Pirune
  • 187
  • 1
  • 1
  • 11
3
votes
1 answer

How to implement a theme when writing CSS using BEM naming methodology?

I use the BEM CSS naming convention on a project i'm working on. Everything peachy so far. However i need to implement several themes (meaning slighly different designs) on the same html page. Writing this: .name-of-theme .block1 { …
T. Jans
  • 31
  • 3
3
votes
2 answers

How to specify state with BEM?

Using BEM CSS class syntax, lets say I have an element with the following class: ...
...
... Now lets say there is an event or something where this "tooltip" becomes active or visible. What is…
Jake Wilson
  • 88,616
  • 93
  • 252
  • 370
3
votes
1 answer

Can block elements be dependent on block modifiers in BEM?

What's common use when using BEM? I can't find this anywhere.. In SCSS, can I make .block__element dependent of the modifier of its block? For example, say .header__text is always white but only when .header has the modifier .header--bgblue.
albert105
  • 119
  • 1
  • 2
  • 8
3
votes
2 answers

BEM Common Styles

What is the best way of defining general non-block-specific styles throughout the site? For example: html

foo

Phil Pill
  • 303
  • 2
  • 14
3
votes
2 answers

BEM and single selectors

This is sort of a theoretical question, but it bugs me for a couple of hours now. I'm learning BEM and it's great so far, but I have a problem. Let's say I have this code:
Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112
3
votes
1 answer

BEM-style naming with specialised components

Using BEM naming conventions, how should situations where a component is a specialisation of a base component be handled? (I'm using Nicholas Gallagher's variant here). So assuming I have a set of default styles for table elements and a more…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
3
votes
1 answer

How to modify multiple elements of a block with BEM CSS

Let us say I have the following setup, .block .block__header .block__content .block__footer Now I want to show an active state of this block. Let us say the block itself gets a green background and element 2 and 3 should get bold text. As I…
chris
  • 113
  • 1
  • 6
3
votes
1 answer

Using BEM CSS with Angular Directives

I've been using BEM style CSS to style my angular directives and usually use replace: true to so that my Block level class can be on the "root" of the custom element. This makes it so that I can write all my CSS primarily with classes. However,…
Paul
  • 4,422
  • 5
  • 29
  • 55
1 2 3
…
29 30