We all follow naming conventions in programming languages, don't we? Now, what about CSS? Is there any need of naming convention in that? Of course...
For further actions, you may consider blocking this person and/or reporting abuse
Agree. This methodology becomes more interesting and simple when using SCSS tho.
Agree!
Is an incredible SCSS superpower.
BEM is the worst of all.
No Offence Victor, But can you explain why?
BEM claims to fix a lot of organisational problems of CSS codebases, which is true, but it also creates tons of new problems which at the end are for the worse. I would be able to go deeper in this topic, but let me just highlight a few points.
BEM has a lot of rules which are not trivial to understand correctly at first sight. It's definitions of blocks/elements are debatable, and that's the reason every person understands BEMs rules a little differently, using it in their own flavor. This creates problems in teams, especially on a bigger scale. I've participated in and seen a lot of reviews the past decade on codebases using BEM arguing about the correct naming, structure, and selectors.
BEM requires deep knowledge of the codebase, otherwise people start reinventing already existing parts. This is true in general to well agrd code, but in BEM's rule-system individual pieces can hide well let's say. I don't know how to express this more clearly :)
BEM needs extra brainload which makes the process of site-building inefficient. It simply blocks the flow.
BEM is kinda immutable. By that I mean that it's hard to refactor. The structure and rules force a "non-flexible frame" around your codebase.
The mess and unreadability of the classes, and the 32 character long selectors at the end it's just the tip of this iceberg.
BEM simply has significant negative impact on productivity, and at the end it's not as maintainable as it claims to be.
Most people usually like the Modifier part of BEM, but that's not new or unique to BEM, only the double dash maybe...
To add something constructive to the table. I believe in those modern CSS-in-JS solutions that completely remove the overload caused by naming selectors, can do static-extraction for critical CSS, and uses a utility-class (1 rule per class) based approach to enable significant size savings on large codebases.
Hey, thanks for the reply..
I have worked in multiple enterprise level projects and My colleagues and I never faced any such issues..
But yeah! Thanks for sharing your insights :)
I prefer BEM a thousand times over CSS-in-JS, it's like going back to the past, messing up all the code. Each one in its place.
Besides, you have to use some methodology, either you create it yourself or use a ready-made one, such as BEM, going crazy is not good, not to mention diving into the past with CSS-in-JS. Anything *-in-JS is no good, so you can use the same CSS in any other non-React application.
I don't like methodology that much. The worst part of methodology is it counts on the reliability of human. And i believe that human will make mistakes. I mean we are good at creativity, not following conventions.
Just let machine take care of that boring part.
BEM is understandable but sometimes names of css classes become too long. Imagine naming an element which is 5 levels deep in your markup and even worse, having modifiers. How will you name a class for that element?
You only need BEM if you don’t understand CSS specificity. If you namespace your components correctly you don’t need that convoluted naming, especially when using SCSS as it will write the long selectors for you. There was an argument at some point saying single classes were faster to read and render but right to left CSS selector optimisation is pointless with modern browsers.
would definitely try this , though it looks to add more complexity to an already complex css
I've tried BEM and I must say I prefer something like CSS/SCSS modules.
The scoping is built-in at a component level and the classes are much more readable.
BEM fixes some problems but it is really tedious to write, that's why I try to avoid it if I can, CSS modules/styled-components are much easier to work with.
nice cover photo btw
BEM is bad, it doesn't fix any problems, but at the end, the class names of the element are longer that the content inside it. You didn't say what are the advantages of using it.