3 ms·

> The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. And then they end up with dozens (and in big projec

> The people that know CSS don't want to learn new classnames when they can use CSS and that is a standard. And then they end up with dozens (and in big project hundreds) of bespoke CSS class names that no one can remember or keep track of, and just add new ones to the ever expanding file ;)

theturtletalks 4y ago
This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.
- dmitriid 4y ago
  That's why the wink ;) I used to sort of like CSS-in-JS, but on larger projects it also quickly devolves into "I know we have a design system, no idea what we have there, here are one-off CSS styles for this particular component" Everything is with its trade-offs alas sigh
- tevon 4y ago
  I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?
  - theturtletalks 4y ago
    I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read. Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all. [0] https://mantine.dev https://mantine.dev [1] https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/?itm_campaign=rightbar_v2&itm_source=infoq&itm_medium=news_link&itm_content=link_text https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...
    - satvikpendem 4y ago
      Vanilla-Extract is CSS-in-TS that compiles to raw CSS. https://vanilla-extract.style https://vanilla-extract.style
5e92cb50239222b 4y ago
Use CSS modules then. The largest CSS file in the largest application I'm working on is around 200 lines (I prefer splitting everything into small components — easier to test, easier to reuse).

theturtletalks 4y ago

This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.

dmitriid 4y ago
That's why the wink ;) I used to sort of like CSS-in-JS, but on larger projects it also quickly devolves into "I know we have a design system, no idea what we have there, here are one-off CSS styles for this particular component" Everything is with its trade-offs alas sigh
tevon 4y ago
I'm curious, if you're using CSS-in-JS already why not jump to tailwind? Its slightly more restrictive, but I've found the more opinionated style incredibly helpful. What are the benefits you're getting from CSS-in-JS?
- theturtletalks 4y ago
  I use Mantine[0] which uses Emotion[1] for styling. I like keeping the CSS properties in a neat JSON object instead of a long string like Tailwind does. With the object approach, conditional styling is easier too. With Tailwind, you have to use cx or another package to do this and it makes the code a little hard to read. Emotion isn't without it's flaws though. The company that created Emotion doesn't use it anymore because of runtime overhead[2] so Tailwind may be the future after all. [0] https://mantine.dev https://mantine.dev [1] https://emotion.sh/docs/introduction https://emotion.sh/docs/introduction [2] https://www.infoq.com/news/2022/10/prefer-build-time-css-js/?itm_campaign=rightbar_v2&itm_source=infoq&itm_medium=news_link&itm_content=link_text https://www.infoq.com/news/2022/10/prefer-build-time-css-js/...
  - satvikpendem 4y ago
    Vanilla-Extract is CSS-in-TS that compiles to raw CSS. https://vanilla-extract.style https://vanilla-extract.style

5e92cb50239222b 4y ago

Use CSS modules then. The largest CSS file in the largest application I'm working on is around 200 lines (I prefer splitting everything into small components — easier to test, easier to reuse).