[v3] Replace the `--force` modifier

[titouanmathis]

Proposal

Replace all the --force modifiers with a ! to get smaller class names and, in my opinion, a more logical modifier.

- .bg-red--force {
+ .bg-red\! {
  background-color: red !important;
}

- <div class="space-p-2 bg-red--force">
+ <div class="space-p-2 bg-red!">
  ...
</div>

You can test it with this small demo on Codepen.

Pros

• Smaller class names
• More logical class names
• It's fun! 🎉

Cons

• The CSS might be less readable due to the back slash before the !: \!
• Does it work on all browsers?

Any thoughts @studiometa/studiometa-scss-toolkit ?

[perruche]

I find this is changing a convention that we have globally on the project, which is using bem -- for modifiers.

I think consistent naming conventions make things more readable by design.

---

If we want to make some classes shorter, we just like in your exemple write bg-red--force instead of the current background-red--force that we have in the toolkit

[titouanmathis]

I think consistent naming conventions make things more readable by design.

Damn, you are right... I was really enjoying this idea, but it might be counter-intuitive to add more specificity in the naming convention of the classes.

I'll open another issue to discuss the shortening of some of the classes and let this one for a little while in order to get everyone's feedback.