search

csswizardry / ama

Ask me anything!
57 stars 4 forks source link

Question about BEM-style modifier syntax #49

Closed Josh68 closed 5 years ago

Josh68 commented 6 years ago

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

csswizardry commented 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.

Josh68 commented 5 years ago

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.