Ví dụ css-in-js

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

Nội dung chính Hiển thị

  • CSS nguyên tử là gì?
  • Giới hạn của tiện ích CSS/nguyên tử
  • Gió ngược để giải cứu
  • So sánh với CSS-in-JS
  • Nhập nguyên tử CSS-in-JS
  • React-Native-Web
  • Expansionability
  • Nguồn và đầu ra
  • Kiểm tra sản xuất
  • Quy tắc đặt hàng CSS
  • Bạn vẫn thích đuôi?
  • Kết luận

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 nền tảng phản ứng hiện đại.

Vì tôi không phải là một chuyên gia của chủ đề này, đừng mong đợi một cuộc đi sâu về những ưu điểm và nhược điểm. Tôi chỉ hy vọng bạn có được một ý tưởng tưởng 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 không thực sự liên quan đến 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 ích của nó. Điều này gần với CSS và chức năng tachyon

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

2 Button

3button>

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

CSS nguyên tử giống như một phiên bản cực kỳ tiện ích của CSS đầu tiên. Tất cả các lớp CSS đều có một quy tắc CSS duy nhất, duy nhất.

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 những thành quả 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 tiện ích CSS/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 nút màu, 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 đó rằng sự tách biệt của mối quan tâm của Web đã cảm thấy đúng

Tính năng hiệu đặc biệt cũng ít hơn là một vấn đề, bởi 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 tin đá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 bổ sung các tính năng mới
  • Chúng ta có thể di chuyển các đá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ỏ các 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ị trên máy chủ, nhưng 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 sao chép được tìm thấy

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

Một khi tiện ích/nguyên tử CSS 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ể kết nối nó với

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ó sẽ không vô hiệu hóa trong 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 tiện ích CSS/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 trình thức

Mọi người thường viết CSS tiện dụng/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, quán nhất và không 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ó không quán nhất?

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à do 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 nào độc đáo để cung cấp các cách một lần nữa


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

Cách tiếp cận của Tailwind rất tiện lợi 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 định đặt tên. Từ một tệp cấu hình, nó cho phép bạn tạo tùy chỉnh CSS tiện dụng 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 chúng không sử dụng chính xác cùng một tên lớp. Nó có 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 có cái quái gì 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 đuôi bao gồm một cái gì đó từ 90% hoặc 95% như 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

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ì trong việc thực thi quy tắc CSS nguyên tử của

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 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 số vấn đề chưa được giải quyết

  • sự cần thiết phải học một quy định đặt tên cho
  • Lệnh chèn nút 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 không thể 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 dụng/nguyên tử. Cả hai cách tiếp cận đều ủng hộ việc tạo ra các kiểu từ đánh dấu, bằng cách nào đó cố gắng mô phỏng hiệu suất của các tuyến nội tuyến phong cách, cung cấp cho họ nhiều tính chất tương tự (như khả năng di chuyển mọi thứ với sự thật)

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

Ví dụ css-in-js

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, độ phân giải không xác định của các cách thức)

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


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

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

  • 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 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 chia mã
  • Một cơ hội để giải quyết 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 hỗ trợ CSS nguyên tử. Sự hỗ trợ của nó thực sự là một chi tiết khai triển của thư viện CSS-in-JS. Hỗ trợ có thể đến và đi, hoặc thậm chí có thể 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 khai thác 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

  • phong cách
  • mèo con
  • Style-Sheet
  • CXS
  • ý kiến
  • css-zero
  • ui-box
  • kiểu9
  • 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-địa Bản 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 nhì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>

0, bạn có thể thay thế nó trong tâm trí của bạn bằng

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 tốt để đi

React-địa chỉ WEB được tạo ra bởi Nicolas Gallagher, làm việc trên Twitter Mobile. Họ dần dần phát triển khai báo nó cho thiết bị di động, không chắc chắn khi nào chính xác nhưng có thể 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 được phát triển quan trọng nhất là ứng dụng máy tính để bàn Twitter 2019 mới của một nhóm dẫn đầu.

phong cáchx

Stylex là 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 vào năm 2020 (hiện đang ở phiên bản beta). Có vẻ như họ có kế hoạch mở nguồn vào một ngày nào đó, có thể theo 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 điều bất ngờ lớn khi thấy một số khái niệm về 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

Expansionability

Như mong đợi với CSS nguyên tử, cả Twitter và Facebook đều thấy CSS giảm xuống cho họ, vì bây giờ nó đang chịu trách nhiệm theo một đường cong logarit. Có một mức giá ban đầu để trả cho các ứng dụng đơn giản

Number of tools can share of 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ối thiểu cho toàn bộ trang web, bao gồm cả chế độ tối

Nguồn và đầu ra

2 thư viện lộn xộn 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 thu gọn của CSS như vậy.

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 cùng nhìn vào những gì được đánh giá là 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ể hỗ trợ

Quy tắc đặt hàng CSS

Không giống như CSS Tiện ích/Nguyên tử viết tay, 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 gạch chéo, 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 thêm vào 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ộ tùy 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 hiện các lớp với các quy tắc phế liệu trên cùng một yếu tố. Họ chắc chắn 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 và thậm chí không thể đưa nó đến DOM

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

2 Button

3button>

0

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. 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 số 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

If an layer has a rule of the register as the most as

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

2 Button

3button>

2 và viết tắt là

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

2 Button

3button>

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

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 mức độ chi tiết hơn

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

Khi bạn biết tất cả các quy định đặt tên đuôi, bạn có thể mã hóa giao diện người dùng 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 các đối tượng của riêng bạn trên các khung CSS-in-JS nguyên tử. Kiểu dáng hệ thống 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ó

Please to get a end code

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ừ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

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 mô tả chính xác với TypeScript


Kết luận

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

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ỳ kỳ phát 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 nguyên tử CSS-in-JS 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ề nguyên tử CSS-in-JS, nên 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 nguyên tử CSS-in-JS 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

Thank you have read


If you like it, please transfer with a tua rtweet

Trình diễn mã duyệt hoặc chỉnh 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