- vừa được xem lúc

CSS trong JS là gì?

0 0 19

Người đăng: BeautyOnCode

Theo Viblo Asia

CSS trong JS hay CSS-in-JS là một thuật ngữ mô tả việc viết code style CSS trong code JS, tức viết vào file .js , .jsx thay vì viết code CSS vào file .css như bình thường.

CSS trong JS ra đời khi nào?

CSS-in-JS ra đời khi mà trang web ngày càng phức tạp và việc duy trì tất cả các CSS của toàn bộ hệ thống trang web (code base lớn) trở nên khó khăn.

Vì tất cả CSS sẽ nằm chung trong một scope global document (hay global scope selectors) gây nhiều xung đột (khi trùng tên class, id) và việc ghi đè CSS trở nên khó khăn hơn (ghi đè nhiều lớp, sử dụng !important, …) .

Thêm vào đó xu hướng component-based development (hay component driven development) ngày càng phát triển với React khiến việc style từng thành phần (component) càng trở nên cấp thiết.

CSS-in-JS đã giúp giải quyết các vấn đề này như thế nào?

CSS-in-JS sẽ trích xuất CSS theo từng component thay vì theo document như CSS.

styled-components là một thư việc CSS-in-JS được sử dụng phổ biến nhất. Ngoài ra còn có Aphrodite, Radium, Glamorous, JSS

Một ví dụ với thư viện Styled Component (styled-components):

Tạo Text mặc định sẽ nhận thẻ p, với font size là 16px.

import styled from 'styled-components' const Text = styled.p` font-size: 16px;
`

và truyền thẻ h2 vào thuộc tính “as” để Text sử dụng:

<Text as='h2'>This is a H2 heading</Text>

Khi đó code CSS sẽ tự động tạo một class duy nhất và được gắn vào DOM như sau:

<style> .gZxhj123 { font-size: 16px; }
</style>

Ưu điểm khi sử dụng CSS-in-JS

→ Code ngắn gọn và nhất quán hơn

→ Giảm xung đột CSS

→ CSS dynamic với props

→ Kế thừa style

→ Cú pháp SASS giúp style dễ dàng với pseudo element và pseudo class

→ Dễ dàng thay đổi theme với ThemeContext

→ Tự động tạo prefix cho class CSS, không sợ bị trùng nhau

→ Có thể viết unit test cho CSS

Nhược điểm khi sử dụng CSS-in-JS

→ Sẽ không phù hợp với người chưa biết JS

→ Tốn thời gian làm quen với thư viện, gây khó khăn cho người mới

→ Khó khăn khi muốn debug bằng tên class

→ Hiệu suất không tốt bằng CSS, do sử dụng nhiều thẻ style hơn, nặng code base hơn


Trên đây là vào note tóm tắt mình tìm hiểu được về CSS-in-JS.

Với mình, nếu dự án nhỏ, và làm việc với các bạn chưa có nhiều kinh nghiệm về JS, về OOP, … thì mình sẽ chọn CSS truyền thống (hoặc SASS – vẫn dynamic được) vì các bạn sẽ dễ tiếp cận hơn.

Còn dự án vừa và lớn, tính kế thừa cao, nhiều components, dev nhiều kinh nghiệm hơn thì mình sẽ chọn các thư viện CSS-in-JS như styled-components.

Bạn thấy sao về CSS-in-JS? Nếu được chọn thì bạn sẽ sử dụng styled-components hay CSS truyền thống để style cho ứng dụng React của bạn?

Bài viết gốc nằm ở blog cá nhân của mình, mời bạn ghé chơi.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 58

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 49

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 47

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 49

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 47

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 28