Closed Josh68 closed 5 years ago
By chainable-modifier do you mean things like this?
<div class="hero carousel --large">
If so, I would recommend avoiding such syntax. Does --large
belong to hero
or carousel
? Nobody knows.
Regarding collisions with custom properties, I can’t foresee an issue. Your classes live outside of the curly braces but custom properties may only exist within.
Thanks for your reply, Harry
Example of the chainable modifiers (BEVM) approach I believe I had looked at when I wrote this. And here was another response I got to a similar question, and the relevant page from (one of the) BEM docs. Pretty much the same point you're making here.
I think I also hadn't really worked with custom properties when I wrote this, so now that seems like a dumb question (but hey, I learn by asking dumb questions).
Finally, I now work with a team that has very opinionated rules for CSS and develops pattern libraries for all clients, so I've gotten more schooling.
Hello, Harry, and thanks for taking questions here.
I'm trying to make decisions about naming conventions for a design system, and am at least loosely adopting BEM. I've read many posts about variations on the paradigm, including the use of "chainable" modifiers.
One thing that came up in some of those discussions was the possible collision of using double dashes for modifiers (or "variations," depending on whose paradigm you're looking at) with the new spec for CSS custom properties (aka, variables).
Then I noticed that en.bem.info, the "definitive" guide, uses a single underscore, while getbem.com (I guess not definitive anymore) uses double-dashes. Finally I found your cssguidelines in which you seem to be against the use of single underscores in classnames, in general.
Can you expound on what you've said here and your interpretation of which BEM style makes more sense? In my estimation, a single underscore may be less distinguishable from a double-dash (particularly in relation to the double-underscore for elements), but the double-dash might be an issue if used as a chainable modifier (standalone classname).
Any thoughts are much appreciated.
Cheers,
Josh