DEV Community

Discussion on: CSS-in-JS: What happened to readability?

Collapse
stereobooster profile image
stereobooster • Edited on

Readability depends on the reader (what reader got used to, what knowledge they has). Some people may say that,

styled.button`
 background: ${props => props.primary ? "you" : "didn't"}
 color: ${props => props.primary ? "read" : "this"};
 font-size: 1em;
 margin: 1em;
`;
Enter fullscreen mode Exit fullscreen mode

is more readable than

css('button', { backgroundColor: 'blue' })
  .modifier('primary', { backgroundColor: 'var(--color-primary)' })
  .theme({ color: { primary: 'red' });
Enter fullscreen mode Exit fullscreen mode

as well other people may prefer something totally different, like tailwindcss 🤷‍♀️.

Is there a way to objectively check which of those more readable?