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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
25 views

How to set case of BEM in VSCode?

I've just started learning BEM methodology and typed the following code in VS Code: <html> <head> </head> <body> <form class="search-form search-...
Ella Ksenofontova's user avatar
0 votes
1 answer
27 views

Using BEM for large set design

I'm interested in how to solve the problem of names for classes. For example I have 30+ options for the first section (hero). They have different structure and different blocks inside. On the one hand ...
Mykyta Severyn's user avatar
0 votes
1 answer
30 views

How do I use BEM in a component structure?

I am currently trying to use BEM in a training project. To start with. I like having structure in my CSS. However, I am having a problem using BEM correctly. In the current case I don't know if I have ...
Maik Lowrey's user avatar
  • 16.4k
0 votes
0 answers
34 views

BEM configuration for react typescript

I used to work for a company that used BEM to build classNames for react elements, now I'm working on a solo project and would like to use it, and came across this package rebem-jsx but my project is ...
Mohhaliim's user avatar
0 votes
1 answer
27 views

How to categorize typography variants in BEM?

I have just recently been introduced to BEM and I'm excited to implement the methodology in my react component library. I have a Typography component with different variants. Notably, the variant is ...
sumowrestler's user avatar
0 votes
1 answer
49 views

Multiple classes on same parent element not working at the same time: BEM

I have two classes on the header: .header-container & a theme class, for example solid-green or solid-blue. The current markup works correctly in terms of applying the relevant theme styles, but I ...
cts's user avatar
  • 948
0 votes
1 answer
194 views

How to style buttons using BEM?

I'm new to html/css and I'm learning the BEM css methodology but I got stuck pretty early. What I wanted to do: have a button block have a color modifier (default/primaryColor) have different button ...
QwerJoe's user avatar
  • 84
0 votes
0 answers
146 views

Change Vitejs build to preserve classes name to not lost information from BEM

I'm building my project with Vitejs and using BEM. So I can have an SCSS like this one: .button { &__icon { &--disabled { ... But we lost the information when importing it, having ...
macabeus's user avatar
  • 4,246
0 votes
0 answers
246 views

How to fix the white screen on mobile after build with vite (React)?

I have build this simple app that include only one component interactive-rating-component it is working fine on computer and it is responsive but when i am tring to open it from my mobile i get a ...
محمد حسين's user avatar
0 votes
0 answers
54 views

Safelist pattern for bem modifiers tailwind

Is there a tailwind pattern that can include any modifiers written like this? component--modifier? The modifier is dynamically concatenated. So with twig logic it looks like this {{ modifier ? 'block--...
Dan Emery's user avatar
0 votes
0 answers
82 views

CSS attribute selectors with BEM and JS hooks

I am in the process of rewriting our CSS3 style sheets using BEM protocol (the code became too difficult to manage!) The struggle with converting is our attribute selectors and to hooks to JavaScript ...
Dirk's user avatar
  • 1
0 votes
1 answer
46 views

I need help, my first time using BEM, is this correct?

This is my first time trying to use BEM and I'm not sure if I've done it correctly. Is there anything i need to change?? <body> <div class="wrapper"> <main class=&...
Steven Tran's user avatar
1 vote
1 answer
58 views

Multiple BEM elements and modifiers in Sass [duplicate]

I am using BEM with multiple elements and modifiers but different blocks. .header__column--6 width: 50% .footer__column--6 width: 50% Is there a way to address the elements and modifiers ...
Bitkit's user avatar
  • 13
1 vote
1 answer
79 views

Is there any way to style a <svg> fill property inside a <p> tag using just one modifier without violating the BEM CSS principles?

I wonder if I could style <svg> fill color with just paragraph--color modifier. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...
Rafael Reis Ramos's user avatar
2 votes
1 answer
101 views

what is service block in BEM naming methodology?

bem elements rules say. Create an element If a section of code can't be used separately without the parent entity (the block). The exception is elements that must be divided into smaller parts – ...
coding journey's user avatar
3 votes
1 answer
108 views

Should I create a block or an element BEM CSS?

** Bem official website says ** Create a block If a section of code might be reused and it doesn't depend on other page components being implemented. Create an element If a section of code can't be ...
coding journey's user avatar
0 votes
0 answers
54 views

How to deal with mini blocks of sections in BEM naming convention?

markup 1: - below I've created "about section" block. in this block have some mini blocks like:- stats and features. ` <section class="about"> <div class="...
coding journey's user avatar
1 vote
1 answer
344 views

Reactjs, Bem naming nested structure with SCSSModule

We are using SCSS, SCSSModule and BEM naming methodology. I have researched the best structure for nested elements. I've seen different syntaxes and still have question mark in my head. I saw the ...
lead.eg's user avatar
  • 86
1 vote
0 answers
25 views

Can a BEM Block have optional Elements?

I have a "card" which looks like this: <div class="card"> <div class="card__tag" </div> <div class="card__title"> </div> ......
treblig13's user avatar
1 vote
1 answer
395 views

Double underscore '__' in BEM of NextJS Css module throw error

I'm new to Nextjs and BEM naming convention, i have nextjs project where i'm using BEM, in Header.js <div className={style.header}> <div className={style.header__logo}>Logo</div> &...
Shanthi B's user avatar
0 votes
1 answer
212 views

bem css big confusion

** writing multiple block on same element is right approach in BEM ? * <div class="block-1 block-2 block-1_modifier block-2_modifier"> <div class="block-1__element1&...
sam sam's user avatar
  • 66
0 votes
0 answers
76 views

How to properly set the name of the BEM class for different card designs

Let's imagine that the task before us is to develop 50+ unique types of cards, headers, footers, etc. It will be okay if I name the card types like this: card-23, card-24 Or is there a better solution?...
Mykyta Severyn's user avatar
0 votes
1 answer
23 views

SASS: BEM --pink to a P element

I've delcared my modifier to the P element as per below. In HTML (at the bottom), what am I doing incorrectly as the p tags do not change to pink if I declare the class name as shown. p { font-...
huckleberry2021's user avatar
1 vote
0 answers
252 views

How to export class names from CSS Modules that follow BEM naming convention?

I want to have ability to import class names from css modules in BEM naming convention like that: import { block, block__element, block__element_modifier } from '@styles/name.module.css'; ...
Dima Kambalin's user avatar
0 votes
1 answer
607 views

nested selector with scss on active class

Sorry for the title, I don't know how to explain it. I have an item like this : <div class="faq__item"> <div class="faq__item-header"></div> </div> When I ...
Jean R.'s user avatar
  • 496
0 votes
0 answers
97 views

BEM methodology for html template tag

I am building an website and trying to use template tag. And the template is below: <template class="company-template"> <div> <img> <div></div> <button&...
user12175383's user avatar
-2 votes
2 answers
88 views

How should I name these classes according to BEM?

How should I name these classes according to BEM? Are all of them considered elements and need to be named accordingly? <form class="authentication" autocomplete="off" ...
MJW's user avatar
  • 1
2 votes
2 answers
153 views

Leveraging the CSS sibling selector within BEM

Say I have a block called .my-block. Depending on whether a specific element, say, .my-header appears before it, I need to style it differently. Because this is easy to do with the CSS sibling ...
kslstn's user avatar
  • 1,466
2 votes
1 answer
205 views

How to retain advanced SASS nesting option when using correct BEM methodology

This had been discussed multiple times, but I haven't seen a proper answer yet. I want to use BEM methodology in my code, but I want to preserve advanced SASS nesting options for better code ...
Kristián Filo's user avatar
0 votes
1 answer
52 views

is this correct BEM?

I am not sure what to do with the "about-text_container" div. I need it to put a flexbox around the text so I can center it. What should I do in this situation? Create a new block? <!--...
RDX10290's user avatar
  • 471
1 vote
0 answers
120 views

Styling React Web Apps

I'm looking into different approaches to styling React Web Apps. In our company, we are currently using styled-components for a large project. So far, my search shows that React (unlike Angular) does ...
Confront's user avatar
  • 518
1 vote
1 answer
1k views

Should we use BEM(Block, Element, Modifier) in react styled component

I am working with react styled component. Should we use BEM(Block, Element, Modifier) in styled component ? If yes then how ? I tried to give ClassName but its not working import { SiteHeader } from '....
Ashwani Panwar's user avatar
1 vote
0 answers
28 views

I would like the header logo and main visual to be aligned vertically

Prerequisites The header logo and main visual are side by side. Expected value I want the header logo and main visual to be aligned vertically.I would like to do something like this URL. Reproduction ...
atago-IT's user avatar
  • 215
-1 votes
1 answer
44 views

Unterstanding the structure of CSS Framworks

I am working on my first utility Class, or maybe some micro framework. If I got some Markup like this: <div class="even-columns wrap on-desktop"> <div class="item"> &...
Christian Möller-Hansen's user avatar
0 votes
1 answer
149 views

BEM naming techniques for reusable components

So I am trying to learn BEM and basically I have a element that appears more than once but in different blocks, the styling for the element is the same in both blocks so usually I would give them both ...
user2983251's user avatar
0 votes
1 answer
87 views

Forbid flexbox items to flex w/o use of * selector

I work with BEM and use a flexbox container purely for alignment and responsive design purposes. The problem is that sometimes it also wants to scale its daughter elements, which I don't want. Like ...
klm123's user avatar
  • 12.3k
1 vote
1 answer
378 views

CSS BEM, nest child elements or create new block?

I love the BEM concept, but I get extremely confused when an element has multiple child components, should I keep nesting elements or transform them into new blocks? or something else? Real example: &...
Yung Silva's user avatar
  • 1,344
1 vote
1 answer
366 views

How to Handle Variant in SCSS using BEM Methodology

I'm trying to figure out this stupid yet annoying issue that I face up with BEM. Currently for my application, I follow the BEM methodology for creating UI Elements. For instance : <div class=&...
Titus Saju's user avatar
0 votes
0 answers
237 views

Maintaining BEM for Variants in SCSS

Just wondering how this situation would be handled in BEM. I've written code for a card UI element in scss as follows. <div class="card-custom"> <div class="card-...
titus's user avatar
  • 40
0 votes
1 answer
412 views

BEM Global modifier for color

I've been using BEM for a week, and there is a thing I don't get. BEM says global modifiers are not recommended (http://getbem.com/faq/#can-i-create-global-modifier) But then how should I do this ? ...
Yohan Dahmani's user avatar
0 votes
1 answer
253 views

Why my element uses 2 different font-sizes?

I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element. But when size of browser changes, then it changes(font-size). Why? and ...
Lshiroc's user avatar
  • 39
2 votes
1 answer
1k views

BEM naming for a container div? [closed]

I'm new to BEM naming convention. From the tutorials I've watched, the Block part seems to be the "Wrapper" which contains Elements. My question is how does BEM work with Containers which ...
Mikuro's user avatar
  • 43
0 votes
1 answer
338 views

Hover on nested elements using SASS and BEM

I try to use hover for button element and for SVG within button. But in here piece of code https://codepen.io/asssel/pen/wvrojOd It doesn't work for SVG. Help me how to implement it. .tag { ...
GrayHat's user avatar
  • 139
1 vote
1 answer
293 views

BEM nesting elements and hover effects

So, let's say that I have the following code <div class="list"> <div class="list__wrapper"> <ul class="list__menu"> <li ...
IronCanTaco's user avatar
0 votes
1 answer
563 views

BEM: How to (and should I) reuse class names?

Lets suppose I have the following site structure: As you can see, the affirmation blocks serve the same purpose, so it makes sense to use the same name for them, but it creates a name conflict. The ...
reptofrog's user avatar
2 votes
0 answers
104 views

why chrome developer tool showing "one" underscore?

As one can see in above screenshot. In right side , Chrome developer tool,the highlighted portion showing "one" underscore . But I used "two" underscore" in my VScode as you ...
Ritik Kamboj's user avatar
1 vote
2 answers
182 views

Targeting BEM-formatted CSS selectors with Sass

I'm trying to slightly modify the styles of a block formatting plugin in Wordpress by overriding them in my own theme stylesheet. I use Sass but I'm new to it. Pasting all of the selectors right out ...
liberty_bell_7's user avatar
0 votes
1 answer
159 views

I need help using the BEM method for my section

since i'm using nested div for product card, i'm having trouble using the BEM method when structuring my cards. For the rec__container, I am using display:flex so I can justify-content:space evenly. ...
Natasha Martinez's user avatar
0 votes
1 answer
46 views

Compliance with BEM specifications

Does this code violate the BEM specification or is it a "mix? <button class="corp-info__button-read-more button">Read More</button> It's the class button that interests me.
GeKtoRiX's user avatar
-2 votes
1 answer
236 views

CSS methodology: OOCSS vs. BEM [closed]

Which one should I use, OOCSS or BEM, when you want to write clean CSS? Is there any reason that you may prefer to use one over the another?
Kinta's user avatar
  • 57

1
2 3 4 5
9