Comment by Marco Alka on "Why do we keep talking about CSS-in-JS?"

Thank you for your write-up. Just some questions:

Why the hate against a little verbose namespace? It helps understand the context of the rule. Do you have any killer-argument or is it your opinion?
How do you make sure you separate your concerns, which is the fundamental basic of decoupling and modularization, which is essential for a bit bigger code bases
How do you make your styles re-usable, especially in the case of jsxstyle?
How do you guarantee a consistent styling without manual intervention?
For what kind of project do you recommend which CSS-in-JS style?
What is CSS-in-JS's advantage over the following examples:

function LoginForm() {
  return (
    <form class="login">
      <button type="submit">Submit</button>
    </form>
  );
}

.login button[type="submit"] {
  background: blue;
}

function myButtonBar() {
  return (
    <div class="button-bar">
      <button type="button">Primary Action</button>
      <button type="button">Secondary Action</button>
      <button type="button">Tertiary Action</button>
    </div>
  );
}

.button-bar {
  button:first-child {
    background: blue;
  }

  button:nth-child(2) {
    background: white;
  }

  button:nth-child(3) {
    background: white;
    border: none;
  }
}

Why the hate against a little verbose namespace?

I didn't hate on verbose namespacing at all, I just prefer automated as compared to manual.

How do you make sure you separate your concerns?

The way I see it - when working with components, the concerns are split on blocks of interface, not technology/language.

Example: Separate Sidebar, Navigation, not .css,.js

How do you make your styles re-usable, especially in the case of jsxstyle?

This isn't for jsxstyle, but for all component based frameworks - you reuse (and extend) components, not just the styles of the component. A component becomes the smallest unit.

How do you guarantee a consistent styling without manual intervention?

Can you elaborate what you mean by consistent styling?

For what kind of project do you recommend which CSS-in-JS style

There might be some projects that are more suited and some that are less suited. I really think the decision should be made on the basis of "what will make our team more productive". If the philosophy shared in this post don't resonate with your team OR you don't have the problems that CSS-in-JS solves, then it's not the right choice for you :)

What is CSS-in-JS's advantage over the following examples...

Sorry, I didn't understand your question

Sid

I just prefer automated as compared to manual.

Then what's the difference between accessing a field on a variable (or adding an attribute to your element) and scoping a class name with SCSS? They are both automated...

the concerns are split on blocks of interface, not technology/language.

First of all, the separation between HTML, CSS and JS is not a separation of tech or language, but of concerns, meaning what they are actually used for. HTML is for layouting, CSS is for styling and JS is for animation, and that's how they are separated. What do you do when you want to have different styles for different components, or change the layout slightly to better fit the context? What about theming?

reuse (and extend) components

Sounds like you fork and edit the components, which I would not define as re-usable. CSS can import and overwrite styles, though, so that base styles do not have to be touched.

Can you elaborate what you mean by consistent styling?

Consistent means the whole site looks the same, you have the same basic coloring, the same gaps, the same typography, etc. If one component is the smallest unit and delivers its own style, and you'd like to re-use what you have, then I get the feeling that you'd have to edit every single component to fit the style of the app you do for a new customer, which sounds like a lot of overhead. Do you have any solution for that?

don't resonate with your team

Everyone hypes this tech, and I really want to know how to make use of it, but I just cannot see the benefits or the kind of situations which require it. That's why I want to take this chance to have a little chat to get to know the tech better by someone who obviously knows more than I and uses them regularly.

you don't have the problems

I do, but they all can be solved without CSS-in-JS, and sometimes even simpler imho.

I didn't understand your question

I made examples of situations which I have to deal with on a daily basis. They do not use CSS-in-JS, and I feel like they are simpler that way, yet you use these examples in order to demonstrate the power of CSS-in-JS. What kind of problem would CSS-in-JS solve there and how would it simplify the example?

Everyone hypes this tech, and I really want to know how to make use of it, but I just cannot see the benefits or the kind of situations which require it.

Sorry, this feels like a debate I don't want to continue.

Instead, I can send you the conference talks that convinced me there's something useful in the concept:

Sid

a debate I don't want to continue.

Well, I'm sorry, I don't want to pressure you, though I think it's sad that we have to stop.

Welp, thanks for the links anyway, they actually answered some of my questions and gave me information on other topics I think are important to me.

I find myself still doing simple inline styles in React often. I think I take a performance hit, but while I'm opinionated on practically everything else, I haven't been able to form strong opinions on this topic. Inline seems more readable for simple things that aren't handled by a Material Design library or equivalent alternative.

Matthew Ferrin While I certainly still have my opinion about CSS-in-JS, I really recommend not doing inline-styles. There is a reason why they were banned from the HTML5 spec entirely.

Also, there is Vanilla CSS, which means you do your styling without any library or framework at all. Whenever you need to do simple things, don't use a library and try to workaround it when it doesn't fit 😉

Marco Alka, Google search provides no evidence inline styles were removed from spec. I see no reason to do further digging on that vein.

Search Hashnode