Naming conventions

[MoOx]

I want to write down our conventions base on suit ones https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md

Here is what I'm thinking about

• org-{mq}-{utility} (we have did that for (grid) utils)
• org-B (classic)
• org-B-e(-e) (classic)
• org-B--m (classic)
• org-B--{mq} ? (it's a modifier ? here is an important point I want to "solve")
• org-B.is-{state} (should we get this? it's sort of a modifier)

My concern is for mq for components. We are not likely to be able to use element queries soon, so we should mq has component modifier. eg:

.org-B--minS .org-B-e {
    display: inline;
}

.org-B--minL .org-B-e {
    display: block;
    font-size: 2rem;
}

What do you think about that @bloodyowl @magsout ?

[magsout]

-org-{mq}-{utility} (we have did that for (grid) utils)

Yes ok, even if org-{mq}doesn't exist

• org-B (classic)

Perfect

• org-B-e(-e) (classic)

Perfect

• org-B--m (classic)

Perfect

• org-B.is-{state} (should we get this? it's sort of a modifier)

I use this convention and I find it very useful. So yes for me.

• org-B--{mq} ? (it's a modifier ? here is an important point I want to "solve")

In fact this point of view is interesting. I'm not used to code like that. Since I added my media querie directly with the root class to change. But I find it rather good, and useful

[bloodyowl]

• org-{mq}-{utility}
• org-B (classic)
• org-B-e(-e) (classic) i'd say org-B-eE
• org-B--m (classic)
• org-B--{mq} ? (it's a modifier ? here is an important point I want to "solve")
• org-B.is-{state} (should we get this? it's sort of a modifier) hesitating on this one, quite tricky

[MoOx]

org-B.is-active allows generic state, even if most if the time you can do org-B--active.

Are you ok with .org-B--minL .org-B-e too ?

for org-B-e(-e) vs org-B-eE I've the feeling we loose a child relation cause I can have this

.org-B {}

  .org-B-menuLink {} /* hamburger */

  .org-B-menu {} /* list of links */

    .org-B-menu-link {} /* links in the menu*/

[MoOx]

Update

• .r-{mq}--{utility}
• .r-Component
• .r-Component-child
• .r-Component-child-childOfChild
• .r-Component--modifier (including mq like --maxL)
• .r-Component.is-{state} (very generic state/modifier that can be used accross component)