Tham chiếu CSS nguyên tử

funcssion không thực hiện bất kỳ loại thiết lập lại nào đối với các phần tử HTML. Việc sử dụng nó, cùng với các khung/thư viện CSS khác hoặc mã của riêng bạn, là không xâm phạm, do đó hoàn toàn khả thi. Tất cả các lớp chỉ đặt một hoặc hai thuộc tính. Hầu hết chỉ đặt một

Hầu hết các lớp được đặt tên bằng cách sử dụng tiền tố và sự kết hợp của những điều sau đây. hướng, dấu gạch ngang (-), giá trị có thể có của thuộc tính hoặc hậu tố (đơn vị). Một số ví dụ

Các lớp khác chỉ đơn giản là giá trị của các thuộc tính rõ ràng và khá phổ biến trong CSS, chẳng hạn như

Với việ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 ta sẽ xem CSS nguyên tử là gì, nó liên quan như thế nào đến CSS ưu tiên chức năng/tiện ích như TailwindCSS và những người chơi lớn đang áp dụng nó trong cơ sở mã React hiện đại của họ

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

Ghi chú. CSS nguyên tử không thực sự liên quan đến

thiết kế nguyên tử

---

Trước khi bắt đầu, hãy đăng ký React trong tuần này 😜
Bản tin hàng tuần để cập nhật thông tin về React & React-Native 👌

Theo dõi ngay

---

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…

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

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

Copy 
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 bảng định kiểu 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.

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

2 lần đầu tiên được sử dụng bởi Thierry Koblentz (Yahoo. ), trong Các phương pháp hay nhất về CSS đầy thách thức năm 2013

Copy 
1/* Atomic CSS */
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/* Not atomic, because the class contains 2 rules */
17.p-1x-sans {
18  padding: 10px;
19  font-style: sans-serif;
20}

Với tiện ích/CSS nguyên tử, chúng tôi thừa nhận rằng có thể 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, không phải CSS. Sự kết hợp chặt chẽ này cũng được thừa nhận trong các cơ sở mã CSS-in-JS React hiện đại, nhưng có vẻ như thế giới CSS trước tiên đã phát hiện ra rằng “sự tách biệt giữa các mối quan tâm” của web không đúng.

Tính cụ thể cũng ít gặp vấn đề hơn, vì chúng tôi sử dụng các bộ chọn lớp đơn giản

Chúng tôi hiện đang tạo kiểu thông qua đánh dấu, có một số thuộc tính thú vị

• biểu định 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à đảm bảo rằng chúng tôi xóa kiểu dáng liên quan cùng một lúc

Chắc chắn, html cồng kềnh hơn một chút. Đây có thể là mối lo ngại đối với các ứng dụng web do máy chủ kết xuất, nhưng độ dư thừa cao trong tên lớp sẽ nén tốt với gzip, giống như cách nó hoạt động tốt đối với 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 tiện ích/CSS nguyên tử cho mọi trường hợp, chỉ cần sử dụng các mẫu kiểu dáng phổ biến nhất

Khi tiện ích/CSS 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. Có thể lưu vào bộ nhớ cache một cách tích cực hơn (ví dụ: bạn có thể thêm nó vào

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

3 và hy vọng nó không bị vô hiệu hóa trên các lần triển khai lại ứ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 tiện ích/CSS nguyên tử

Tiện ích/CSS 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 tiện ích/CSS nguyên tử bằng tay, cẩn thận tạo ra các quy ước đặt tên. Có thể khó đảm bảo quy ước dễ sử dụng, nhất quán và không cồng kề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?

Bạn cũng cần làm việc trên một biểu định kiểu nguyên tử/tiện ích tốt trước khi có thể lặp lại các tính năng sẽ sử dụng nó

Nếu tiện ích/CSS nguyên tử được tạo bởi người khác, trước tiên bạn sẽ phải tìm hiểu các quy ước đặt tên lớp (ngay cả khi bạn biết mọi thứ về CSS). Quy ước này bị phản đối và có thể 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 tiện ích/CSS nguyên tử của bạn. Không có cách duy nhất nào để cung cấp các kiểu dùng một lần còn lại

---

Tailwind để giải cứu

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

Nó không thực sự cung cấp một tệp CSS tiện ích duy nhất cho tất cả các trang web. Thay vào đó, nó chỉ cung cấp phạm vi chia sẻ và quy ước đặt tên. 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 chuyển đến các ứng dụng khác, ngay cả khi chúng không sử dụng chính xác các tên lớp giống nhau. Nó gợi cho tôi một chút về triết lý “Học một lần, viết mọi nơi” của React

Tôi đã thấy mọi người báo cáo rằng các lớp học Tailwind đáp ứng khoảng 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 thường xuyên cần sử dụng kiểu một lần

Tại thời điểm này, bạn có thể tự hỏi

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

4. Bạn sẽ đạt được gì khi thực thi quy tắc CSS nguyên tử của

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

5?

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

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

• sự cần thiết phải tìm hiểu một quy ước đặt tên có ý kiến
• Thứ tự chèn quy tắc CSS vẫn quan trọng
• quy tắc không sử dụng có thể dễ dàng được gỡ bỏ?
• chúng ta phải 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 Tailwind

---

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

Có mối quan hệ với CSS-in-JS và tiện ích/CSS 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 kiểu nội tuyến hiệu quả, mang lại cho chúng nhiều thuộc tính tương tự (như khả năng di chuyển mọi thứ xung quanh một cách tự tin)

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

Tiện ích/CSS 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 là độ phân giải kiểu không xác định)

Nếu chúng có 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ử

Atomic CSS-in-JS có thể được coi là “CSS nguyên tử tự động”

• Bạn không cần tạo quy ước tên lớp nữa
• Các kiểu phổ biến và một lần được xử lý 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 phân tách mã
• Cơ hội để khắc phục các sự cố về thứ tự 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 có 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ẽ nêu bật 2 giải pháp cụ thể, gần đây đã dẫn đến 2 triển khai CSS-in-JS nguyên tử quy mô lớn, sử dụng 2 cuộc thảo luận làm nguồn

• React-Native-Web tại Twitter (chi tiết hơn trong bài nói chuyện của Nicolas Gallagher)
• Stylex tại Facebook (chi tiết hơn trong bài nói chuyện của Frank Yan)

Xem thêm

• phong cách
• mèo con
• Style-Sheet
• cxs
• ý kiến
• css-zero
• ui-box
• kiểu9
• mũi khâu
• catom
• biên soạn

Vui lòng ping tôi nếu bạn muốn có tên trong danh sách

React-Native-Web

React-Native-Web là một thư viện rất thú vị. nó cho phép hiển thị các nguyên hàm React-Native trên web. Chúng tôi không thực sự nói về phát triển web/di động đ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-Native-Web là một thư viện CSS-in-JS thông thường, đi kèm với một tập hợp nhỏ các thành phần React nguyên thủy. Bất cứ nơi nào bạn nhìn thấy

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

0, bạn có thể thay thế nó trong đầu bằng

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

1, và bạn đã sẵn sàng để đi

React-Native-Web đã được tạo bởi Nicolas Gallagher, hoạt động trên Twitter di động. Họ dần dần triển khai nó trên thiết bị di động, không chắc chính xác khi nào 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 Twitter dành cho máy tính để bàn năm 2019 mới do một nhóm do Paul Armstrong lãnh đạo.

phong cáchx

Stylex là một thư viện CSS-in-JS mới được phát triển tại Facebook để viết lại Facebook vào năm 2020 (hiện đang trong giai đoạn thử nghiệm). Có vẻ như họ dự định mã nguồn mở vào một ngày nào đó, có thể dưới một cái tên khác

Điều đáng nói là Nicolas Gallagher, tác giả của React-Native-Web, đã được Facebook thuê cách đây 2 năm. Không có gì ngạc nhiê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-Native-Web, Stylex dường như không tập trung vào phát triển đa nền tảng

Tất cả các thông tin tôi có là từ cuộc nói chuyện. ) Chúng ta 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 CSS của họ giảm đi rất nhiều, vì giờ đây nó đi theo một đường cong logarit. Có một mức giá ban đầu để trả cho các ứng dụng đơn giản

Facebook chia sẻ con số cụ thể

• 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ối

Nguồn và đầu ra

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

Điều đáng chú ý là React-Native-Web sẽ mở rộng các cú pháp rút gọn CSS như

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

2

kiểm tra sản xuất

Hãy xem đánh dấu trông như thế nào trên Twitter

Bây giờ, hãy xem 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

Việc điều hướng các kiểu trong trình kiểm tra Chrome có thể khó hơn một chút, nhưng devtools có thể giúp ích.

Thứ tự quy tắc CSS

Không giống như tiện ích viết tay/CSS nguyên tử, JS lib 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ác quy tắc xung đột, không phải lớp cuối cùng của thuộc tính lớp sẽ chiến thắng mà là quy tắc được chèn cuối cùng trong biểu định kiểu. Các vấn đề về tính đặc hiệu được giải quyết chỉ bằng cá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 có quy tắc xung đột trên cùng một phần tử. Họ đảm bảo rằng kiểu cuối cùng được khai báo trong đánh dấu luôn thắng. "Các lớp bị ghi đè" được lọc và thậm chí không đưa nó vào DOM

Copy 
1const styles = pseudoLib.create({
2  red: {color: "red"},
3  blue: {color: "blue"},
4});
5
6// That div only will have a single atomic class (not 2!), for the blue color
7<div style={[styles.red, styles.blue]}>
8  Always blue!
9div>
10
11// That div only will have a single atomic class (not 2!), for the red color
12<div style={[styles.blue, styles.red]}>
13  Always red!
14div>

Ghi chú. Hành vi có thể dự đoán này chỉ có thể thực hiện được nhờ sử dụng CSS nguyên tử nghiêm ngặt nhất

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 bị ghi đè

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

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

2 và giá trị ghi đè là

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

4, thì đó cũng là một vấn đề. Cú pháp tốc ký như

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

2 được mở rộng thành 4 lớp riêng biệt và thư viện có thể lọc các lớp bị ghi đè không xuất hiện trong DOM với độ chi tiết cao hơn

---

Bạn vẫn thích Tailwind chứ?

Sau khi biết tất cả các quy ước đặt tên của Tailwind, bạn có thể viết mã giao diện người dùng rất nhanh. 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 các bản tóm tắt của riêng bạn trên khung CSS-in-JS nguyên tử. Hệ thống kiểu dáng có thể chạy một số thư viện CSS-in-JS hỗ trợ CSS nguyên tử. Bạ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ã Tailwind

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

0

Bây giờ, hãy lấy một giải pháp ngẫu nhiên (react-native-web-tailwindcss) tôi vừa tìm thấy trên google

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

1

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

Đó gần như là tất cả những gì 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 Tailwind trong bất kỳ triển khai sản xuất lớn nào. Tôi có thể sai ở một số phần, vui lòng sửa cho tôi trên Twitter

Tôi nghĩ rằng CSS-in-JS nguyên tử là một xu hướng đá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 bài này chủ yếu cho bản thân mình. Tôi muốn có 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-Native-Web và đa nền tảng, hãy chú ý theo dõi)