design by Anna Dadej TL;DR: No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). Thinking in components — Styled React Component Example You probably heard terms like , , , and you’re left there hanging I’m perfectly happy with ( ). CSS-in-JS Styled Components Radium Aphrodite “why is this a thing? — CSS-in-CSS in CSS .css ” I’m here to shine some light on why this is a thing and hopefully we will least understand the concept and understand why it’s a thing. With that said — please feel free to use CSS-in-CSS — on no terms are you obligated to use CSS-in-JS. Whatever works best for you and makes you happy is hands down the best solution, always-always! CSS-in-JS is a delicate and controversial topic — I’m advocating having an open mind and weighing if this makes sense to you — ask yourself “will it improve my workflow?” — in the end — that’s the only thing that matters — use tools that make you happier and more productive! I’ve always felt awkward having to maintain a huge folder of stylesheets. I would like to try different approaches. I’ve seen many people asking if there are new styling ideas. CSS-in-JS is so far the best concept. Let’s give CSS-in-JS a shot. Small-To-Medium size project CSS What is CSS-in-JS? over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic. It is about 6KB (minified and gzipped) and is extensible via API. — JSS is a more powerful abstraction high performance plugins source Keep in mind They’re different — Quick demonstration time! Inline styles and CSS-in-JS are not the same! How Inline Styles Works inline styles In the browser this will get attached to the DOM node like so: How CSS-in-JS works In the browser this will gets attached to the DOM like so: Difference See the slight difference? CSS-in-JS attached a tag on top of the DOM while inline styles just attached the properties to the DOM node. <style> Why does this matter? , many pseudo selectors (like , , ) aren’t possible, styling the and tags isn’t supported etc. Not all CSS features can be aliased with JavaScript event handlers :disabled :before :nth-child html body , you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like , ) even add support for neat, non-CSS-native features like nesting! With CSS-in-JS jss styled-components Brilliant article going in depth on how they’re different. “Just write the darn CSS in CSS and be done with it.” Yes — while that’s the case for how it’s been done for a long-long time — the challenge is modern web is written in components not pages. . CSS-in-JS solves exactly this problem. Shout-out to for solving this problem beautifully even tho Vues styles have no access to components state. CSS was never actually made for component based approaches Vue Here’s Bob Ross painting rocks to cool down the tension 😄 What are the benefits of using CSS-in-JS? No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). Thinking in components — CSS-in-JS to CSS. leverages the full power of the JavaScript ecosystem enhance “ ” — Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined. Thanks to plugin, JSS rules will not inherit properties. True rules isolation jss-isolate — CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications. Naming conventions like BEM might help within one project, but will not when integrating third-party code. JSS generates unique class names by default when it compiles JSON representation to CSS. Scoped selectors —The CSS rules are automatically vendor prefixed, so you don’t have to think about it. Vendor Prefixing — Easily share constants and functions between JS and CSS. Code sharing in use on your screen are also in the DOM ( ). Only the styles which are currently react-jss Dead code elimination for CSS! Unit tests What are the drawbacks of using CSS-in-JS? . Learning curve New dependencies. . People who are new to front-end have to learn “more” things. Harder for newer teammates to adapt to the code-base the status quo. (not necessarily a con) Challenging The pros out-weight the cons heavily — let’s give CSS-in-JS a shot! Nothing to lose! Most popular CSS-in-JS libaries Will provide a quick hello world example for all the popular CSS-in-JS libraries— help yourself to choose which one you like the most based on the syntax. NPM trends Styled Components JSS-React glamorous (caveat: uses inline styles) Radium Note: Radium uses ! decorators Aphrodite Stylotron These are really simple examples which demonstrate the core functionality. All of the libraries have much more functionality included — for example, , , and much more! theming dynamic props server side rendering going in depth about all of the features CSS-in-JS enables. Excellent post Here’s the full list — go and give all the libraries a quick try! Hate it or love it — CSS-in-JS deserves a chance! There’s another option — Convinced CSS-in-JS is not for me? CSS Modules Thanks for reading! _Buy Me A Coffee help creators receive support from their audience in a friendly manner. Quickly accept donations and…_www.buymeacoffee.com Buy Indrek Lasn a Coffee - BuyMeACoffee.com Hope you found this useful! Stay awesome. ❤ _It’s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in! Here are the best front-end…_medium.freecodecamp.org The best front-end hacking cheatsheets — all in one place. _What is a rich text editor anyway?_medium.com Let’s build a customizable rich text editor with Slate and React _You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…_medium.freecodecamp.org The secret to being a top developer is building things! Here’s a list of fun apps to build! _Javascript is cool. But do you know what’s even more cool?_medium.freecodecamp.org TypeScript — JavaScript with superpowers

BUNCH

Google

Mozilla

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

All You Need To Know About CSS-in-JS

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Indrek Lasn

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

All You Need To Know About CSS-in-JS

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Indrek Lasn

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES