Các thành phần phản ứng là các khối xây dựng của giao diện người dùng ứng dụng của chúng tôi vào năm 2020. Là các yếu tố trực quan, việc tạo kiểu cho chúng là một phần quan trọng trong cách ứng dụng thực sự đáp ứng người dùng của chúng tôi và tạo nên giao diện và cảm nhận của thương hiệu và sản phẩm của chúng tôi
Chọn phương pháp phù hợp để tạo kiểu cho các thành phần không phải là sự thật tuyệt đối. Đó là một lựa chọn tương đối sẽ phục vụ trường hợp sử dụng, sở thích cá nhân của bạn và trên hết là các mục tiêu kiến trúc theo cách bạn làm việc. Không gian tên toàn cầu, phụ thuộc, khả năng sử dụng lại, khả năng mở rộng, loại bỏ mã chết, v.v.
Trong bài đăng này, chúng tôi sẽ xem xét các cách hữu ích để tạo kiểu cho các thành phần React của bạn trong năm 2020 và cố gắng hiểu điều gì làm nên sự khác biệt của chúng. Sự lựa chọn là của bạn và vui lòng thêm kinh nghiệm, hiểu biết và đề xuất của riêng bạn
Mẹo. Dễ dàng sử dụng lại các thành phần React trên các ứng dụng bằng Bit [GitHub]. Xây dựng nhanh hơn, một mình hoặc theo nhóm, giữ cho giao diện người dùng của bạn nhất quán và người dùng của bạn hài lòng. Nó thậm chí còn hoạt động với GitHub và NPM để nâng cao quy trình làm việc của bạn. Dùng thử miễn phí
Dễ dàng sử dụng lại các thành phần trên các ứng dụng, luôn đồng bộ hóa
Cũng đọc
Cách chúng tôi xây dựng hệ thống thiết kế và cách chúng tôi xây dựng giao diện vi mô
1. CSS nội tuyếnReact cho phép bạn thêm CSS nội tuyến, được viết dưới dạng thuộc tính và được chuyển đến các phần tử
Trong React, kiểu nội tuyến không được chỉ định dưới dạng chuỗi. Thay vào đó, chúng được chỉ định với một đối tượng có khóa là phiên bản camelCased của tên kiểu và giá trị của nó là giá trị của kiểu, thường là một chuỗi
Thuộc tính style chấp nhận đối tượng JavaScript có thuộc tính camelCased thay vì chuỗi CSS. Điều này phù hợp với thuộc tính DOM style JavaScript, hiệu quả hơn và ngăn ngừa các lỗ hổng bảo mật XSS. Ví dụ
Bạn có thể chuyển trực tiếp kiểu dáng hoặc tạo một biến lưu trữ các thuộc tính kiểu dáng rồi chuyển nó vào phần tử. Với các kiểu nội tuyến, bạn cũng có tùy chọn kết hợp cú pháp CSS với mã JSX [một bước tiền xử lý bổ sung cú pháp XML vào JavaScript]
Cách tiếp cận này giúp dễ dàng sắp xếp các kiểu trong các thành phần và hiểu mỗi thành phần có kiểu gì. Tận dụng các khả năng của JS cũng giúp dễ dàng làm việc với kiểu dáng phức tạp hơn khi cần
2. CSS trong JShttps. //loa boong. com/vjeux/reac-css-in-jsMột khái niệm đặc biệt thú vị là sử dụng CSS trong JS để trừu tượng hóa CSS ở cấp độ thành phần, sử dụng JavaScript để mô tả các kiểu theo cách khai báo và có thể bảo trì. Với việc phát hành dự án styled-components phổ biến của Max Stoiber, ngày nay khái niệm này trở nên phổ biến hơn bao giờ hết [xem bên dưới]
Vậy đâu là sự khác biệt giữa các kiểu CSS-in-JS và Inline? . Đây là một lời giải thích đơn giản giúp mọi thứ rõ ràng hơn ở mức độ thực tế nhất có thể. CSS-in-JS gắn thẻ lên trên DOM trong khi các kiểu nội tuyến chỉ gắn các thuộc tính vào nút DOM
Trong React, CSS-in-JS cho phép bạn suy nghĩ và thiết kế các phong cách trừu tượng ở cấp độ thành phần, tận dụng các nguyên tắc mô đun hóa và cách ly, thử nghiệm đơn vị, nguyên tắc DRY, v.v. Đó là một điều cần suy nghĩ, nhưng thường là một điều thực tế
Lưu ý rằng trạng thái vẫn là “React không có ý kiến về cách định nghĩa các kiểu; . ”
So sánh các thư viện CSS-in-JS cho React
Dưới đây là một số liên kết hữu ích để so sánh CSS trong các thư viện JS trong hệ sinh thái mã nguồn mở. Hãy bình luận và thêm những hiểu biết của riêng bạn
9 CSS trong Thư viện JS bạn nên biết trong năm 2018
Một số CSS tốt nhất trong thư viện JavaScript để sử dụng trong ứng dụng tiếp theo của bạn
Blog. bitrc. io
FormidableLabs/radium
Một chuỗi công cụ để tạo kiểu thành phần React. Đóng góp cho sự phát triển của FormidableLabs/radium bằng cách tạo một tài khoản trên…
github. com
MicheleBertoli/css-in-js
Phản ứng. So sánh các kỹ thuật CSS trong JS. Đóng góp cho sự phát triển của MicheleBertoli/css-in-js bằng cách tạo một tài khoản trên…
github. com
3. Thành phần theo kiểuMặc dù thực sự là một thư viện CSS-in-JS, nhưng các thành phần được tạo kiểu xứng đáng có một vị trí của riêng nó. Hãy xem một số thư viện giao diện người dùng này bằng cách sử dụng các thành phần theo kiểu
Các ứng dụng phản ứng theo chủ đề với các thành phần được tạo kiểu và bit
Là nhà phát triển giao diện người dùng, chúng tôi thường muốn tách biệt bản trình bày khỏi tương tác để có thể áp dụng cùng một CSS…
chút. đám mây
Một ý tưởng nảy sinh trong một quán rượu Whiskey ở Úc đã trở thành một dự án 20 nghìn sao. Dự án này giúp sử dụng CSS trong các thành phần React dễ dàng hơn bằng cách xác định các thành phần theo kiểu với các kiểu được đóng gói mà không có các lớp CSS làm lớp trung gian
Các thành phần được tạo kiểu được tạo bằng cách xác định các thành phần bằng ký hiệu chữ mẫu ES6. Các thuộc tính CSS có thể được thêm vào thành phần giống như bạn làm khi sử dụng CSS. Khi JS được phân tích cú pháp, các thành phần được tạo kiểu sẽ tạo các tên lớp duy nhất và đưa CSS vào DOM. Gọn gàng, phải không?
thành phần theo kiểu/thành phần theo kiểu
Nguyên thủy trực quan cho thời đại thành phần. Sử dụng những phần tốt nhất của ES6 và CSS để tạo phong cách cho ứng dụng của bạn mà không bị căng thẳng 💅 …
github. com
4. Mô-đun CSSCó ý nghĩa? . //www. công cụ javascript. com/what-are-css-modules/
Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ- theo mặc định. Hãy xem
mô-đun css/mô-đun css
Tài liệu về mô-đun css. Đóng góp cho sự phát triển css-modules/css-modules bằng cách tạo một tài khoản trên GitHub
github. com
Trong React, mỗi thành phần React có tệp CSS riêng, nằm trong phạm vi của tệp và thành phần đó. Đối với một thành phần React mà bạn muốn tạo kiểu, chỉ cần tạo một tệp CSS sẽ chứa các kiểu cho thành phần đó
Tại thời điểm xây dựng, tên lớp cục bộ được ánh xạ và xuất dưới dạng đối tượng JS theo nghĩa đen cho React- cũng như phiên bản CSS đầu vào đã sửa đổi với tên lớp được đổi tên. Kết quả là, bạn không phải loay hoay nhiều với các phong cách toàn cầu. Khi mở rộng quy mô các dự án của bạn, bạn sẽ gặp ít sự cố và rắc rối hơn
Đây là một bài viết tuyệt vời để đọc về khái niệm này và một thư viện không dùng nữa để thử
CSS mô-đun với React
Tại Buffer, chúng tôi yêu thích React và đang từng bước chuyển rất nhiều cơ sở mã mặt trước của chúng tôi sang nó. Với Flux ở trên cùng, chúng tôi…
trung bình. com
gajus/Reac-css-mô-đun
Ánh xạ liền mạch tên lớp tới các mô-đun CSS bên trong các thành phần React. - gajus/Reac-css-mô-đun
github. com
bộ vi xử lý. Sass, SCC và ít hơn
Sass là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành Cascading Style Sheets [CSS]. Cú pháp ban đầu sử dụng cú pháp tương tự như Haml và sử dụng thụt đầu dòng để phân tách các khối mã và ký tự dòng mới để phân tách các quy tắc
Cú pháp mới hơn, “Scss” [Sassy CSS], sử dụng định dạng khối giống như của CSS. Nó sử dụng dấu ngoặc nhọn để biểu thị các khối mã và dấu chấm phẩy để phân tách các dòng trong một khối. Sass được hỗ trợ trong ứng dụng tạo-phản ứng 2. 0 ra khỏi hộp và trở thành một cách phổ biến để tạo kiểu cho các thành phần
ngổ ngáo. Cú pháp tuyệt vời Style Sheets
Cú pháp tuyệt vời Style Sheets
sass-lang. com
Thêm Sass hoặc Scss vào ứng dụng tạo-phản ứng
Gần đây, nhóm React và một số cộng tác viên đã phát hành một công cụ tuyệt vời để tạo React…
trung bình. com
CSS mở rộng ít hơn với hành vi động như biến, mixin, hoạt động và chức năng. Dưới đây là hướng dẫn nhanh về less với các mô-đun CSS React và Webpack và đây là ví dụ về cách biến Less trông như thế nào
@width: 10px;
@height: @width + 10px;#header {
width: @width;
height: @height;
}
đầu ra
#header {
width: 10px;
height: 20px;
}Bắt đầu. Ít hơn. js
CSS mở rộng ít hơn với hành vi động như biến, mixin, hoạt động và chức năng. Ít chạy hơn trên cả…
lesscss. tổ chức
5. phong cáchGiống như các mô-đun CSS, Stylable được xây dựng để tạo kiểu SCC trong các dự án lớn có các thành phần trong khi giải quyết các vấn đề về tỷ lệ mà không cần chạy tới CSS trong JS. Nó cho phép bạn viết các thành phần có hiệu suất cao, có thể tái sử dụng. Mỗi thành phần hiển thị một API kiểu ánh xạ các phần bên trong của nó để bạn có thể sử dụng lại các thành phần giữa các nhóm mà không phải hy sinh “tính phong cách” của thành phần
Phạm vi có thể tạo kiểu phong cách cho các thành phần để chúng không bị “rò rỉ” và xung đột với các kiểu khác. Nó cho phép các lớp giả và phần tử giả tùy chỉnh trừu tượng hóa trạng thái bên trong và cấu trúc của một thành phần. Những thứ này sau đó có thể được tạo kiểu bên ngoài. Ví dụ: bạn có thể tạo kiểu cho nhãn bên trong một nút hoặc tạo kiểu cho nút phát của trình phát video từ bên ngoài các thành phần này
Tại thời điểm xây dựng, bộ tiền xử lý chuyển đổi CSS có thể tạo kiểu thành CSS cố định, tĩnh, hợp lệ, phẳng, hoạt động trên nhiều trình duyệt. Đây là một đánh giá hữu ích và demo
phong cách. cái tốt, cái xấu, cái lạ
Stylable là một bộ tiền xử lý CSS để phát triển web hiện đại. Mặc dù nó là người mới sử dụng CSS-in-JS 'Looney hiện tại…
Blog. ghen tị. com
wix/khoai tây-bruce
Ông. Bản demo Potato Bruce Styable cho hội nghị React Europe 2018 - wix/potato-bruce
github. com
Phần kết luậnKhi các thành phần React trở thành các khối xây dựng của giao diện người dùng ứng dụng của chúng tôi, việc tạo kiểu cho chúng trở thành một phần quan trọng trong quy trình phát triển của chúng tôi
Khi mở rộng quy mô cơ sở mã của chúng tôi, phương pháp tạo kiểu của chúng tôi là chìa khóa để cân bằng tính mô đun và tránh các vấn đề mở rộng phổ biến có thể ảnh hưởng đến tốc độ phát triển của chúng tôi
Hãy nhớ rằng cuối cùng, không có cách đúng hay sai để tạo kiểu cho các thành phần. Nó thực sự phụ thuộc vào cách bạn làm việc, các công cụ bạn sử dụng và vào việc bạn hiểu bạn đang thực sự cố gắng đạt được điều gì. Hy vọng bạn thấy điều này hữu ích, và xin vui lòng bình luận và đề xuất những hiểu biết của riêng bạn