Hướng dẫn css-in-js 2022

Thinking in components — Bạn sẽ không còn phải maintain 1 đống style-sheets nữa. CSS-in-JS sẽ trích xuất model CSS theo level component, thay vì theo level document (modularity).

Ví dụ về Styled React Component

Nhiều khả năng là bạn đã nghe đến những thuật ngữ như CSS-in-JS, Styled Components, Radium, Aphrodite & tự hỏi “tại sao lại có thứ này nữa?—Tôi đã & đang rất hài lòng với CSS-in-CSS (CSS trong .css)”

CSS-in-JS là 1 topic nhạy cảm, gây nhiều tranh cãi, được xem là concept tốt nhất giúp bạn không cần phải maintain folder chứa đầy các stylesheet.

Xem qua CSS-in-JS.

CSS-in-JS là gì?

JSS là abstraction mạnh mẽ hơn CSS. JSS sử dụng JavaScript như 1 ngôn ngữ để mô tả các styles theo cách declarative & maintainable. JSS là JS high performance đến CSS compiler hoạt động ở runtime & server-side. CORE LIBRARY THUỘC LEVEL THẤP & framework agnostic, NẶNG khoảng 6KB (ĐÃ minified & gzipped) Có thể extensible bằng plugins API. — nguồn

Nhớ rằng Inline styles & CSS-in-JS không giống nhau! Chúng hoàn toàn khác nhau !

Cách thức hoạt động của Inline Styles

const textStyles = {
  color: white,
  backgroundColor: black
}

inline style!

Trong hệ điều hành, việc này sẽ dính vào DOM node như thế này:

inline style!

Cách thức hoạt động của CSS-in-JS

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

Hello CSS-in-JS

Trong browser, đoạn code này sẽ attach với DOM như thế này:

Hello CSS-in-JS

Sự khác biệt

Bạn có nhận ra sự khác biệt nào không? CSS-in-JS gắn tag