Establish naming conventions

[craigcook]

We'll need to give individual components useful and meaningful names as we define them, but we also need to settle on a naming convention for classes and IDs in CSS.

• BEM is popular but ugly (I really hate the double hyphens and double underscores, and hate the mixing of hyphens and underscores together even more).
• SMACSS is somewhat lacking in human readability.
• ITCSS is intriguing but poorly documented, warrants further study.
• OOCSS is the original but maybe others have improved on its syntax since.

And maybe we come up with something of our own scheme. Perhaps based on a combination of what we like from the above, or a modification of a syntax we mostly like just without the things we don't.

[stephaniehobson]

Also for consideration:

CSM (Components, Sub-components, Modifiers), which is the system Mobify uses. They use prefixes as well. I know they're not human readable but they are very useful for rules and organizing.

[stephaniehobson]

An argument for prefixes/namespacing: https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

[stephaniehobson]

Sounds like we can combine the "inverted triangle" organization of ITCSS with any of the other systems as we wish. Beyond that it's "partially proprietary" which IMHO makes it easy to rule out.

[craigcook]

Sounds like we can combine the "inverted triangle" organization of ITCSS with any of the other systems as we wish. Beyond that it's "partially proprietary" which IMHO makes it easy to rule out.

Yup. From what very little I've been able to read about ITCSS it seems more like a methodology than an actual syntax. So we may end up being inspired by portions of it but it's not something we would adopt wholesale.

[stephaniehobson]

is- (for state) has- (for children) js- (for only JS purposes) (NO STYLING)

l- (layout) t- (theme) c- (component) u- (utility, global useage, many consequences)

qa- (for testing purposes) (NO STYLING)

[stephaniehobson]

We seem to have independently arrived at Brad Frost's prefix system: http://bradfrost.com/blog/post/css-architecture-for-design-systems/

[craigcook]

Documenting decisions...

• We all agreed that BEM is just too ugly and lacking in grace, no matter how useful or popular it may be. It's like a pair of Crocs: practical, but tacky.
• We've been naturally gravitating toward more SMACSSy naming already so we've decided to make it official. We're a SMACSS shop.
• That said, we're going to use our own set of prefixes instead of those proscribed in original SMACSS.
• We're going to name-space the design system with an mzp- prefix to avoid potential collisions with other systems or naming conventions.

I'll write this up more formally and document it in the system with some examples.