bem Questions
3
Solved
I am using BEM, and have an element with multiple modifiers:
<div class="block__element block__element--m1 block__element--m2"></div>
I'm using SCSS and taking advantage of it to wri...
3
PostCSS BEM Linter plugin needs component definition for each block which is a time consuming thing to do in a legacy project.
Is there a way to use stylelint to check for the classes pattern and ...
6
Solved
In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier.
But why use block__element instead of ...
4
I'm looking at slowly refactoring a pretty big project that is built on Angular / Bootstrap that has just over 16,000 lines of CSS. Yay!
I've been looking more and more into BEM and believe it wou...
Fellner asked 28/3, 2018 at 0:19
4
Solved
Let's say I have a styled checkbox (think material design, where there is a bit going on to achieve the desired checkbox style). Which block is responsible for modifying a parent-dependent child bl...
3
Let's say I have a structure like this:
<article class="product">
<header class="product__header">
<h1 class="product__headline">Headline</h1>...
1
This question likely has no single direct answer, but hopefully will lead to some best practices or common patterns to use when adapting an existing styles framework to new web component developmen...
Couteau asked 20/4, 2020 at 16:39
1
Is it ok to add multiple modifiers to an element in BEM like this:
my-item__icon--open--not-red
As you can see I added --open and --not-red to my-item__icon.
Is this ok?
Is there a better way to...
1
Solved
Picture a more traditional web application that is slowly introducing a React component in one page that is complex enough to need it.
We're developing this new UI with Webpack, and we're using cs...
Bromoform asked 14/9, 2018 at 2:33
2
Solved
So i'm moving to writing my sass to the BEM convention. I've used the sass-lint configuration generator to create my config and only edited the class-name-format's - convention: to strictbem howeve...
1
I'm trying to express a simple CSS3 selector in BEM:
CSS
.block__elem {
/* ELEM RULES */
}
.block__subelem {
/* SUBELEM RULES */
}
.block__elem:not(:last-child) .block__subelem {
/* HOW CAN ...
4
Solved
Can I somehow refactor the following code snippet to get rid of double modifier declaration?
.block {
&__element {
rule: value;
}
&--modifier {
rule: value;
}
&--modifier & ...
2
Solved
I'm experimenting with BEM syntax on a project that uses SCSS. My editor is Sublime Text 3 and I'm using SCSS syntax highlighting.
The problem I'm experiencing is that when I nest using the & ...
Homosexual asked 15/9, 2014 at 0:28
4
Solved
For example I have a menu block with menu elements:
.menu
.menu__element
.menu__element--current
But lets say .menu block is contained inside another block, .header
How to deal with naming in t...
Strangeness asked 8/3, 2013 at 12:46
2
Solved
I recently heard about BEM methodology.
What exactly is the use of BEM methodology ?
In what way does BEM make our work easier ?
Is it a good practice to use BEM ?
Slogan asked 18/4, 2016 at 20:20
1
Solved
Using CSS BEM methodology...
Say I have some HTML, something like this (which is just example HTML made up for this question):
<section>
<div>
<p>Text.</p>
<p>Tex...
1
Solved
I'm not sure which is the official website, I've found getbem.com and en.bem.info.
One suggests using -- for the modifier (Naming):
CSS class is formed as block’s or element’s name plus two das...
1
Solved
I'm trying to wrap my head around BEM naming in CSS and am wondering if I'm understanding it correctly.
Per the official docs, an element is:
A part of a block that has no standalone meaning an...
3
Solved
Please is possible to set scss for element inside --rounded ? I do not wanna use .box__something, but I need to modify children that is depend on parent modifier
<div class="box">
<div c...
3
What's the proper way of declaring active/focus/hover states using BEM with SASS? For example, I have this structure:
<div class="card">
<img class="card__image" src="..." alt="">
&l...
1
Solved
Let's say I have the following CSS for a generic list component, using BEM and SCSS:
.list {
&__item {
&:not(:last-child) {
margin-right: .3em;
}
}
}
I want to add a modifier that c...
3
I'm having trouble understanding advantage of using BEM --modifier css naming convention. Can someone tell me why is this:
.my-element--checked {
color: green;
}
better than this?
.my-element....
1
Solved
It is easy to use BEM for fixed layouts. What is about css styles structure for adaptive web pages with media queries?
html sample:
<div class="t-news">
<div class="t-news__post b-post...
Castilian asked 22/6, 2016 at 13:6
2
Solved
Take the following structure:
<div class='article article--yellow'>
<div class='article__headline'>...</div>
</div>
<div class='article article--blue'>
<div cla...
2
Solved
I've started using BEM methodology to decouple my HTML and CSS ... and it works pretty well most of the time. Even if its only your personal opinion, i would still like to know how others deal with...
Eleven asked 6/11, 2013 at 23:57
1 Next >
© 2022 - 2025 — McMap. All rights reserved.