4 ms·

Paradigms that CSS-in-JS introduces can be intimidating. Especially from a taditional perspective of the way we look at HTML, CSS and JavaScript. Before, we us

Paradigms that CSS-in-JS introduces can be intimidating. Especially from a taditional perspective of the way we look at HTML, CSS and JavaScript. Before, we used HTML, CSS, JavaScript as both input and output. We built layers of abstraction such as Sass for CSS. We generated HTML using backends in various flavours (PHP, Ruby, Python). Ideas like BEM, OOCSS, SMACSS and Atomic CSS was crucial for driving the movement towards reusability. CSS architecture was treaded by the community as a serious consideration. It helped front-end teams scale in a way that's safe, easy to extend, easy to conceptualise. Building scalable web applications, thinking in components can be a fantastic thing for web teams. Having styles coupled to components, as opposed to having them cascade down based on classes, IDs and element type does break a lot of the ways we've been writing CSS over the last ~5+ years. The question is, how do we install systematic design principles without the structure we've been using to write our scalable CSS? Stuff like variables, mixins and reusable visual style rules are all achievable with CSS-in-JS. The big paradigm shift that's needed to grok the concept, is to understand that by having the input of HTML, JS, CSS written in a single language/place, we can be more deliberate how we express the relationship between styling, markup and logic. We are starting to see people build projects to attempt to add some structure to how we do CSS in the new world of front-end, and Brad has a lot to add to this discussion given his incredible contributions to CSS over the years. Given how expressive CSS-in-JS has made me able to express the relationship between styles, I'm not sure I'd want to go back to a world where the considerations are separated. JavaScript as a layer of abstraction can do more good than harm. TL;DR Layers of abstraction (i.e. Sass and now CSS-in-JS) increase ability to express front-end/design architecture. Separation of concerns by intention rather than language.

skrebbel 8y ago
You did not address the author's point, however - that to do CSS, you now also need to know JS. That's a significant learning curve for people whose specialism is design, not coding. I noticed this myself when we adopted React and I told my cofounder (a designer by education) that he could "just tweak the embedded HTML in there as he saw fit" (i.e. the JSX). I think I said something like "just scroll past all the code you don't understand until you reach something that looks like HTML". In practice I don't think he ever touched it - not because he's an idiot or easily intimidated, but simply because editing the HTML wasn't the most productive way forward for him anymore. Instead, he'd edit it live in devtools, make a screenshot and copy out the edited HTML+CSS sources and tossed it over to me. I don't think he was wrong about doing it that way. I don't think you're wrong either, by the way - I don't think we made the wrong decision when we started writing our HTML (and later, also, our CSS) in JS. But, depending on your team composition, there's real world consequences to doing so that you're going to want to take into account.
- lewisflude 8y ago
  That's a good point. Developer/designer productivity being lost in favour of some other wins isn't always the best tradeoff for every team, and the fact that it's becoming normalised does put some developers/designers in an awkward position. It is a good point, and it's something I think I'm going to have a think about. I think it's really important that designers aren't put off building front-ends because it's just gotten too complex.
- trh88 8y ago
  > to do CSS, you now also need to know JS Since when? You don't need to know JS to write CSS. You just don't. You make an architectural decision, based on what you want to create, to use css-in-js. But that's a decision that you make. You can 'do' CSS without anything but... CSS!
  - icebraining 8y ago
    Yes, working on a personal project, I can make those decisions. In a team, I often can't; I have to work on convincing others. Posts like these are part of that process.
  - skrebbel 8y ago
    That's exactly what I wrote, right?
- beefalo 8y ago
  How common is it to have designers that are actually writing css and html? Of the dozen designers I have worked with, every one of them was using a tool like Invision or Sketch and as far as I know, have no html/css knowledge.

skrebbel 8y ago

You did not address the author's point, however - that to do CSS, you now also need to know JS. That's a significant learning curve for people whose specialism is design, not coding. I noticed this myself when we adopted React and I told my cofounder (a designer by education) that he could "just tweak the embedded HTML in there as he saw fit" (i.e. the JSX). I think I said something like "just scroll past all the code you don't understand until you reach something that looks like HTML". In practice I don't think he ever touched it - not because he's an idiot or easily intimidated, but simply because editing the HTML wasn't the most productive way forward for him anymore. Instead, he'd edit it live in devtools, make a screenshot and copy out the edited HTML+CSS sources and tossed it over to me. I don't think he was wrong about doing it that way. I don't think you're wrong either, by the way - I don't think we made the wrong decision when we started writing our HTML (and later, also, our CSS) in JS. But, depending on your team composition, there's real world consequences to doing so that you're going to want to take into account.

lewisflude 8y ago
That's a good point. Developer/designer productivity being lost in favour of some other wins isn't always the best tradeoff for every team, and the fact that it's becoming normalised does put some developers/designers in an awkward position. It is a good point, and it's something I think I'm going to have a think about. I think it's really important that designers aren't put off building front-ends because it's just gotten too complex.
trh88 8y ago
> to do CSS, you now also need to know JS Since when? You don't need to know JS to write CSS. You just don't. You make an architectural decision, based on what you want to create, to use css-in-js. But that's a decision that you make. You can 'do' CSS without anything but... CSS!
- icebraining 8y ago
  Yes, working on a personal project, I can make those decisions. In a team, I often can't; I have to work on convincing others. Posts like these are part of that process.
- skrebbel 8y ago
  That's exactly what I wrote, right?
beefalo 8y ago
How common is it to have designers that are actually writing css and html? Of the dozen designers I have worked with, every one of them was using a tool like Invision or Sketch and as far as I know, have no html/css knowledge.