refactor(@vtmn/css): Tailwind CSS classes should not be prefixed with vtmn-

[tkrotoff]

• CSS classes from Tailwind CSS should not be prefixed (the subject of this issue, case 1)
• Specific Vitamin CSS classes should be prefixed (not the subject of this issue, case 2) Edit: I believe now that even specific Vitamin CSS should not be prefixed, other CSS frameworks don't do that (only on specific cases)

Example: flex vs vtmn-flex

Rationals:

• Each time you read Tailwind doc, you have to keep in mind to add vtmn- => cognitive overhead
• Each time you copy paste a Tailwind code snippet you have to add vtmn- => cognitive overhead
• Your brain has 6 more characters to read before the actual important thing (flex vs vtmn-flex) => cognitive overhead
• Code is longer and more difficult to read with no added value: <div class="flex flex-row-reverse items-center hover:flex-row"> vs <div class="vtmn-flex vtmn-flex-row-reverse vtmn-items-center vtmn-hover:vtmn-flex-row">

(Btw when needed use a shorter prefix likevt- instead of vtmn-, for ex Bootstrap uses bs for data-* and CSS variables instead boot)

Source code where the prefix is added: https://github.com/Decathlon/vitamin-web/blob/a5505a9ff88b1310f5a18046d0d2e45c7c7d9363/packages/sources/css/presets/tailwind/index.js#L4

[lauthieb]

Hi @tkrotoff,

Thanks a lot for your proposal and I agree about cognitive overhead and the fact that some CSS classes are verbose...

Unfortunately for now it would be impossible for us to change this in this version of Vitamin because we cover 10,000-100,000 lines of code that would causes breaking changes and a lot of refactoring for consumers that uses this library since 2020.

That's why I tag you your issue "Next" in order to take in account your proposition for our next major release that we currently build.

Thank you very much.

[tkrotoff]

impossible for us to change this

• codemon
• also export without the prefix

=> smooth transition

Meantime is there a hack to avoid polluting my code with vtmn- all over the place?

[lauthieb]

Hi @tkrotoff, I'll answer you on Slack :)

[thibault-mahe]

Hi @tkrotoff, thanks for you suggestions here :) As we discussed, there will be some changes regarding Tailwind and the naming of css classes (we'll opt for the shorter vt- prefix) in the next version of Vitamin we are working on.

I'm closing this issue for now, thanks again!