Jss là gì

TL;DR:Thinking in components — No longer vị you have sầu to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS Model to lớn the component level, rather than the document level (modularity).

Bạn đang xem: Jss là gì

Styled React Component Example


You probably heard terms lượt thích CSS-in-JS, Styled Components, Radium, Aphrodite và you’re left there hanging “why is this a thing? — I’m perfectly happy with CSS-in-CSS (CSS in .css).

I’m here lớn shine some light on why this is a thing & hopefully we will least understand the concept and understvà why it’s a thing. With that said — please feel không lấy phí lớn use CSS-in-CSS — on no terms are you obligated lớn 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 & controversial topic — I’m advocating having an open mind & weighing if this makes sense khổng lồ you — ask yourself “will it improve my workflow?” —**in the end — that’s the only thing that matters — use tools that make you happier & more productive!**

I’ve always felt awkward having lớn maintain a huge thư mục of stylesheets. I would lượt thích to lớn try different approaches. I’ve sầu 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.


What is CSS-in-JS?

JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative sầu and maintainable way. It is a high performance JS to lớn CSS compiler which works at runtime & server-side. This core library is low level & framework agnostic. It is about 6KB (minified và gzipped) & is extensible via plugins API. — source

Keep in mind Inline styles & CSS-in-JS are not the same! They’re different — Quiông xã demonstration time!

How Inline Styles Works

In the browser this will get attached to lớn the DOM node lượt thích so:

How CSS-in-JS works

In the browser this will gets attached to the DOM lượt thích so:


See the slight difference? CSS-in-JS attached a tag on top of the DOM while inline styles just attached the properties khổng lồ the DOM node.

Why does this matter?

Not all CSS features can be aliased with JavaScript sự kiện handlers , many pseuvì selectors (lượt thích :disabled, :before, :nth-child) aren’t possible, styling the html và toàn thân tags isn’t supported etc.

With CSS-in-JS, you have sầu all the power of CSS at your fingertips. Since actual CSS is generated, you can use every truyền thông media query và pseubởi vì selector you can think of. Some libraries (like jss, styled-components) even add tư vấn for neat, non-CSS-native sầu features like nesting!

Brilliant article going in depth on how they’re different.

“Just write the darn CSS in CSS & 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 was never actually made for component based approaches. CSS-in-JS solves exactly this problem. Shout-out to Vue for solving this problem beautifully even tho Vues styles have no access to lớn components state.

Xem thêm:


What are the benefits of using CSS-in-JS?

Thinking in components — No longer bởi vì you have sầu lớn maintain bunch of style-sheets. CSS-in-JS abstracts the CSS Mã Sản Phẩm khổng lồ the component level, rather than the document cấp độ (modularity).CSS-in-JS leverages the full power of the JavaScript ecosystem lớn enhance CSS.Scoped selectors — CSS has just one global namespace. It is impossible lớn avoid selector collisions in non-trivial applications. Naming conventions like BEM might help within one project, but will not when integrating third-buổi tiệc ngọt code. JSS generates unique class names by mặc định when it compiles JSON representation to lớn CSS.Vendor Prefixing —The CSS rules are automatically vendor prefixed, so you don’t have to think about it.Code sharing — Easily giới thiệu constants và functions between JS và CSS.Unit tests for CSS!

What are the drawbacks of using CSS-in-JS?

Learning curve.New dependencies.Harder for newer teammates lớn adapt to the code-base. People who are new lớn front-over have to lớn learn “more” things.Challenging the status quo. (not necessarily a con)

The pros out-weight the cons heavily — let’s give CSS-in-JS a shot! Nothing khổng lồ lose!

Most popular CSS-in-JS libaries

Will provide a quichồng hello world example for all the popular CSS-in-JS libraries— help yourself to lớn choose which one you lượt thích the most based on the syntax.


Styled Components






Radium (caveat: uses inline styles)


Note: Radium uses decorators!



These are really simple examples which demonstrate the core functionality. All of the libraries have sầu much more functionality included — for example, theming, dynamic props, server side rendering và much more!

Excellent post going in depth about all of the features CSS-in-JS enables.

Here’s the full list — go and give sầu all the libraries a quiông xã try!

Hate it or love it — CSS-in-JS deserves a chance!

Convinced CSS-in-JS is not for me? There’s another option — CSS Modules!

Thanks for reading!

Source: https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc