Thoughts about BEM naming?

I find it repetitive, pain, and hard to read

Drives me insane, Salesforce uses it for its css framework 😩

only applicable for very disciplined folks man.. Otherwise a complete shitstorm

hate it, too complicated syntax. i like the way bulma does it

I agree on the above. But I find it pretty useful I writing sass.

Never tried it, but my guess it is a system that tends to fall apart like a house of cards in a lot of projects.

I like Bulma style too. In my opinion BEM is overcomplicated and ugly (I hate underscores in CSS).

BEM is awesome if you do it right. Well it still sucks but it's by far the best solution for the non-hierarchical css class name namespace problem

@Wombat Right on

I love BEM, it makes wonders to projects with more complex designs. Super useful for keep your css modular and reusable, and once you are familiar, you'll notice you are coding faster and writing less css than any other technique.

@12bitfloat @nanl I found it cancerous and hard to read once it got more than 5 levels deep with scss/sass

At work we had issues coming up with a good system for our CSS classes. We're using Vue, and BEM both helped us ensuring that classes don't leak, as well as setting a rather strict standard. Kinda avoids bikeshedding. We've recently moved to CSS modules though, and suddenly BEM seems like utter shit. But as @Wombat said - BEM works rather well with SCSS/Sass.

@devTea Well proper BEM should only ever have two levels

@ScriptCoded Interesting, your project kinda reached the point where global CSS just ain't cutting it anymore, despite it being one of its key strengths. I stepped into a big project that doesn't have any strict naming and oh boy it shows when I need to change the "legacy parts" (the new stylesheets are all moduled)

@theuser Yeah I guess you could say. We actually never went fully for global CSS. Vue has this concept of scoped CSS, which will only be applied to the current component. However, It's a bit janky, and just having proper rules worked out a lot better for us. And as for legacy CSS, there always seems to be ID-selectors and !important scattered all over the place, and it makes everything a fucking hell of a pain.

Too complicated and requires you to spend your time on unimportant things like css selector conventions. I always use CSS modules of Styled components when in React as that's the easy way.

@ScriptCoded Word. It so happens I've come over an issue where h6's are given huge top and bottom margins with no obvious or semi-obvious culprits. Gonna have to get on it pretty soon I guess.

At first i hated to repeat me.
But now i use it to prevent that restructuring html crashes your entire css. And it feels a lot cleaner after some time of using it.

I also introduced that to my previous dev team and they still use it and still find it awesome.

Great idea at its time but you don’t need bem since there is css modules

@AleCx04 I'll take that as a compliment.

I love it. However, I only used on projects that I was working alone. I did quite a few projects using it though and it helped a lot.