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
1 answer

How override modifiers in nested rules

I have a question concerning BEM specificity. I want to be sure to use that methodology in the best way possible. Lets say I have generic style for a headline applying a color. Then my parent container has a modifier that edit the background. I then…
Dynomite
  • 176
  • 1
  • 2
  • 14
0
votes
1 answer

Using media queries, following standards with SASS and BEM?

I am following the BEM practice and want to add specific break points, it appears 2 formats work for me. Does anyone know the advantage of either ? Here is the first, I embed the media directly into the element (BEM) .my-component { …
Martin
  • 23,844
  • 55
  • 201
  • 327
0
votes
2 answers

BEM: Knowing how far to break down components and positioning components?

I have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the…
Martin
  • 23,844
  • 55
  • 201
  • 327
0
votes
1 answer

BEM style layout of laravel view folder

I'm starting in on a Laravel project, and having come from past projects using BEM style folder layout (sort by block, not by type), I'd like to do the same within the views folder provided by Laravel. The benefits of having keeping these files…
AgentCouper
  • 1
  • 1
0
votes
1 answer

Sass linter with BEM - Class should be written in lowercase with hyphens

The error I am getting is Class should be written in lowercase with hyphens .video_wrapper { //styles &__controls { //more styles Should I and can I suppress this error?
LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
0
votes
1 answer

BEM Methodology proper HTML structure

I have a doubts about this HTML structure. Is it correct according to BEM approach?

To my mind it should look like that
FeDev
  • 27
  • 3
0
votes
1 answer

Confused with BEM naming convention - need correction?

I'm creating ecommerce site for learning purposes and I've got problem. I'm using BEM naming convention and I don't know if I'm doing it good, here's my code:
user3043693
  • 47
  • 1
  • 8
0
votes
1 answer

SCSS: Bem and recommended directory structure?

I have started updating my styling side wide to BEM. So far I am loving it, but I am having an issue separating the scss into a correct directory structure. BEM takes care of my naming conventions for my classes, but I wanted to try and get some…
Martin
  • 23,844
  • 55
  • 201
  • 327
0
votes
1 answer

BEM vs Media Queries

I have a question concerning styles for generic blocks in BEM (for instance .button) vs Media Queries. The block in BEM (as documentation says) is supposed to have generic styles which will be applicable to all elements on site, let's say I have a…
AKAI
  • 15
  • 5
0
votes
0 answers

Creating Javascript RegEx to validate hyphenated BEM and camelCase

I have this Regex for detecting hyphenatedBEM in CSS files ^([\.\%]?[a-z]*[-]?[a-z0-9\-]*)(\.[a-z0-9\-]*)?(__[a-z0-9]*[-]?[a-z0-9\-]*)?(--[a-z0-9]*[-]?[a-z0-9\-]*)?(\:[a-z]*)*$ but I would also like it to detect CamelCase as well... I need to do…
Takuhii
  • 819
  • 2
  • 8
  • 26
0
votes
2 answers

list in list in BEM

I understood block__element--modifier naming rule with BEM methodology. But how can I name this kind of structure? If you have an nested list in outer list. How can I name nested ul and li in list block with list__item element?
    …
wonsuc
  • 3,498
  • 1
  • 27
  • 30
0
votes
1 answer

Declaring Sass variables using BEM methodology

I am trying to implement the BEM methodology to my sass variables. // Variables // Colors $color--blue--light: #3696D1; $color--grey: #2D4452; ... // Fonts $body__font--sans-serif--roboto: 'Roboto', sans-serif; ... /* Global */ body…
Alberto Marin
  • 101
  • 1
  • 10
0
votes
1 answer

BEM: Naming conventions

I would like some clarification about BEM convention. Say that I have a card block which will be used in two places/pages registration and dashboard. HTML structure for card looks something like this:
Uzzar
  • 705
  • 1
  • 12
  • 24
0
votes
0 answers

display:table won't get 100% width, tables using BEM metodology

I need to do few tables using display:table, and I trying get into BEM metodology the right way. .b-table { dispay: table; width: 100%; font-family: arial, sans-serif; } .b-table__cell, .b-table__header { display: table-cell; …
MikeLD
  • 3
  • 2
0
votes
1 answer

How to avoid redundant for something like BEM modifiers

Recently when I started to use my own implementation of methodology based on BEM I stuck on modifiers for nested elements. I want to change link color to red when product-desc-name has class mark. The following example presents the problem. What…
rflw
  • 1,747
  • 17
  • 26
1 2 3
…
29 30