Investigate (s)CSS refactor for flexible styling

[tobi-or-not-tobi]

We like to fully adapt CSS custom properties in order to:

• runtime configurability (no need to rebuild the system)
• easy customisation
• avoid strict view encapsulation for theming and customisation (shadow DOM, CSS vars peers through it)

We've experimented with this approach in https://github.com/tobi-or-not-tobi/lipstick-css and the recent decision to drop Internet Explorer 11 has strengthen our decision here (no need for fallbacks).

This is an important input in our rework on the UI framework, see #10.

[tobi-or-not-tobi]

UI frameworks of today haven't yet embraced CSS variables. I've started the conversation with bootstrap (see twbs/bootstrap#26596), but they will not do it, not even with a fallback. Other framework have similar hesitations.

[tobi-or-not-tobi]

We've done a number exercises to understand where we like to go with our css layer. So far we've seen the following issues with our (s)css:

1. SASS is not processed as we ship compiled components (our scss is compiled to and exposed as css in the libraries)
2. Selectors will never get the highest specificity, customisation cannot override components as we use (and will use) the emulated view encapsulation.
3. Spartacus styles will not get replaced in the compiled bundles (we'll end up with unused styles once we override the standard.
4. Mark-up is too opinionated and doesn’t provide enough flexibility (mainly due to nested structures, which are too tightly connected to the standard design)
5. DOM is polluted with unnecessary mark-up (we often have a BEM selector, component element, and inner style in the component style, all doing the same thing)
6. Selectors are over engineered (BEM is superfluous in a view encapsulated component world)
7. Some components are duplicated in the DOM (in order to render views for different screen size)

We've addressed all those issues:

• Use css variables (1, 2)
• Move sass to style library (1, 2, 3)
• Use sass placeholder selectors (3)
• Use sass feature toggles (3)
• Simplify DOM, avoid nesting (4, 5)
• Avoid BEM (5, 6)
• Stick to pure css for responsive layouts (7)

[tobi-or-not-tobi]

css-entensibility-v1.pdf