7 thư viện CSS IN JS components xu hướng cho Frontend Developer

Trong những năm gần đây, phong cách code CSS-in-JS đang rất thịnh hành.  Nó cho phép bạn viết CSS trong JS một cách nhanh và giảm thiểu đi các tệp style rất nhiều. Khả năng đóng gói (bundle) các tệp giúp ứng dụng trở nên nhẹ và style cũng không bị chồng chéo. Điều đó cũng giúp ứng dụng của chúng ta đạt hiệu suất cao hơn khi chỉ tải các tệp đang sử dụng. Một điểm đặc biệt khác đó là nhờ vào sự linh động trong cách viết cho phép chúng ta phóng to quy mô dự án một cách tốt hơn.  Dưới đây là 7 thư viện CSS-in-JS mà một Frontend Developer nên biết!

STYLED COMPONENTS

Styled components là một thư viện cực hay ho giúp cho việc kiểm soát và phát triển CSS một cách chặt chẽ và rõ ràng hơn trong dự án.Hiện nay Styled components được khá nhiều hệ thống lớn tin dùng như BBC, Reddit, Vimeo, Lego Các thành phần tạo CSS riêng biệt không bị trùng lặp, điều chỉnh và biến đổi nhanh chóng không phải thông qua các bước thủ công truyền thống như trước nữa.

Thư viện styled components

JSS

JSS là một thư viện CSS-in-JS cho phép bạn dùng JS để styles theo kiểu khai báo và cực kì linh động trong dự án. Nó rất ít hoặc không xảy ra xung đột CSS giữa các component  và có thể tận dụng sử dụng lại. Điểm đặc biệt là JSS có thể biên dịch trong trình duyệt, phía máy chủ hoặc tại thời điểm xây dựng trong Node.

Thư viện jss

EMOTION

Emotion là một thư viện CSS-in-JS rất hay cú phát thân thiện từ đó nó giúp việc áp dụng thư viện này một cách dễ dàng hơn. Bạn có thể sử dụng các ký tự mẫu ES6 hoặc JS. Ngoài ra Emotion hiện nay còn hỗ trợ nhiều tính năng mới như source maps, cached và test snapshot.

Thư viện Emotion

APHRODITE

Như những thư viện tương tự thì Aphrodite cũng là một thư viện CSS-in-JS. Nó linh động bạn có thể dùng nó với bất kì frameworks hoặc đơn giản hơn với web components. Đây là một thư viện tương đối nhẹ có kích thước khoảng 6 kbytes và nó hỗ trợ hiển thị phía máy chủ khi tạo.

Thư viện APHRODITE

RADIUM

Radium là một thư viện CSS-in-JS cực hay, not tạo một tên lớp duy nhất cho mỗi thành phần. Chính vì thế nó độc lập thứ tự nguồn, giảm thiểu mã chết và giảm thiểu xung đột hơn.

Thư viện Radium

STYLETRON

Styletron cũng là một thư viện CSS-in-JS hay mà mình nghĩ bạn nên biết. Các thành phần được tạo từ Styletron có thể linh động trên các thiết bị mà render khác nhau sau cho phù hợp.  Thư viện styletron giúp tối ưu hóa đường dẫn, loại bỏ tất cả dư thừa và dẫn đến thời gian tải nhanh hơn.

Thư viện styletron

STYLED - JSX

Giống như những thư viện style components khác Styled-JSX cũng cho phép chúng ta thực hiện điều đó và đặc biệt hơn là sử dụng nó trên JSX.  Nó giúp chúng ta style rõ ràng và ít việc bị trồng chéo style hơn. Đặc biệt khả năng build-in component nên styled-JSX cũng là một trong những sự lựa chọn hàng đầu cho các developer hiện tại.

Thư viện Styled JSX

Tạm kết

Các thư viện trên thực sự rất hữu ích và tiện lợi cho một frontend developer. Tuy nhiên, cốt lõi chúng ta cần phải nắm vững kỹ thuật sử dụng của một công nghệ, một thư viện nào đó thì chắc chắn sản phẩm của bạn sẽ luôn tuyệt vời.

Chúc các bạn một ngày vui vẻ!

----- 

Nguồn: từ một tác giả của Developer Drive