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

Vertical align for div with text and other div with picture (BEM)

I'm working on my third project, and I need help. I need to align text and pic like on added picture. So this is my HTML: ._colon { width: 700px } .big-cars-list { list-style-type: none; margin: 58px 0 0 0; padding:…
Maxim Brkn
  • 105
  • 9
0
votes
1 answer

A better way to write BEM style in HTML

Lets says I am creating a component "Component" and its children or modifier. BEM style would be
I'd like write it as this way
user2734550
  • 952
  • 1
  • 12
  • 35
0
votes
1 answer

As in the BEM methodology is better Nativity elements nested within elements

As in the BEM methodology is better Nativity elements nested within elements I have the following markup: …
Alexey Popov
  • 76
  • 2
  • 8
0
votes
1 answer

naming nav dropdown with bem

which it is the best way to naming a dropdown menu with bem ?? use children nav-main__sub or modifier nav-main--sub ??
0
votes
2 answers

CSS styles for all the different UL uses

The ul tag is very generic and something I continually struggle with. Initially I had a base style rule defined for my ul and li tags to handle bullet points in my generic text blocks for WYSIWYG text. I am using BEM so I figured I would just add a…
gjok
  • 195
  • 1
  • 12
0
votes
2 answers

Am I using the BEM methodology right?

I was wondering if my code was using BEM right. I don't know if I must change the classes form__label--close and form__input--close by a sort of js-is-closed class, because this class is remove by javascript when clicking on the element. Here's my…
user4606722
0
votes
2 answers

How do I name a navbar structure with BEM?

I have the following SASS code. How would I do the exact same but using the BEM methodolgy? nav.primary ul { border-top: 2px solid $darkgreen; display:block; margin:10px 0 0 0; padding: 25px 0 0 0; li { …
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
0
votes
1 answer

confusion with Nested Bem classes

I have a header with nested classes. How can I write classes name? Is the following correct?
ialhamad
  • 48
  • 1
  • 6
0
votes
1 answer

Turn off link hover

I am working with Bootstrap SASS and Bootstrap SASS Loader. I am defining a _bootstrap-customizations.scss file that allows me to override BS default variables without changing it's core files. The core files define some a:hover, a:active CSS…
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
0
votes
1 answer

Validate less with gulp including BEM

so I have a fairly decent sized code base which is using less (many files). I want to convert the css to use BEM (actually a variant of BEM) and I would love to find a gulp way to lint the less files including naming conventions. Is there any way to…
Lukas Oppermann
  • 2,918
  • 6
  • 47
  • 62
0
votes
1 answer

sass parent of parent specificity

I write CSS in BEM style and have this code: .nav { &__list { &__item { } } &__link { &--active { } } } How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance…
sikwel
  • 1
  • 2
0
votes
1 answer

BEM CSS with common styles

I have a bit of confusion when it comes to using global styles. Consider the following: Say I have a stylesheet that defines how buttons should be made: /* Button.CSS */ button { background-color: #CCC; } button.Blue { background-color: #00F; …
Handonam
  • 618
  • 8
  • 17
0
votes
1 answer

HTML and CSS refactoring according to BEM methodology

I'd like to refactor existing code and implement BEM naming convention. But I am facing difficulties in converting code into markup that fits BEM conventions/requirements, especially with nested elements. I'm looking for the answers to the following…
Karl Tynan
  • 125
  • 2
  • 12
0
votes
1 answer

Best way of marking this up in BEM CSS

I have been starting to use BEM as a CSS methodology for organizing my CSS and over the course of the projects, pretty much everything has turned into a module. I put layout styles for a module in the parent module. That has been working…
rctneil
  • 7,016
  • 10
  • 40
  • 83
0
votes
1 answer

Sticking to modular styling

I have two modules: A .master-header and a .header-nav The .header-nav is inside the .master-header and is a simple nav:
rctneil
  • 7,016
  • 10
  • 40
  • 83
1 2 3
…
29 30
Your Items