CSS-in-JS Roundup: Tạo kiểu cho các thành phần React

Cùng nhau, ta sẽ xem xét 15 thư viện CSS-in-JS hàng đầu được đánh giá bởi tổng số sao GitHub tích lũy được. Ta sẽ so sánh các tính năng, điểm mạnh và điểm yếu của chúng. Bao gồm một số thư viện thực sự mới như emotion , cũng như một số bản root , chẳng hạn như aphrodite .

Nếu bạn giống tôi, bạn phải mất một lúc để lên chuyến tàu CSS-in-JS. Nếu bạn không chắc đó là gì, thì bạn nên xem các trang trình bày “React: CSS in JS” ban đầu của @ vjeux . Gần ba năm trôi qua, và ngày nay không thiếu các thư viện CSS-in-JS để giúp ta tạo kiểu cho các Thành phần React bằng JavaScript. Trên thực tế, tại thời điểm viết bài, có 55 thư viện như vậy được liệt kê trên repo css-in-js của @ MicheleBertoli , một danh sách thư viện khổng lồ tập trung với các ví dụ riêng lẻ về cách tạo kiểu cho một nút cơ bản trong mỗi thư viện. Siêu hữu ích!

Khoảng sáu tháng một lần, một thư viện mới xuất hiện. Khác xa với sự mệt mỏi của JavaScript, tỷ lệ thay đổi này rất đáng khích lệ! Mỗi cách tiếp cận mới đều dựa trên những điểm mạnh của các thư viện trước đó và đổi mới trên một số thiếu sót của các thư viện trước đó. Trong khi một số thư viện mới hơn cung cấp nhiều tính năng và hiệu suất hơn, vẫn còn điều gì đó cần nói về tuổi thọ của một số thư viện cũ, đó là lý do tại sao chúng cũng được đưa vào. Hãy ghi nhớ điều đó khi quyết định sử dụng cái nào cho dự án tiếp theo của bạn.

Để ngắn gọn, ta sẽ giữ nó ngắn gọn ở đây và không bao gồm bất kỳ mẫu mã nào. Nếu bạn muốn xem từng thư viện được sử dụng như thế nào, hãy xem các liên kết GitHub của từng dự án để đọc mô tả đầy đủ về nó.

cảm xúc

emotion là đứa trẻ mới trong khối. Nhưng đối với độ tuổi của nó, nó không chỉ cung cấp một loạt các tính năng ấn tượng mà còn có vẻ như đang đạt được sức hút cực kỳ nhanh chóng. Nó sẽ là điểm tuyệt vời của trải nghiệm tuyệt vời dành cho nhà phát triển VÀ nỗi ám ảnh về hiệu suất. Tính năng hấp dẫn ở đây là sự kết hợp của cả hai thành phần được tạo kiểu, cũng như khả năng cung cấp bộ chọn truyền thống cho các thành phần lồng nhau. emotion chắc chắn đáng để mắt đến.

Tuổi: 3 tháng
Sao: 1,5k ⭐
Github: https://github.com/tkh44/emotion
Dòng giới thiệu: “Thế hệ tiếp theo của CSS-in-JS”. Emotion là một thư viện CSS-in-JS hiệu suất cao, nhẹ. Emotion giảm thiểu đáng kể chi phí thời gian chạy của css-in-js bằng cách phân tích cú pháp các kiểu của bạn với PostCSS trong quá trình biên dịch thay vì trong thời gian chạy.
Các tính năng: Hoạt ảnh, Đạo cụ động, Media query , Bộ chọn lồng nhau, Bộ chọn giả, Kết xuất phía server , Tạo kiểu bất kỳ thành phần nào, Chủ đề

hào nhoáng

glamorous bao bọc thư viện glamor phổ biến và cung cấp trải nghiệm giống như styled-component nhưng sử dụng cú pháp JavaScript chứ không phải chuỗi nội suy. Các đạo cụ động là một chiến thắng lớn cho thư viện này so với các thư viện khác, cũng như làm chủ đề. Nếu bạn muốn thử nghiệm với việc tạo các thành phần React theo kiểu bằng cách sử dụng cú pháp JavaScript, glamorous có thể phù hợp với bạn.

Tuổi: 6 tháng
Sao: 2k ⭐⭐
Github: https://github.com/paypal/glamourous
Dòng giới thiệu: CSS có thể bảo trì với React
Các tính năng: Đạo cụ động, Media query , React Native, Kết xuất phía server , Tạo kiểu cho bất kỳ thành phần nào, Chủ đề

theo kiểu jsx

styled-jsx cho phép bạn thêm các <style jsx /> vào bên trong các chức năng kết xuất của Thành phần của bạn.Điều này cho phép bạn viết các kiểu bằng CSS thuần túy với lợi ích bổ sung là CSS bên trong chúng chỉ được áp dụng cho phạm vi hiện tại của DOM đang được hiển thị ở cấp đó. Nếu bạn muốn đưa CSS của bạn vào bên trong chức năng render , thì styled-jsx có tên của bạn trên đó.

Tuổi: 9 tháng
Sao: 2k ⭐⭐
Github: https://github.com/zeit/styled-jsx
Dòng giới thiệu: Hỗ trợ CSS đầy đủ, có phạm vi và thân thiện với thành phần cho JSX (được hiển thị trên server hoặc client ).
Các tính năng: Hoạt ảnh, Đạo cụ động, Kết xuất phía server , Chủ đề

jsxstyle

jsxstyle cho phép bạn quên suy nghĩ về các phần tử HTML mà bạn sử dụng đơn giản cho mục đích tạo kiểu (ví dụ: <div /> , <span /> , <table /> , v.v.) và thay vào đó sử dụng các thành phần được tạo kiểu này ( <Block /> , <Flex /> , <Inline /> , <Table /> , v.v.). Nó cũng bỏ qua nhiều tiêu chuẩn của CSS và thay vào đó cung cấp trải nghiệm thú vị cho nhà phát triển khi có thể chỉ định bộ chọn psuedo làm đạo cụ (ví dụ: hoverColor ). Nếu bạn đang tìm cách loại bỏ sự tẻ nhạt khi viết <div className={styles.container} /> lần thứ 100, bạn nên xem jsxstyle .

Tuổi: 9 tháng
Sao: 1,5k ⭐
Github: https://github.com/smyte/jsxstyle
Tagline: jsxstyle nhằm mục đích là cách tốt nhất để tạo kiểu cho các thành phần React. Nó có mục tiêu là có trải nghiệm nhà phát triển tốt nhất trong lớp mà không phải hy sinh hiệu suất và ít quan tâm đến tính chính thống CSS hiện có
Các tính năng: Bộ chọn giả

Loại

TypeStyle là TypeStyle của CSS - do đó có tên. Trọng tâm là thời gian biên dịch linting, tự động hoàn thành, v.v. đảm bảo trải nghiệm tốt cho nhà phát triển và bảo vệ khỏi các vấn đề thời gian chạy. Hơn hết, đó là framework bất khả tri, vì vậy bạn có thể học nó một lần và sử dụng nó ở bất cứ đâu. Nếu bạn đã là một người hâm mộ TypeStyle , thì TypeStyle rất đáng xem.

Tuổi: 9 tháng
Sao: 1,5k ⭐
Github: https://github.com/typestyle/typestyle
Dòng giới thiệu: Viết CSS với TypeStyle sẽ trôi chảy như viết JavaScript với TypeScript.
Các tính năng: Hoạt ảnh, Media query , Lớp giả, Kết xuất phía server

thành phần theo kiểu

Xa và xa là thư viện CSS-in-JS phổ biến nhất, styled-components lật tẩy vấn đề trên đầu nó. Thay vì thêm kiểu vào các thành phần hiện có, thay vào đó bạn tạo các thành phần thể hiện các kiểu. Điều này cho phép các thành phần khai báo và có thể sử dụng lại nằm giữa một phần tử HTML thông thường và một Thành phần React chính thức. Triết lý này, cũng như phép nội suy chuỗi GraphQL-esque, cần làm quen một chút, nhưng vì nó phổ biến gần gấp đôi so với thư viện CSS-in-JS đứng thứ hai, nên có thể nói rằng có một số thứ đáng xem ở đây tại.

Tuổi: 1 năm
Sao: 9.5k ⭐⭐⭐⭐⭐⭐⭐⭐⭐
Github: https://github.com/styled-components/styled-components
Dòng giới thiệu: Cơ sở trực quan cho độ tuổi thành phần. Sử dụng các bit tốt nhất của ES6 và CSS để tạo kiểu ứng dụng của bạn mà không cần căng thẳng
Các tính năng: Hoạt ảnh, Đạo cụ động, Media query , Bộ chọn lồng nhau, Kết xuất phía server , React Native, Tạo kiểu bất kỳ thành phần nào, Chủ đề

sự hào nhoáng

Sức mạnh thực sự của sự glamor nằm ở khả năng cho phép bạn viết và kết hợp các luật CSS.Thông thường, việc mở rộng / overrides các luật CSS-in-JS có thể là một rắc rối; tuy nhiên, glamor cho phép bạn phân tách chúng tuần tự bên trong các đạo cụ của Component hoặc liệt kê chúng bên trong className của nó. Nếu bạn đang tìm kiếm một thư viện tin cậy "những gì bạn mong đợi", thì không cần tìm đâu xa hơn sự glamor .

Tuổi: 1 năm
Sao: 2,5k ⭐⭐
Github: https://github.com/threepointone/glamor
Dòng giới thiệu: Nội tuyến css cho react et al
Các tính năng: Media query , Bộ chọn lồng nhau, Bộ chọn giả, Kết xuất phía server , React Native, Tạo kiểu bất kỳ thành phần nào, Chủ đề

styletron

styletron nổi tiếng của styletron là tốc độ của nó, bắt nguồn từ việc sử dụng "Virtual CSS" (như "Virtual DOM"), loại bỏ việc chuyển đổi JS-thành CSS để cung cấp tối ưu hóa, tăng tốc độ, cắt bớt CSS chết, v.v ... Đặc biệt, trọng tâm là giảm thiểu CSS được đưa vào khi kết xuất phía server để có thời gian tải trang nhanh. Nếu bạn đang tìm kiếm trải nghiệm tốt dành cho nhà phát triển giúp tăng tốc độ đáng kể, hãy bắt đầu bằng cách xem xét styletron .

Tuổi: 1 năm
Sao: 2k ⭐⭐
Github: https://github.com/rtsao/styletron
Dòng giới thiệu: Kiểu JavaScript phổ biến, hiệu suất cao.
Các tính năng: Hoạt ảnh, Đạo cụ động, Media query , Kết xuất phía server , Tạo kiểu cho bất kỳ thành phần nào

Ngu Google dịch dở

radium là một trong những thư viện CSS-in-JS ban đầu tìm cách giải quyết vấn đề xử lý các media query , bộ chọn giả và công cụ sửa đổi. Nó vẫn là một trong những thư viện nổi tiếng nhất hiện có, điều này nói lên tính thiết thực và tuổi thọ của nó.

Tuổi: 2 năm
Sao: 5.5k ⭐⭐⭐⭐⭐
Github: https://github.com/FormworthyLabs/radium
Tagline: Radium là một bộ công cụ để quản lý các kiểu nội tuyến trên các phần tử React. Nó cung cấp cho bạn khả năng tạo kiểu mạnh mẽ mà không cần CSS.
Các tính năng: Hoạt ảnh, Media query , Bộ chọn giả, Kết xuất phía server , Tạo kiểu cho bất kỳ thành phần nào, Chủ đề

Mô-đun CSS React

react-css-modules gần như có thể viết CSS thuần túy trong React Components của bạn. Theo nghĩa đen, bạn nhập các file .css và sử dụng các khóa của chúng trong phần hỗ trợ className . Là một trong những thư viện CSS-in-JS đầu tiên, vấn đề chính mà nó đang cố gắng giải quyết là xác định phạm vi các bộ chọn CSS. Điều đáng xem là liệu babel-plugin-react-css-modules có đáp ứng được nhu cầu của bạn hay không. Mặc dù nó có ít tính năng hơn, nhưng nó là một gói nhỏ hơn nhiều và hiệu suất cao hơn nhiều.

Tuổi: 2 năm
Sao: 4k ⭐⭐⭐⭐
Github: https://github.com/gajus/react-css-modules
Dòng giới thiệu: Mô-đun CSS React thực hiện ánh xạ tự động các module CSS. Mỗi lớp CSS được gán một mã định danh phạm vi local với một tên duy nhất chung. Mô-đun CSS cho phép CSS module và có thể tái sử dụng!
Các tính năng: Bộ chọn lồng nhau, Bộ chọn giả

Aphrodite

aphrodite được viết và duy trì bởi những người giỏi ở Học viện Khan. Là một trong những thư viện CSS-in-JS ban đầu, vấn đề chính mà nó đang cố gắng giải quyết là nhận CSS-parity nhưng sử dụng cú pháp JavaScript. Vì vậy, trọng tâm là bộ chọn, media query , hoạt ảnh, v.v. Nếu bạn đang tìm kiếm một thư viện được tôn trọng có tuổi thọ của một người bảo trì đã thành lập, aphrodite có thể là neo trong cơn bão của các thư viện JS.

Tuổi: 2 năm
Sao: 3.5k ⭐⭐⭐
Github: https://github.com/Khan/aphrodite
Dòng giới thiệu: CSS-in-JS không thể xác định khung với hỗ trợ hiển thị phía server , tiền tố trình duyệt và tạo CSS tối thiểu
Các tính năng: Hoạt ảnh, Đạo cụ động, Media query , Kết xuất phía server

ReactCSS

Là một trong những thư viện CSS-in-JS ban đầu, reactcss tập trung vào việc swap kiểu động dựa trên các đạo cụ.Mặc dù đây là một tính năng mà nhiều thư viện mới hơn có, cần lưu ý đây là một tính năng đi trước đường cong ngày xưa. Nó vẫn đáng xem xét, đặc biệt nếu cần hỗ trợ CSS đầy đủ (bao gồm cả Tự động sửa lỗi) hoặc hỗ trợ React Native.

Tuổi: 2 năm
Sao: 1,5k ⭐
Github: https://github.com/caseandberg/reactcss
Dòng giới thiệu: Kiểu nội tuyến trong JS hỗ trợ React, React Native, Autoprefixing, Hover, Pseudo-Elements & Media Queries
Các tính năng: Đạo cụ động, Media query , React Native

👉 Xin chân thành cảm ơn @MicheleBertoli và tất cả những người đóng góp khác cho css-in-js .

Tags:

Các tin liên quan

Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06