3 ms·

For me, CSS has been a Solved Problem™ for 5 years now. If a website is small then I write plain HTML/CSS/JS in the old school way and all of these abstraction

For me, CSS has been a Solved Problem™ for 5 years now. If a website is small then I write plain HTML/CSS/JS in the old school way and all of these abstractions/systems are YAGNI. If a website is large enough for these abstractions to matter then I'm using React with inline CSS. I get reusability and composition without a noticeable performance tradeoff. You can still build your components to decouple style from content where needed. Up to you. Years later, no issues.

XCSme 7y ago
How do you re-use this inline CSS?
- csande17 7y ago
  Not the parent, but the approach I've seen in React is to treat inline CSS as objects like "{ fontWeight: "bold", color: "#000" }". So to re-use it, you can either put it in a constant or make a component that applies the styles to an element (and maybe takes props to override them).
  - XCSme 7y ago
    I was asking because doing this just looks like normal CSS, where you define a class and use it in multiple places, only that it's in JS instead, so you still have all the "problems" mentioned in the article.
    - Izkata 7y ago
      The major downside of reused inline CSS is when you have to do minor tweaks (where active manipulation in the browser devtools is by far easier to find the right values) and those inline styles are on the page multiple times. Editing one class's rules is significantly easier than all the repeated inline styles.
      - 0xFACEFEED 7y ago
        With the inline CSS approach, components are your reusable entities not CSS classes.
    - koboll 7y ago
      >where you define a class and use it in multiple places If you're doing this in React, you should probably be reusing a component.
- 0xFACEFEED 7y ago
  Under the hood it’s still CSS classes. You just define your CSS classes as element properties and the library takes care of the rest.
pixelbash 7y ago
How do you handle responsive with inline in react? Case switching in js?
- 0xFACEFEED 7y ago
  Media queries as normal.

XCSme 7y ago

How do you re-use this inline CSS?

csande17 7y ago
Not the parent, but the approach I've seen in React is to treat inline CSS as objects like "{ fontWeight: "bold", color: "#000" }". So to re-use it, you can either put it in a constant or make a component that applies the styles to an element (and maybe takes props to override them).
- XCSme 7y ago
  I was asking because doing this just looks like normal CSS, where you define a class and use it in multiple places, only that it's in JS instead, so you still have all the "problems" mentioned in the article.
  - Izkata 7y ago
    The major downside of reused inline CSS is when you have to do minor tweaks (where active manipulation in the browser devtools is by far easier to find the right values) and those inline styles are on the page multiple times. Editing one class's rules is significantly easier than all the repeated inline styles.
    - 0xFACEFEED 7y ago
      With the inline CSS approach, components are your reusable entities not CSS classes.
  - koboll 7y ago
    >where you define a class and use it in multiple places If you're doing this in React, you should probably be reusing a component.
0xFACEFEED 7y ago
Under the hood it’s still CSS classes. You just define your CSS classes as element properties and the library takes care of the rest.

pixelbash 7y ago

How do you handle responsive with inline in react? Case switching in js?

0xFACEFEED 7y ago
Media queries as normal.