Hướng dẫn atomic css-in-js - css-in-js nguyên tử

Với các triển khai sản xuất gần đây từ Facebook và Twitter, tôi nghĩ rằng một xu hướng mới đang dần phát triển: CSS-in-JS nguyên tử.

Trong bài đăng này, chúng tôi sẽ thấy CSS nguyên tử là gì, nó liên quan đến CSS chức năng / tiện ích đầu tiên như Tailwindcss như thế nào và những người chơi lớn đang áp dụng nó trong các cơ sở mã phản ứng hiện đại của họ.

Vì tôi không phải là một chuyên gia của chủ đề này, don don mong đợi một cuộc lặn sâu về những ưu và nhược điểm. Tôi chỉ hy vọng bạn có được một ý tưởng về những gì nó nói về.

Lưu ý: CSS nguyên tử không thực sự liên quan đến thiết kế nguyên tử.: Atomic CSS is not really related to Atomic Design.

CSS nguyên tử là gì?

Bạn có thể đã nghe nói về các phương pháp CSS khác nhau như BEM, OOCSS

1<button class="button button--state-danger">
2    Danger button
3button>

Ngày nay, mọi người thực sự thích CSS Tailwind và khái niệm đầu tiên tiện ích của nó. Điều này gần với CSS và tachyon chức năng.

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

Với một kiểu dáng của một loạt các lớp tiện ích, bạn có thể đi một chặng đường dài.

CSS nguyên tử giống như một phiên bản cực đoan của CSS đầu tiên tiện ích: Tất cả các lớp CSS có một quy tắc CSS duy nhất, duy nhất. Atomic CSS lần đầu tiên được sử dụng bởi Thierry Koblentz (Yahoo!), trong các thực tiễn tốt nhất của CSS trong năm 2013.

1
2.bw-2x {
3  border-width: 2px;
4}
5.bss {
6  border-style: solid;
7}
8.sans {
9  font-style: sans-serif;
10}
11.p-1x {
12  padding: 10px;
13}
14
15
16
17.p-1x-sans {
18  padding: 10px;
19  font-style: sans-serif;
20}

Với CSS tiện ích/nguyên tử, chúng tôi thừa nhận nó OK để kết hợp các lớp cấu trúc và trình bày: Khi chúng tôi cần thay đổi màu nút, chúng tôi sửa đổi HTML, chứ không phải CSS. Khớp nối chặt chẽ này cũng được thừa nhận trong các cơ sở mã CSS-in-JS hiện đại, nhưng có vẻ như thế giới CSS đã tìm ra trước tiên rằng sự tách biệt của mối quan tâm của Web đã cảm thấy đúng.

Tính đặc hiệu cũng ít hơn là một vấn đề, vì chúng tôi sử dụng các bộ chọn lớp đơn giản.

Bây giờ chúng tôi đang tạo kiểu thông qua đánh dấu, có một số thuộc tính thú vị:

• Bảng kiểu phát triển ít hơn khi chúng tôi thêm các tính năng mới
• Chúng ta có thể di chuyển đánh dấu xung quanh và các kiểu được di chuyển cùng một lúc
• Chúng tôi có thể xóa các tính năng và chắc chắn rằng chúng tôi sẽ loại bỏ kiểu dáng liên quan cùng một lúc

Để chắc chắn, HTML có nhiều hơi hơn một chút. Đây có thể là một mối quan tâm đối với các ứng dụng web được hiển thị máy chủ, nhưng sự dư thừa cao trong tên lớp nén tốt với GZIP, giống như cách nó hoạt động tốt cho các quy tắc CSS trùng lặp được tìm thấy trước đây trong các tệp CSS của bạn.

Bạn không cần sử dụng CSS tiện ích/nguyên tử cho mọi trường hợp, chỉ là các mẫu kiểu dáng phổ biến nhất.

Một khi CSS tiện ích/nguyên tử của bạn đã sẵn sàng, nó sẽ không thay đổi hoặc phát triển nhiều. Nó có thể lưu trữ mạnh mẽ hơn (ví dụ, bạn có thể nối nó vào vendor.css và hy vọng nó sẽ không vô hiệu hóa trên các lần triển khai ứng dụng). Nó cũng khá di động và bạn có thể sử dụng nó trong các ứng dụng khác.

Giới hạn của CSS tiện ích/nguyên tử

CSS tiện ích/nguyên tử có vẻ thú vị, nhưng chúng cũng đi kèm với một vài thách thức.

Mọi người thường viết CSS tiện ích/nguyên tử bằng tay, tạo ra các quy ước đặt tên cẩn thận. Có thể khó đảm bảo quy ước dễ sử dụng, nhất quán và không bị bồng bềnh theo thời gian. Nhiều người có thể làm việc trên CSS này và giữ cho nó nhất quán không? Nó có phải là đối tượng của yếu tố xe buýt không?

Bạn cũng cần phải làm việc trên một thiết bị phía trước tiện ích/nguyên tử tốt, trước khi có thể lặp lại các tính năng sẽ sử dụng nó.

Nếu CSS tiện ích/nguyên tử được tạo bởi người khác, bạn sẽ phải học các quy ước đặt tên lớp trước (ngay cả khi bạn biết mọi thứ về CSS). Công ước này được đưa ra, và nó có thể là bạn không thích nó.

Đôi khi, bạn cần thêm một số CSS không được cung cấp bởi CSS tiện ích/nguyên tử của bạn. Không có cách nào độc đáo để cung cấp các phong cách một lần còn lại.

Gió ngược để giải cứu

Cách tiếp cận của Tailwind rất thuận tiện và giải quyết một số vấn đề này.

Nó không thực sự cung cấp một tệp CSS tiện ích độc đáo cho tất cả các trang web. Thay vào đó, nó chỉ cung cấp một phạm vi chung và quy ước đặt tên. Từ một tệp cấu hình, nó cho phép bạn tạo CSS tiện ích tùy chỉnh của riêng mình.

Kiến thức về Tailwind có thể di động cho các ứng dụng khác, ngay cả khi họ không sử dụng chính xác cùng một tên lớp. Nó nhắc nhở tôi một chút về việc học hỏi một lần, viết bất cứ nơi nào triết lý phản ứng của người Viking.

Tôi đã thấy mọi người báo cáo rằng các lớp học đuôi bao gồm một cái gì đó từ 90% hoặc 95% nhu cầu của họ. Có vẻ như phạm vi đủ lớn và chúng tôi không cần phải sử dụng phong cách một lần.

Tại thời điểm này, bạn có thể tự hỏi why use atomic CSS instead of Tailwind?. Bạn sẽ đạt được gì trong việc thực thi quy tắc CSS nguyên tử của 1 rule, 1 class? Bạn sẽ kết thúc với một đánh dấu HTML lớn hơn và một quy ước đặt tên ít thuận tiện hơn? Tailwind đã có nhiều lớp nguyên tử.

Vì vậy, chúng ta có nên từ bỏ ý tưởng về CSS nguyên tử, và chỉ cần sử dụng Tailwind?

Tailwind là một giải pháp tuyệt vời, nhưng vẫn còn một vài vấn đề chưa được giải quyết:

• sự cần thiết phải học một quy ước đặt tên cho
• Lệnh chèn quy tắc CSS vẫn còn quan trọng
• Các quy tắc không sử dụng có thể dễ dàng loại bỏ không?
• Chúng ta làm gì với các phong cách một lần còn lại?

CSS nguyên tử viết tay có thể không thuận tiện nhất so với đuôi.

So sánh với CSS-in-JS

Có một mối quan hệ với CSS-in-JS và CSS tiện ích/nguyên tử. Cả hai cách tiếp cận đều ủng hộ việc tạo kiểu từ đánh dấu, bằng cách nào đó cố gắng mô phỏng các phong cách nội tuyến hiệu suất, cung cấp cho chúng nhiều tính chất tương tự (như khả năng di chuyển mọi thứ với sự tự tin).

Christopher Chedeau đã giúp truyền bá ý tưởng về CSS-in-JS trong hệ sinh thái React. Trong nhiều cuộc nói chuyện, ông giải thích các vấn đề của CSS:

CSS tiện ích/nguyên tử cũng giải quyết một số vấn đề này, nhưng chắc chắn không phải là tất cả (đặc biệt, độ phân giải không xác định của các phong cách).

Nếu họ chia sẻ những điểm tương đồng, chúng ta có thể sử dụng cả hai cùng nhau không?

Nhập CSS-in-JS nguyên tử

CSS-in-JS nguyên tử có thể được xem là CSS nguyên tử tự động CSS:

• Bạn không cần phải tạo một quy ước tên lớp nữa
• Phong cách phổ biến và một lần được đối xử theo cùng một cách
• Khả năng trích xuất CSS quan trọng của một trang và thực hiện chia mã
• Một cơ hội để khắc phục các vấn đề đơn đặt hàng chèn quy tắc CSS trong JS

Tôi không biết về tất cả các thư viện CSS-in-JS hiện đang hỗ trợ CSS nguyên tử. Hỗ trợ nó thực sự là một chi tiết triển khai của thư viện CSS-in-JS. Hỗ trợ có thể đến và đi, hoặc thậm chí có thể được thực hiện tùy chọn.

Tôi sẽ nhấn mạnh 2 giải pháp cụ thể, gần đây dẫn đến 2 triển khai CSS-in-JS quy mô lớn, sử dụng 2 cuộc nói chuyện làm nguồn:

• React-I-News-Web tại Twitter (chi tiết hơn trong cuộc nói chuyện của Nicolas Gallagher))
• Stylex tại Facebook (thêm chi tiết trong cuộc nói chuyện của Frank Yan,)

Xem thêm:

• Styletron
• Fela
• Style-Sheet
• CXS
• otion
• css-zero
• ui-box
• style9
• khâu
• catom
• biên soạn

Hãy thoải mái với tôi nếu bạn muốn ở trong danh sách.

React-Native-Web

React-Bản địa WEB là một thư viện rất thú vị: nó cho phép hiển thị các nguyên thủy bản địa phản ứng trên web. Chúng tôi không thực sự nói về phát triển di động/web đa nền tảng ở đây (xem các cuộc nói chuyện để biết thêm chi tiết).

Là một nhà phát triển Web, bạn chỉ cần hiểu rằng React-Imates-Web là một thư viện CSS-in-JS thông thường, đi kèm với một bộ nhỏ các thành phần React nguyên thủy. Bất cứ nơi nào bạn thấy

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

React-Bản địa WEB đã được tạo ra bởi Nicolas Gallagher, làm việc trên Twitter Mobile. Họ dần dần triển khai nó cho thiết bị di động, không chắc chắn khi nào chính xác nhưng có lẽ vào khoảng năm 2017/2018. Kể từ đó, nó đã được sử dụng bởi các công ty khác (Major League Soccer, Flipkart, Uber, The Times,), nhưng triển khai quan trọng nhất là ứng dụng máy tính để bàn Twitter 2019 mới của một đội dẫn đầu bởi Paul Armstrong.

Stylex

Stylex là một thư viện CSS-in-JS mới được phát triển tại Facebook cho bản viết lại trên Facebook năm 2020 (hiện đang ở phiên bản beta). Có vẻ như họ có kế hoạch để nguồn mở vào một ngày nào đó, có thể dưới một tên khác.

Điều đáng nói là Nicolas Gallagher, tác giả của React-Native-Web, đã được Facebook thuê 2 năm trước. Nó không phải là một bất ngờ lớn khi thấy một số khái niệm của nó được Facebook sử dụng lại.

Không giống như React-Bản địa-WEB, Stylex dường như không tập trung vào phát triển đa nền tảng.

Tất cả những gì tôi có là từ cuộc nói chuyện :) Chúng tôi sẽ phải chờ thêm chi tiết.

Khả năng mở rộng

Như mong đợi với CSS nguyên tử, cả Twitter và Facebook đều thấy giảm CSS khổng lồ của họ, vì bây giờ nó tuân theo một đường cong logarit. Có một mức giá ban đầu để trả cho các ứng dụng đơn giản.

Số lượng cụ thể chia sẻ của Facebook:

• Trang web cũ của họ là 413kb CSS chỉ dành cho trang đích
• Trang web mới của họ là 74kb cho toàn bộ trang web, bao gồm cả chế độ tốiwhole site, including the dark mode

Nguồn và đầu ra

2 thư viện dường như có API tương tự và khá đơn giản, nhưng nó khó nói, vì chúng tôi không biết nhiều về Stylex.

Nó có giá trị làm nổi bật phản ứng-bản địa-WEB sẽ mở rộng các cú pháp ngắn của CSS như

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

Kiểm tra sản xuất

Hãy cùng nhìn vào những gì đánh dấu trông như thế nào trên Twitter:

Bây giờ, hãy để Lôi nhìn vào Facebook mới:

Nhiều người có thể sẽ kinh hoàng khi nhìn thấy điều này, nhưng nó thực sự hoạt động, và vẫn có thể truy cập được.

Có thể khó hơn một chút để điều hướng các kiểu trong Thanh tra Chrome, nhưng DevTools có thể giúp đỡ:

Quy tắc CSS đặt hàng

Không giống như CSS Tiện ích/Nguyên tử viết tay, các LIB JS có thể làm cho kiểu dáng không phụ thuộc vào thứ tự chèn quy tắc CSS. Như bạn có thể biết, trong trường hợp các quy tắc mâu thuẫn, nó không phải là lớp cuối cùng của một thuộc tính lớp thắng, mà là quy tắc được chèn cuối cùng trong bảng kiểu. Các vấn đề đặc hiệu được giải quyết bằng cách chỉ sử dụng các bộ chọn dựa trên lớp đơn giản.

Trong thực tế, các thư viện này tránh xuất ra các lớp với các quy tắc mâu thuẫn trên cùng một yếu tố. Họ đảm bảo rằng phong cách cuối cùng được tuyên bố trong đánh dấu luôn chiến thắng. Các lớp ghi đè của người Viking được lọc được lọc và thậm chí không thể đưa nó đến DOM.

1const styles = pseudoLib.create({
2  red: {color: "red"},
3  blue: {color: "blue"},
4});
5
6
7<div style={[styles.red, styles.blue]}>
8  Always blue!
9div>
10
11
12<div style={[styles.blue, styles.red]}>
13  Always red!
14div>

Lưu ý: Hành vi dự đoán này chỉ có thể nhờ sử dụng CSS nguyên tử nghiêm ngặt nhất.: This predictable behavior is only possible thanks to using the most strict atomic CSS.

Nếu một lớp có nhiều quy tắc và chỉ một trong số chúng bị ghi đè, thư viện CSS-in-JS sẽ không thể lọc lớp đó mà không xóa các quy tắc không phản hồi.

Nếu một lớp có một quy tắc tốc ký duy nhất như

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2  Button
3button>

Bạn vẫn thích đuôi?

Khi bạn biết tất cả các quy ước đặt tên đuôi, bạn có thể mã UI rất nhanh. Nó có thể cảm thấy kém hiệu quả hơn khi quay lại viết mọi quy tắc CSS bằng tay, giống như bạn làm trong CSS-in-JS.

Không có gì ngăn cản bạn xây dựng sự trừu tượng của riêng bạn trên khung CSS-in-JS nguyên tử. Hệ thống kiểu dáng có thể có thể chạy một số thư viện CSS-in-JS hỗ trợ CSS nguyên tử. Nó thậm chí có thể sử dụng lại các quy ước đặt tên cho Tailwind trong JS, nếu bạn cảm thấy mình làm việc hiệu quả với nó.

Hãy để lấy một số mã đuôi:

1<div className="absolute inset-0 p-4 bg-blue-500" />

Bây giờ, hãy để Lừa lấy một giải pháp ngẫu nhiên (React-Imative-Web-TailWindcss) Tôi vừa tìm thấy trên Google:

1import {t} from 'react-native-tailwindcss';
2
3<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />

Về năng suất, điều này không khác lắm. Và bạn có thể tránh lỗi chính tả với TypeScript.

Sự kết luận

Đó là hầu hết mọi thứ tôi phải nói về CSS-in-JS nguyên tử.

Tôi chưa bao giờ sử dụng CSS nguyên tử, CSS-in-JS nguyên tử hoặc gió đuôi trong bất kỳ triển khai sản xuất lớn nào. Tôi có thể sai trên một số phần, hãy thoải mái sửa tôi trên Twitter.

Tôi nghĩ rằng CSS-in-JS nguyên tử là một xu hướng để xem trong hệ sinh thái React và tôi hy vọng bạn đã học được điều gì đó hữu ích với bài đăng này.

Vì tôi đã không thể tìm thấy bất kỳ bài viết nào về CSS-in-JS nguyên tử, tôi đã viết điều này chủ yếu cho chính mình. Tôi muốn một tài nguyên liên kết đến khi tôi đề cập đến CSS-in-JS nguyên tử trong các bài đăng trên blog sắp tới (Tôi dự định viết thêm các bài viết về React-I-Web và Capt-Cao đẳng, hãy theo dõi).

Cảm ơn bạn đã đọc.

Nếu bạn thích nó, hãy truyền bá với một tua rtweet

Demo mã trình duyệt hoặc sửa lỗi chính tả bài đăng của tôi trên blog repo

Để biết thêm nội dung như thế này, hãy đăng ký vào danh sách gửi thư của tôi và theo dõi tôi trên Twitter.