Css variables theming

[mimarz]

Test using pure css (css variables, with css tokens and css classes) for styling components in eds-core-react, instead of todays css in javascript with styled-components. Testing with Button component.

Approaches:
1 "Pure CSS"
2 "CSS in Javascript"
3 Hybrid

Verdict:

TDLR; It depends, both approaches has pros & cons. I don't feel one approach is a clear winner as both have limitation or weaknesses that you need workarounds.

Summary:

1. Pure CSS

PRO's:

• Its pure css
  • No additional styling library dependency for our users such as styled-components
• Somewhat simpler and cleaner implementation since its only using known native tooling
  • New users don't need to learn how we write and use component tokens , how to use Themeprovider and styled-components that needs to be learned.
• CSS variables are powerful
• Easier to start using web-components
• Less code
• CSS utility classes can be used by our users

Middle:

• Naming conventions for css variables and css classes 🤔
  • How we use css variables can become messy with different people
  • BEM-like convention worked
• Maybe easier for theming?
• Maybe easier for other web technologies to use styling?
  • CSS classes are still somewhat tailor towards how react components are put together.
• Design tokens conversion to css will need to be updated and improved
• CSS-modules?

CON's:

• No typesafety for tokens
  • This can be somewhat helped/mitigated with VsCode extensions such as; CSS Variable Autocomplete
• Combination of variants & colors can become fineky with having to use additional css classes or selectors.
  • One example is Button; "contained + secondary" vs. "outlined + secondary"
• IE11 does not support css-variables (even though we don't support it)
• Postprocessing & autoprefixing will need to be setup
• Styling can not be tested (vs. css in javascript)

2. CSS in javascript

PRO's:

• Typesafety for tokens
• Easier style based on properties
• styled-components does post-processing and autoprefixing for us
• Styling is "closer" to components instead of using classes
• Styling can be tested*

Middle:

• It works
• Some variants of components become bloated with CSS

CON's:

• Our users are forced to use styled-components
• Locked in to our react-components
• We have a token structure outside of components that needs to be learned
• Lots more javascript code is needed to achieve same effect as css variables

3. Hybrid (NOT TESTED)

Using todays token structure we could introduce a the component css-variables (as done in pure-css example) and just override their values the same way we do in pure-css but still using styled components and js tokens.

Notes:

• https://codepen.io/vnys/pen/vYNgGRX
• https://epicreact.dev/css-variables/

[mimarz]

We will continue this discussion when @mimarz is back from vacation on 30 august.

[mimarz]

Material-ui during their rebranding to Mui explained why they went from "css classes" to using emotion ( css in js). Might be worth checking out why. https://mui.com/blog/mui-core-v5/#improved-customizability