Correct way of using BEM methodology?
Hello front-end wizards!
I want to take a shot at using the BEM methodology, but I need some help with the following naming.
I made a hero component for my guestbook and I'm not sure how to use BEM here.
Which would be correct, maybe with some elaboration?
hero hero--corners
guestbook guestbook__hero--corners
Or something else?15 Replies
DesignCourse
YouTube
You Probably Need BEM CSS in Your Life (Tutorial)
Visit http://linode.com/designcourse for a $20 credit on your new linode account.
https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it's an approach to defining and structuring your CSS. When you're...
Yeah, watched it before I came here. And my question is not addressed in there however.
Because if his class card is part of a guestbook, how would you rename that with BEM?
Looks like you are evaluating whether guestbook is relevant?
yea, since hero class suppose could apply to other heroes on other pages
I don't usually use BEM because selectors can get very long
you can always have your hero style rules and then customise them for certain pages
ah, just make them scoped styled then, i guess
kind of like describing a general pizza to use on many pages and then having each individual page add its own toppings
if not BEM, what do you use instead?
common sense
XD
depends on how you are building out your site
if it's a large site I typically go for something that scopes it all for me
which most everything does
if it's small it's really no issue and I can style by type/single class usually
GitHub
minesweeper/style.css at main · zachjensz/minesweeper
Minesweeper game. Contribute to zachjensz/minesweeper development by creating an account on GitHub.
large projects in svelte it's great having component scoped styles
https://github.com/zachjensz/connectfour/blob/main/client/src/lib/Slot.svelte
GitHub
connectfour/client/src/lib/Slot.svelte at main · zachjensz/connectf...
connectfour. Contribute to zachjensz/connectfour development by creating an account on GitHub.
yea, i'm not writing BEM off, i see it's usefulness. In your case BEM would be overkill indeed.
i've settled in writing the block classes as
gb-hero
gb-hero--theme-green
gb-hero__listyea when I get to bigger projects I might try it out again
usually go with component styles thoguh