SCSS Architecture: Choose a CSS naming convention to stick to

[superbiche]

This is part of the SCSS Architecture rewrite in #10881

What

The goal is to discuss available CSS naming conventions.

Why?

Because currently class names have no structure, aren't DRY, editing the CSS is painful with a bunch of side effects and we don't use the power of the C in CSS.

Expected outcomes

• Allow rewriting the styles in a modular way (Atomic Design-ish)
• Prevent side-effects when editing a given component
• Use semantic CSS naming to help new and existing contributors find their way easily in the code
• Globally make the code more maintainable

I'll add my candidates and my opinion on each of these, feel free to add some or join the conversation here.

Available options

• SMACSS
• BEM
• SuitCSS
• ?

To be totally honest I've been working a lot with BEM (as it's used in Drupal) but anytime I can I rewrite everything to SuitCSS:

• Less typing
• PascalCase demonstrate the fact we're styling a component, quite like UI components can be thought as Classes (and are Classes in major JS Frontend frameworks)
• The u- prefix for utilities makes it really easy to know whether it's a component class or a helper
• The alternance between PascalCase for the "root component", camelCase after the dash for the "component elements", and double dash for the modifier, make it even more clear and readable

That's just my honest opinion having spent a lot of time during the past 7 years doing CSS and always test&learning, I stick with SuitCSS naming convention.
And to be totally impartial, BEM is much more famous so maybe adoption would be easier (or less tough considering the mindset shift needed whatever convention is enforced).

Recommended reading material

• A good BEM explanation, and good point about the js- prefix
• Great general article about the benefits of OOCSS and its successors
• If you worry about such long classnames performance, read the part on Gzip

[schrej]

From what you've proposed I'd prefer SMACSS, as it's the most simple and straight-forward, and the stuff in the sass guide.
I probably won't have time to contribute, but that's just what I'd choose.

[superbiche]

@schrej you're right, it's the most straightforward thus great candidate for adoption.
I'd like us to keep the .u- utility class prefixing from SuitCSS as in my experience I've found it very useful to enhance readability in a medium-large-scale project

[zulipbot]

Hello @zulip/server-refactoring members, this issue was labeled with the "area: refactoring" label, so you may want to check it out!