2 ms·

I still don't get the love affair with CSS in JS. It defeats much of the purpose of CSS. Also, my idea of a FE component is that of a class. A black box if you

I still don't get the love affair with CSS in JS. It defeats much of the purpose of CSS. Also, my idea of a FE component is that of a class. A black box if you will. It the markup structure with the details as properties. Reusable because all properties are set from outide. If you're hardcoding CSS within the "component" then it's not a component. And then having to effectively rebuild the entire app because a hardcoded bit of (Tailwind) CSS needed to he changed?? That's a step forward? From a professional / career stand point I'm interested in React. But its model of thinking feels like 1999 in some ways. I'm missing something? What am I missing?

solardev 4y ago
As a react dev, I don't like CSS in JS either. It brings back the old font tag approach of individually styling components. As an alternative, you can just assign class names to components and use global CSS like the old days, if you prefer. Sass is pretty great, basically CSS with better selectors and variables.
- chiefalchemist 4y ago
  Exactly. Something like Tailwind should be done in the Sass, not by assigning a gazillion helpers. Have a component-type class in the component then use Sass to configure that with helper properties (read: functions and mixins, etc.) But hardcoding? Inline? I did that in 1997. Keyword in. I know TW is done with Sass
darepublic 4y ago
The CSS in js components can be fully reusable between compatible frameworks, without any wiring of separate CSS files, and can also utilize theme configuration. Also just like how jsx is a form of html in js, having your style definitions in the same place makes it a lot easier to immediately grok what the component does and how it will look
- chiefalchemist 4y ago
  Not if that CSS is styling (unique to the project). Once it's "hardwired" you have to rewire it to use it again, or worse...if the styling changes you have to rebuild. In the context of CSS's intention, that's an anti-pattern. Yes, people do it. But that doesn't change the anti-ness. If you're editing the actual components then that's a step backwards in time. They should be like (OOP) classes. Completely agnostic. Completely "decoupled". They should be the structure (i.e. markup). But the styling should be abstracted out into "real" CSS, not inlined hardcoded CSS. Put another way, for all intents and purposes CSS in JS is like using important!. Nuff said.

solardev 4y ago

As a react dev, I don't like CSS in JS either. It brings back the old font tag approach of individually styling components. As an alternative, you can just assign class names to components and use global CSS like the old days, if you prefer. Sass is pretty great, basically CSS with better selectors and variables.

chiefalchemist 4y ago
Exactly. Something like Tailwind should be done in the Sass, not by assigning a gazillion helpers. Have a component-type class in the component then use Sass to configure that with helper properties (read: functions and mixins, etc.) But hardcoding? Inline? I did that in 1997. Keyword in. I know TW is done with Sass

darepublic 4y ago

The CSS in js components can be fully reusable between compatible frameworks, without any wiring of separate CSS files, and can also utilize theme configuration. Also just like how jsx is a form of html in js, having your style definitions in the same place makes it a lot easier to immediately grok what the component does and how it will look

chiefalchemist 4y ago
Not if that CSS is styling (unique to the project). Once it's "hardwired" you have to rewire it to use it again, or worse...if the styling changes you have to rebuild. In the context of CSS's intention, that's an anti-pattern. Yes, people do it. But that doesn't change the anti-ness. If you're editing the actual components then that's a step backwards in time. They should be like (OOP) classes. Completely agnostic. Completely "decoupled". They should be the structure (i.e. markup). But the styling should be abstracted out into "real" CSS, not inlined hardcoded CSS. Put another way, for all intents and purposes CSS in JS is like using important!. Nuff said.