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
0 answers

How to use "atomic-design with BEM" methodology for HTML/CSS?

I just started using the Atomic design-methodology for writing my HTML. I know to use BEM, but don't know the best practice's for using it with Atomic. Things such as element of an organism, element of a molecule, modifier of an element of a…
gopal prabhu
  • 213
  • 1
  • 3
  • 10
3
votes
1 answer

BEM Convention with SASS - Problem to understand

I am a beginner in front-end and I try to assimilate the notions of SASS and BEM. I have great difficulty understanding the naming convention and how it is organized with SASS. I wrote a product section which contains three div (column) which…
chris
  • 61
  • 3
3
votes
1 answer

CSS Selectors with double dash

I am trying to understand CSS selectors that include a double dash (e.g. .header-module--socialHeaderButton--1BLVB) that are generated through react.js and behave differently from standard CSS selectors. I am hoping someone has some documentation on…
khds120
  • 49
  • 5
3
votes
1 answer

Understanding SASS and BEM

This is not an opinion question. I'm trying to understand what's the advantage of BEM convention. I can't figure it out. Can you point me to the right direction? Without BEM:
Link 1
somerandomdrunkcoder
  • 43
  • 9
3
votes
2 answers

Why setting div class font-size doesn't set the p element font size?

Here is my html file. I want to change the font size of all p element in the div. So I change the font size of the div containing all paragraphs but it doesn't work. Why?

2

…
Y.R
  • 210
  • 2
  • 13
3
votes
1 answer

BEM syntax in SASS

I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round. I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good…
Phát Nguyễn
  • 155
  • 2
  • 16
3
votes
2 answers

BEM. Can Elements contain Blocks?

Here is my HTML
    • // can I place this block inside here?
    • ... …
Yokiijay
  • 711
  • 2
  • 7
  • 18
3
votes
1 answer

Media Queries when using BEM

I have been coding for only four months, so I don't know how to use methodologies and frameworks, correctly. I've searched for answers for my question for a long time, but I haven't been able to find any. I've watched many videos of professional…
Muhammad
  • 105
  • 8
3
votes
2 answers

How to Organize CSS with BEM?

I just learned about BEM, and I want to organize my CSS with it. How do I organize my CSS with BEM? The BEM website doesn't tell you how to organize your CSS with BEM; the website just tells you how to name your BLOCKS, ELEMENTS, and…
Muhammad
  • 105
  • 8
3
votes
1 answer

Is that compulsory to apply class name to each and every element in HTML while using BEM (Block,Element, Modifiers) naming convention?

I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element. Let's say I have the following code and…
Amit Kumar
  • 301
  • 2
  • 13
3
votes
1 answer

Naming conventions for responsive variables in SuitCSS

I recently started using suitCSS naming conventions in my Sass (not using default PostCSS setup) and it's not clear what's the correct way of naming variables: Variables used inside of component's media queries. In official docs, I only saw the…
MorrisWatson
  • 71
  • 3
3
votes
1 answer

What is the best way to write css flex code following BEM convention?

I have been reading about BEM and I would like to start implementing it. However, I am not very clear what would be the best approach. I have multiple flex divs with different styles, it really is very repetitive if I define each style in the class.…
Tom Bom
  • 1,589
  • 4
  • 15
  • 38
3
votes
4 answers

Should you style elements when using BEM or should we add extra classes

What is the more appropriate approach when using BEM ? Are we allowed to not add extra classes to elements and style the elements themselves
link
.news-section { a { color: blue; …
Paran0a
  • 3,359
  • 3
  • 23
  • 48
3
votes
2 answers

How to set external geometry or positioning for BEM block?

One of the features of BEM Block is: The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block. Here is the link to this article Then how to set external geometry or…
roc.an
  • 43
  • 6
3
votes
1 answer

Does everything that has CSS attached in BEM need a class name?

As people are still advising to use BEM for larger projects I thought I might give it a shot. But I already run into a problem by setting up the header-element of the page. This is how the page's header looks now:
lampshade
  • 2,470
  • 3
  • 36
  • 74
1 2 3
…
29 30