I've been leaning towards adopting ABEM for my CSS, a modified naming convention based off of the popular BEM and adapted for use with Atomic Design.
Question:
When using ABEM, the modifiers are combined with the base class and not used independently. For example to modify a card, you'd use 'card -blue' instead of 'card card-blue', defining the css combining the two classes like this: .card.-blue{} (Left off the prefixes for simplicity.)
I often need to scope modifiers for use in a specific page, for example a blue card in one page may be different in one page than another, giving css defined in the html like this:
class="card -blue -page1" and class="card -blue -page2" with page1 and page2 scoping modifications / overrides to just those pages.
My question: How can I clearly show if the ABEM modifiers such as '-blue' are found in the CSS file for the base class (card.css) or in the page override / namespace file (page1.css)?
There is potential the '-blue' class is a standard global modifier, applied in card.css like this:
.card.-blue{ style me } but the '-blue' modifier could also be getting applied potentially by the page specific override in page1.css like this: .page1.-blue { style me }. Or a standard modifier is applied in the base class like card -active getting applied in card.css, while at the same time a special layout such as -layoutGrid1 is getting applied by page1.css, and so the html shows 2 modifiers, but it isn't clear that -active is a standard from cards.css and -layoutGrid1 is from page1.css when reading this: card -active -layoutGrid1 -page1.css.
Is there some kind of modified ABEM syntax that would clearly show future readers of my CSS where to look if they needed to modify the modifiers, whether to look at the base / global css, or whether to look at the page specific override css? Maybe using double dashes on modifiers that are from the page level, and single dashes for a lower level or something?
Thank you. This was a difficult question to phrase.
2 ABEM resources: https://medium.com/@masacarvalho/atomic-design-system-with-abem-naming-convention-part-1-983d7d6ec3d7 https://css-tricks.com/abem-useful-adaptation-bem/
Atomic design resource: https://bradfrost.com/blog/post/atomic-web-design/
