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;
  }
}