An Introduction to BEM
What is BEM?
The Block, Element, and Modifier (BEM) methodology is a common naming convention for CSS ...
For further actions, you may consider blocking this person and/or reporting abuse
Any thoughts on the
:whereselector in relation to BEM Elements?It was always the rule to avoid nested selectors - so if you wanted to style (for example) an unordered list, you needed e.g. a
.listblock and a.list__itemelement, since a selector like.list > liwould create a specificity problem.With the introduction of
:where, it is possible to do e.g..list > :where(li)without creating a specificity problem, since:wherehas zero specificity.Not that this removes the need for BEM Elements - but in cases where semantic child elements can now be used, some components could be much less verbose and more intuitive to use, without creating problems.
I wonder if it's time for an update of the BEM conventions?
BEM is still very relevant. I really dislike when people say how it is old, without giving details on why one should not use it and what are alternatives in their opinion. Email as technology exist for decades and nobody states something like that!
Anyway, BEM is powerful mainly because of M. Modifiers are what makes the difference IMHO.
One thing I would strongly advise is not to nest Modifiers in SASS nor to nest anything else other than pseudo elements or :hover,:focus...
Nesting makes maintainability hard and if we really write CMP based apps, then not nesting will not cause bloated codebase.
Btw. you have one type on article: .block--modifier[] instead of .block--modifier {}
Will share your article on Twitter, really nice to see people love BEM :)
I've never been able to stand this convention. It surely seems cool but in my opinion it ruins readability.
To me this looks much fluent
.tabs
.tabs-header
.tabs-image.inverse
And then fact that Bootstrap even after completely rewriting v4 didn't adopt BEM makes me think I'm not the only one
BEM in itself is pretty powerful but as a writer there are 2 things you should talk about too when writing about BEM.
1- what class names the container will have, say we have to wrap our element inside a div and the only purpose of that div is to provide margins and paddings which are not really part of the component. What class name would you choose for that?
2- I would also go little into mixes as they are very powerful and if used properly in BEM it would make things a lot easier.
BEM is awesome from a few different angles in my opinion.
1) It's great for the development process, having the css structure in line with the code structure is huge.
2) It encourages modularity and organization, making these practices feel very natural. No more "spaghetti styles".
3) It's a well adopted pattern that just works when enforced. Making onboarding much simpler and efficient.
This is all opinion from my experience, but still, I dig it.
Shouldn't the img with tabs_image--inverse also have tabs_image since modifiers should only add or override styles from the non-modified version?
Same goes with tab_header in active state it should have 2 classes tabsheader & tabs_header--active