Tôi đã tham gia cùng với Dustin Schau trong video này và anh ấy sẽ đưa tôi đi tham quan thế giới của những gì đã được gọi là CSS-in-JS. Đó là, thực hiện việc tạo kiểu của bạn hoàn toàn bằng JavaScript, thay vì trong .csscác tệp mà bạn tự tìm kiếm trong đầu.
Dustin là một hướng dẫn hoàn hảo cho việc này, vì anh ấy đã tạo ra một công cụ khám phá tuyệt vời có tên là CSS trong JS Playground và cũng có một khóa học hoàn toàn mới về chủ đề này.
Nếu bạn tò mò tại sao mọi người lại quan tâm đến việc sử dụng CSS-in-JS route, thì đây là một số lý do mà chúng tôi thảo luận trong video:
- Loại bỏ mã chết. Các kiểu duy nhất được tải là kiểu cho các thành phần được sử dụng tại bất kỳ thời điểm nào. Không có vận chuyển bất kỳ kiểu không sử dụng. Khi một thành phần chết, các kiểu của nó cũng vậy.
- Xác định phạm vi. Viết phong cách mới không thể ảnh hưởng đến bất kỳ điều gì khác ở những nơi khác trên trang web, vì vậy không cần phải lo lắng về việc viết một phong cách có hậu quả xấu hoặc không mong muốn ở nơi khác do một bộ chọn trong phạm vi toàn cầu. Chúng tôi được bảo vệ phạm vi với các hệ tư tưởng đặt tên như BEM, nhưng nó không được thực thi bằng công cụ.
- Đặt tên không lo lắng. Trong một số trường hợp, không cần chọn tên lớp hoặc ID cho những gì đang được tạo kiểu vì đầu ra chứa giao diện người dùng.
- Lập trình viên công thái học. Thật tuyệt khi có các kiểu trong cùng một tệp (hoặc rất gần) với chính thành phần đó. Theo cách tương tự, một số nhà phát triển cảm thấy rất thoải mái trong JSX. Ngoài ra, có thể tạo kiểu cho mọi thứ mà không phải lo lắng về phạm vi có nghĩa là các nhà phát triển có thể cảm thấy được trao quyền về kiểu dáng hơn là bị nó đe dọa.
- Hệ thống thiết kế thân thiện. Hệ thống thiết kế là tất cả về các thành phần và React cũng vậy. Những phương thức tư duy bổ sung này liên kết khá tốt với nhau.
- Khả năng của JavaScript trong CSS. Thực hiện điều này với các toán tử logic và được chuyển vào các giá trị và toán học và không, việc có toàn bộ sức mạnh của JavaScript trong các kiểu là rất hữu ích.
Và đó không phải là tất cả mọi thứ, nhưng bạn có thể thấy lý do tại sao nó hấp dẫn đối với một số người. Nó chắc chắn đã truyền cảm hứng cho rất nhiều cuộc thảo luận. Tại sao không khi nó cung cấp tất cả những lợi ích đó? Chà, đó là một môi trường phát triển rất khác không nhất thiết phải phù hợp với tất cả mọi người. Nó đòi hỏi phải bẻ cong nền tảng web để làm những điều hơi bất thường và điều đó đi kèm với mụn cóc. Chưa kể đến việc người dùng phải trả chi phí theo nghĩa đen (kích thước của các gói và như vậy), mà bạn hy vọng tốt hơn nên trả cho chính nó một cách hiệu quả.
Dustin đã đi xa hơn khi xây dựng một bản demo bằng cách sử dụng Sass để tạo kiểu mọi thứ để so sánh nó với cách nó có thể được thực hiện với CSS-in-JS, điều này thể hiện cách thức các kiểu cổng cũng như khả năng thực hiện nó.