Phản ứng tạo kiểu thực hành tốt nhất

CSS là một điều hay thay đổi Là người mới bắt đầu phát triển, phần lớn, phong cách luôn luôn là một mớ hỗn độn khó hiểu. Có một trò đùa CSS cổ điển tóm tắt nó một cách độc đáo:

Hai thuộc tính CSS đi vào một thanh. Một barstool trong một quán bar hoàn toàn khác rơi xuống.

Và nó thật đúng! Bạn có bao giờ nhận thấy rằng đôi khi (nhưng không phải lần khác) thay đổi phong cách của một lớp trong CSS thay đổi phong cách của một số thứ khác không? Một số trong số đó không nên liên kết với lớp đó theo bất kỳ cách nào? Tôi có. Vì vậy, với tư cách là một bản sửa lỗi, chúng tôi cuối cùng đã đặt nhiều tên lớp cho một thành phần (và gửi ID chỉ để giải trí), nhưng ngay cả các quy ước đặt tên BEM cũng không bao giờ thực sự khắc phục được vấn đề cơ bản: CSS chỉ là ý nghĩa cho các dự án lớn. Hơn nữa, CSS (dưới dạng một biểu định kiểu riêng biệt) chỉ có nghĩa là đối với React.

Đây là một ảnh chụp màn hình của một dự án trong quá khứ của tôi. Các lớp tiêu đề ở khắp mọi nơi, ID nhiệt rải rác khắp nơi. Nó là một mớ hỗn độn.

Con đường dài và quanh co của CSS. Các lớp và ID được ném xung quanh, các lớp khác nhau thuộc các thành phần khác nhau và không nhớ đó, chưa kể tổ chức là một vấn đề đau đầu.

Nhập: Styled-Linh kiện

Có rất nhiều cách để sử dụng kiểu dáng trong React, nhưng một cách có vẻ là cách thực hành tốt nhất là tạo các thành phần trong thành phần của bạn để tạo kiểu trực tiếp. Các thành phần được tạo kiểu này chỉ ảnh hưởng đến thành phần cụ thể mà chúng được hiển thị và không có gì khác. Các thành phần trong React hoạt động tốt nhất khi chúng nhỏ, tập trung và có thể tái sử dụng.

Kiểu CSS cho một nút (cách cũ)Thành phần được tạo kiểu biểu hiện cùng một nút trong ReactThêm một đạo cụ chính vào nút rất dễ dàng!

Như bạn có thể thấy, kiểu dáng cho thành phần Nút được duy trì trong toàn bộ thành phần cụ thể mà nó đang được sử dụng. Lưu ý rằng vì chúng tôi đang sử dụng các mẫu chữ được gắn thẻ, chúng tôi có thể viết logic javascript ngay vào CSS của chúng tôi. Chưa từng có!

Kiểu dáng

Các thư viện kiểu CSS như Bootstrap, Materialize, v.v ... đều xuất hiện với các thư viện thành phần dành riêng cho React của riêng họ. Vì không có classNames, bạn có thể nhắm mục tiêu CSS để thay đổi nó theo phong cách của bạn. Cách duy nhất để thay đổi kiểu là thay đổi kiểu như một đối tượng (điều này tạo ra rào cản cho một số nhà phát triển giao diện người dùng không quen với javascript). Điều này dẫn đến mọi. trang mạng. đang nhìn. chính xác. giống nhau. Bây giờ, bằng cách sử dụng các thành phần được tạo kiểu, bạn có thể tạo một thành phần theo kiểu tùy chỉnh nhắm mục tiêu thành phần theo chủ đề. Siêu mát.

Tạo một thành phần theo kiểu tùy chỉnh, sau đó tạo kiểu thành phần đó. Thật nhiều phong cách!

Tổ chức & dễ đọc

Sử dụng các thành phần theo kiểu là một công cụ tuyệt vời để tổ chức các thành phần React của bạn. Thay vì xả rác JSX của bạn bằng

s và s, bạn chỉ có thể kết xuất các thành phần với kiểu riêng của chúng! Vì không có kiểu nội tuyến, mã trở nên rất dễ đọc và bảo trì. Và nếu bạn muốn thay đổi phong cách, bạn có thể làm điều đó mà không ảnh hưởng đến bất kỳ thành phần nào khác! Kinh ngạc.

JSX có thể có một chút lộn xộn với vô số <div> s, <span> s và các kiểu nội tuyếnChao ngươi đẹp.

'Thực hành tốt nhất'

Bạn vẫn có thể sử dụng biểu định kiểu với các thành phần được tạo kiểu (mặc dù điều đó rõ ràng sẽ đánh bại điểm ở đây) và cũng được xây dựng theo cách để tiêm kiểu toàn cầu (như chuẩn hóa hoặc đặt lại tệp css). Các thành phần tạo kiểu trong chính các thành phần là một cách thực hành tốt nhất mà nhiều nhà phát triển đang hướng tới trong React một cách cụ thể. Tôi khuyến khích mọi người thực hiện một chút nghiên cứu của riêng họ về vấn đề này, đặc biệt nếu họ đang tìm cách sử dụng các ngôn ngữ ngoại vi dựa trên thành phần như React và Angular 2.

Tại đây, một số liên kết để tìm hiểu thêm:

David Chan nói về phong cách cấp thành phần trong React
Ông nói về cách xây dựng kiểu dáng cho các hệ thống dựa trên thành phần nói chung.

Glen Maddern nói chuyện về các hệ thống dựa trên thành phần theo chủ đề
Đồng tác giả của thư viện thành phần theo kiểu đi qua phong cách cho các thành phần nói chung, không tập trung vào chính thư viện.

Trang web Thành phần được tạo kiểu chính thức và liên kết đến GitHub:
Tài liệu chi tiết và súc tích.

Max Stoiber nói chuyện tại ReactConf 2016
Đồng sáng tạo của các thành phần theo kiểu đi vào chi tiết và đặt câu hỏi về thư viện kiểu mới.

Tập podcast Jabber JavaScript với Max Stoiber
Stoiber nói về ứng dụng tạo phản ứng, mà ông cũng đã tạo ra, cũng như thư viện các thành phần theo kiểu.