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

Mobile menu visibility and invisibility using JQuery

I am new to javascript and jquery. In the online course i am doing, we are learning to make our mobile menu appear and disappear by having it add a modifier to the selector element when you click the menu icon (.nav-bar__menu-content to…
Eddie Jude
  • 1
0
votes
1 answer

When using BEM, is it illogical to have a block nested inside its element?

Let's say I want to have a title block, and for styling considerations I need to nest it inside a div with some special CSS styling (e.g. I want specific border and spacing styling). Let's call this one box. The box just serves the style the title…
GregRos
  • 8,667
  • 3
  • 37
  • 63
0
votes
2 answers

How to select grand parent on SCSS inside BEM modifier?

While i was trying BEM and SCSS. Using SCSS to select modifier and Elements is easy but the hard part is while using modifier and referencing element that doesn't have modifier class is breaking the neat approach i made. Here is the quick example…
Sanjeev Shrestha
  • 27
  • 9
0
votes
2 answers

Is a good practice to combine multiple css classes when trying to create isolated components?

I've been using for some time a "BEM like" syntax in my projects. Recently, I was just re-reading some CSS articles when I saw this: https://en.bem.info/methodology/css/#single-responsibility-principle Basically, instead of putting all the styles…
Lars
  • 554
  • 1
  • 5
  • 19
0
votes
1 answer

How to extend in scss from parent (in case of BEVM)

I try to understand BEVM+SCSS philosophy. I don't know how to extend V from BE in this case. What I want to achieve: .block { &__element { background-color: black; &--variation-a { @extend &__element; //won't work …
S Panfilov
  • 16,641
  • 17
  • 74
  • 96
0
votes
1 answer

CSS transition on hover using BEM and Sass

I am trying to execute a CSS transition (opacity:0 to opacity:1 with pleasant transition) - I'm writing Sass and using BEM. I was hoping to make use of the sibling operator + so that I can maintain my Sass nested BEM structure. When the user hovers…
user1486133
  • 1,309
  • 3
  • 19
  • 37
0
votes
1 answer

SCSS and BEM naming structures and best practices.

At the moment with scss I understand variables, includes and nesting. I am trying to create a new scss set up that uses the BEM naming structure. so for instance .btn { padding: 20px; .btn__value { color: $valColour; } } .btn--gold { …
Michael Mano
  • 3,339
  • 2
  • 14
  • 35
0
votes
2 answers

BEM element nest naming and sass rule

This is my current html structure, I've checked on other sources and some have different opinions and wanted to ask specifically for my situation. Is the naming correct? Having domainname as the main block then on the domainname__pricelist I would…
user5386998
0
votes
1 answer

BEM too much classes?

I have been following the BEM methodology and i am not sure if i am doing it right since i end up with quite a lot of classes sometimes. I wan to keep my code modular and reusable so i started to use mixins and placeholders. But in some cases i will…
HendrikEng
  • 654
  • 1
  • 10
  • 32
0
votes
1 answer

How would I name these nested elements using BEM?

So I have a page like so:
Header Title
…
thitemple
  • 5,833
  • 4
  • 42
  • 67
0
votes
2 answers

Bourbon Neat and semantic HTML5, what about BEM?

I'm trying to write a very minimalist blog as a way to re-learn html and css. I'm trying to understand what I should use to select the elements of my page between plain tags, id or class. For exemple this is what one of my page coud look like : …
Floyd83
  • 41
  • 1
  • 6
0
votes
1 answer

css BEM - do we really need the E?

So I am working on a very large e-commerce site, only been on it a short time and the project was developed a year ago. Im thinking to refactor the css as it seems to have got out of hand...and I was wondering if we really need to use the E in css…
user1806692
  • 143
  • 1
  • 10
0
votes
1 answer

First use BEM. What I doing wrong?

I try to use BEM in first time and I think that I don't quite understand it. Is it necessarily to assign classes to all elements, include li and a? I would be very grateful to receive your advice on this peace of code:
Medvedev A.
  • 305
  • 2
  • 11
0
votes
1 answer

Sass add parent selector after current ( selector& )

I have BEM structure like this (but the question not about BEM): .form-element { //.form-element ... &__control { //.form-element__control ... } //now I want to have specific rule: textarea.form-element__control …
Kindzoku
  • 1,368
  • 1
  • 10
  • 29
0
votes
1 answer

SCSS Lint: Force only classnames to be used as a selector

I have a .scss-lint.yml file containing all the rules I want to use in my project. One thing we enforce in our SCSS is that only classes are targeted, as per BEM documentation. Because this is not covered in my .scss-lint.yml, it stands currently as…
alanbuchanan
  • 3,993
  • 7
  • 41
  • 64
1 2 3
…
29 30