Tailwind có phải là CSS nguyên tử không?

Chúng tôi sẽ tạo lại nút này bằng Tailwind CSS, một khung CSS phổ biến để viết CSS nguyên tử. Đây là cách chúng tôi sẽ tạo nút đó bằng Tailwind

Nếu phản ứng đầu tiên của bạn đối với mã này là co rúm người lại, thì không sao đâu. Đó là bình thường. Sự thật mà nói, CSS nguyên tử đôi khi trông khá xấu xí và lộn xộn. Nó trông như vậy bởi vì nó sử dụng cái được gọi là các lớp tiện ích, là những lớp thường được đặt trong một thuộc tính duy nhất. Ví dụ: lớp tiện ích inline-flex áp dụng thuộc tính display với giá trị là inline-flex. Bây giờ, bạn có thể đang nghĩ cho chính mình. "Nếu tôi muốn áp dụng flex cho phần tử này, tại sao tôi không truy cập tệp CSS của mình và thay đổi nó ở đó?"

Bây giờ, ở thế giới nào thì việc viết mớ lộn xộn của các lớp tiện ích HTML và CSS thay vì sử dụng cách tiếp cận truyền thống đối với CSS là hợp lý? . Để hiểu lý do tại sao, hãy nghĩ về cách chúng ta tạo kiểu cho nút của mình bằng cách sử dụng phương pháp CSS truyền thống

Bây giờ chúng ta có thể áp dụng lớp nút này cho một phần tử nút và chúng ta đã sẵn sàng. Chúng tôi thậm chí có thể sử dụng lại lớp nút này trong tương lai nếu chúng tôi muốn đặt một nút khác ở một nơi khác trên trang web, nhưng xảy ra khi chúng tôi muốn tạo một loại nút khác, chẳng hạn như nút xóa màu đỏ? . Sau đó, chúng tôi quyết định thực hiện thay đổi đối với nút ban đầu của mình, nhưng chúng tôi không muốn thay đổi nút xóa mới. Những sự phức tạp nhỏ này nhanh chóng phát triển, làm cho phong cách của trang rất khó quản lý. Thay đổi phong cách của một yếu tố có thể có những hậu quả không mong muốn

Các kiểu chúng tôi viết bằng CSS nguyên tử được đóng gói, nghĩa là bất kỳ kiểu nào chúng tôi viết chỉ áp dụng cho phần tử đó. Điều này giúp tránh những hậu quả không mong muốn do sử dụng lại các lớp cho nhiều phần tử. Điều này giải phóng chi phí tinh thần do phải suy nghĩ về những lớp nào chúng ta đang sử dụng lại và ở đâu. CSS nguyên tử rất phù hợp với cách tiếp cận dựa trên thành phần hiện đại để phát triển ứng dụng web. Khi chúng tôi sử dụng các khung như Vue, Svelte, React hoặc Angular, chúng tôi chia ứng dụng thành nhiều thành phần. Viết CSS nguyên tử trực tiếp trên các thành phần này mang lại cho chúng ta những lợi ích của việc đóng gói

Nhược điểm chính là cách tiếp cận này là xấu. Không có cách nào xung quanh nó. Nhìn thấy một trang web hết div này đến div khác với 10 đến 15 lớp tiện ích được thêm vào là điều không mấy hấp dẫn. Tuy nhiên, nếu chúng ta kết hợp các lớp tiện ích này với một khung web dựa trên thành phần, chúng ta có thể trừu tượng hóa sự xấu xí đó đi một chút

Một số lớp khó đọc hoặc khó hiểu, đặc biệt là đối với người mới bắt đầu. Đối với người mới bắt đầu học CSS, việc nhìn thấy các lớp có tên py-12 hoặc mr-3 lúc đầu có thể khá khó hiểu, nhưng đối với người đã có một số kiến ​​thức về CSS, sau một thời gian sẽ làm quen với các lớp tiện ích và nguyên tử.

Có một số khuôn khổ đưa các nguyên tắc này vào thực tế. Dưới đây là một số liên kết đến một số trong số họ, bạn nên kiểm tra

• CSS đuôi gió
• Windi CSS
• Uno CSS

Đọc bài đăng này trên braxtonmassengale. com

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi

Một tập hợp nhiều nội dung mô tả chi tiết và thể hiện lợi ích của CSS nguyên tử, còn được gọi là CSS ưu tiên tiện ích hoặc CSS chức năng

Thuật ngữ CSS nguyên tử đề cập đến một triết lý kiến ​​trúc, không phải bất kỳ thư viện hoặc khung cụ thể nào và bao gồm cả tĩnh (e. g. Tachyons, Tailwind) và có lập trình (e. g. Thành phần được tạo kiểu, Cảm xúc, Giao diện người dùng chủ đề, ACSS. io) phương pháp tiếp cận. Để có định nghĩa rõ ràng và thông tin về thuật ngữ liên quan, hãy đọc Hãy xác định chính xác CSS nguyên tử là gì

Nhiều người trong số những người đưa ra cách tiếp cận này đã lấy cảm hứng từ công trình đột phá năm 2009-2011 của Nicole Sullivan về OOCSS (để biết thêm bối cảnh lịch sử, hãy đọc phần này)

Căn phòng rộng rãi và đầy nắng này dành cho những người đi du lịch nhẹ nhàng và đang tìm kiếm một nơi thoải mái và ấm cúng để ngả đầu trong một hoặc hai đêm. Ngôi nhà bên bờ biển này nằm trong một khu phố sôi động có nhiều quán cà phê, quán rượu, nhà hàng và siêu thị và gần tất cả các điểm tham quan chính như Lâu đài Edinburgh và Arthur's Seat.

CSS nguyên tử là một phong trào đang phát triển trong CSS. Thay vì tách rời HTML và CSS bằng cách sử dụng các lớp ngữ nghĩa lớn như button hoặc nav, Atomic CSS cho phép bạn nhúng các lớp tiện ích nguyên tử vào HTML của mình như text-white, mb-6, v.v. CSS nguyên tử đang phát triển nhanh chóng vì nó cung cấp một cách để làm cho các kiểu được gói gọn hơn, dễ viết hơn và thường giảm tổng mã được gửi tới máy khách. Ngoài ra, Atomic CSS đã và đang thay đổi khi nó phát triển. Các framework mới hơn như TailwindCSS, Windi CSS và UnoCSS đang thúc đẩy sự phát triển của Atomic CSS. Trong bài viết này, chúng ta sẽ tìm hiểu về lịch sử của Atomic CSS, tại sao mọi người sử dụng nó và tình trạng hiện tại của CSS

Lịch sử của CSS nguyên tử

Lịch sử CSS

Đầu tiên, chúng ta cần nhìn vào lịch sử của CSS. Hakon Wium Lie và Robert Cailliau đã tạo ra CSS vào năm 1994. Họ muốn có một cách để tạo kiểu tài liệu toàn cầu một cách đáng tin cậy. Có rất nhiều ứng cử viên để làm điều này, nhưng điều khiến CSS trở nên độc đáo là nó được phân tầng, giúp tạo kiểu dễ dàng hơn. Trong bối cảnh này, xếp tầng có nghĩa là nhiều kiểu khác nhau có thể áp dụng cho cùng một phần tử và thuật toán sẽ quyết định kiểu nào cụ thể nhất. Vì những ưu điểm như xếp tầng, CSS nhanh chóng trở thành tiêu chuẩn vào năm 1996, tiếp theo là CSS2 vào năm 1997

Các kiểu đầu tiên được sử dụng trong CSS rất đơn giản và thường chỉ liên quan đến các yếu tố tạo kiểu rất chung chung. Tuy nhiên, khi các kiểu trở nên tiên tiến hơn và các lớp được sử dụng phổ biến hơn, mọi người đã phát triển các quy ước CSS đầu tiên. Các quy ước CSS là các khuôn khổ để tổ chức mã của bạn như BEM (công cụ sửa đổi phần tử khối) hoặc OCSS (CSS hướng đối tượng). Các quy ước này tập trung vào các lớp ngữ nghĩa như title và title__description. Các lớp ngữ nghĩa hoạt động tốt và vẫn hoạt động. Tuy nhiên, một số người muốn có một cách mới để viết CSS. Và đó là lý do Atomic CSS ra đời

ACSS đưa Atomic CSS trở thành xu hướng chủ đạo

Ví dụ chính đầu tiên về Atomic CSS là ACSS hoặc Atomizer CSS. Vào năm 2013, Thierry Koblentz đã xuất bản Các phương pháp hay nhất về CSS đầy thách thức, được nhiều người công nhận là bài báo đã đưa Atomic CSS trở thành xu hướng chủ đạo. Một năm sau, anh tạo ra ACSS để sử dụng trong Yahoo. ACSS đã sử dụng cú pháp giống hàm JavaScript, với các lớp như inline-flex0 để đặt phần đệm của phần tử thành 20 pixel. Atomizer, một JavaScript CLI và plugin bundler, tự động tạo các lớp như thế này khi bạn sử dụng chúng, giảm đáng kể số lượng bạn cần viết

Tachyons đưa CSS nguyên tử trở nên phổ biến hơn

Tuy nhiên, ACSS sẽ sớm được thông qua bởi một công cụ mới hơn một chút trong không gian Atomic CSS, Tachyons. Tachyons là một khung CSS nguyên tử khác khác với Atomizer ở chỗ nó bao gồm CSS tĩnh, không giống như Atomizer, tự động tạo CSS. Ngoài ra, Nó đã sử dụng cú pháp dựa trên dấu gạch ngang ngắn hơn thay vì sử dụng dấu ngoặc đơn. Tachyons sẽ phát triển vượt xa ACSS và cho đến ngày nay, có khoảng 40.000 lượt tải xuống mỗi tuần

Tailwind CSS trở thành khung Atomic CSS phổ biến nhất

Tailwind là một Atomic CSS framework được tạo bởi Adam Wathan vào năm 2017. Không giống như Tachyons, nó chạy trên PostCSS, một bộ tiền xử lý CSS dựa trên plugin. Điều đó cho phép Tailwind tích hợp với các plugin PostCSS khác và thậm chí giúp bạn có thể sử dụng các lớp Tailwind bên trong CSS bằng cách sử dụng `@apply. ## ### #### { to grid {class} Ngoài ra, Tailwind có thể định cấu hình và mở rộng hơn nhiều. Vì những lợi thế này, đã phát triển vượt xa cả Tachyons ACSS hiện đang có hàng triệu lượt tải xuống hàng tuần. Bây giờ, hãy xem tại sao mọi người

sử dụng CSS nguyên tử. Tại sao mọi người CSS

đóng gói với

CSS, gói gọn tự động của bạn. tạo kiểu trong các lớp, nó chỉ áp dụng cụ thể các phần tử có các lớp. Sự đóng gói này có nghĩa là bạn không bao giờ lo lắng về việc vô tình làm hỏng thứ gì đó vì đã loại bỏ một lớp nút quy tắc nhất định bắt buộc. có thể biết các nút nào cần những gì chúng có các lớp riêng cho các nhu cầu cụ thể. một lý do chính được tạo ra vẫn còn hữu ích cho đến ngày nay. Nhà phát triển súc tích luôn tìm cách viết ít mã nhất. Dù là Sass, Stylus hay LESS, các bộ tiền xử lý đã cố gắng giảm mã cần thiết. Tuy nhiên, ngay cả khi bỏ dấu chấm phẩy trong ngoặc. công cụ quy tắc nhỏ hơn đáng kể tạo ra các khung như truy vấn phương tiện ngưng tụ

thành hai chữ cái đơn giản

tiếp đầu ngữ. Ví dụ: cách xây dựng bố cục đáp ứng Tailwind. hiển thị div css. ~2 ; . lặp lại (2, tối thiểu (0, 1fr)); . 1024px) { div { grid-template-columns. lặp lại (4, tối thiểu (0, 1fr));

#### Tailwind

```html
<div class="grid grid-cols-2 lg:grid-cols-4"></div>

Cuối cùng cả hai phần đều có cùng một CSS. Tuy nhiên, như bạn có thể thấy, cách thứ hai ngắn gọn hơn. Sự ngắn gọn của CSS nguyên tử có thể tăng thêm về mặt tiết kiệm thời gian, vì vậy đó là một lý do khác khiến các nhà phát triển sử dụng CSS nguyên tử

Hoạt động tốt với các khung dựa trên thành phần

CSS nguyên tử tích hợp tốt với các khung như React, Vue và Svelte vì CSS nguyên tử giúp tạo các kiểu dựa trên thành phần được đóng gói dễ dàng hơn. Các khung dựa trên thành phần cũng giải quyết vấn đề lặp lại. Thay vì giảm sự lặp lại thông qua các lớp CSS, bạn có thể sử dụng các thành phần. Trên thực tế, sử dụng thứ gì đó như React with Atomic CSS. Sự tích hợp này được cải thiện hơn nữa nếu bạn sử dụng thứ gì đó như rắc của chiết xuất vani, bổ sung CSS trong giao diện giống như JS cho Atomic CSS

Giảm CSS tổng thể

Ở quy mô lớn, CSS nguyên tử thường làm giảm CSS được tạo tổng thể. Vì các lớp là nguyên tử, bạn thường sử dụng lại chúng nhiều lần và mỗi lần bạn sử dụng lại chúng, nó chỉ tốn thêm một vài byte HTML. Mặt khác, số lượng byte HTML thường ít hơn đáng kể so với CSS cần thiết bởi vì, như đã nói ở trên, CSS nguyên tử thường ngắn gọn hơn đáng kể so với giải pháp thay thế vanilla. Trên thực tế, các công cụ như Fela biến CSS trong JS thành CSS nguyên tử vì lợi thế về kích thước gói

Trạng thái CSS nguyên tử

Gió cùng chiều

Tailwind xứng đáng có phần riêng ở đây. Nó hiện là khung Atomic CSS phổ biến nhất cho đến nay và có một số lý do tuyệt vời cho điều đó. Đầu tiên, như đã đề cập trước đó, nó tích hợp với PostCSS, cho phép sử dụng các plugin PostCSS khác như autoprefixer và PurgeCSS. Ngoài ra, nó cung cấp khả năng sử dụng các lớp bên trong biểu định kiểu của bạn với inline-flex1 (mặc dù tôi không khuyến nghị điều này trừ khi bạn cần vì nó loại bỏ nhiều ưu điểm của Atomic CSS). Cuối cùng, nó có cú pháp đơn giản cho các sự kiện và truy vấn phương tiện

Tailwind đã phát triển ồ ạt kể từ khi phát hành. Ngay từ đầu, nó đã bắt đầu sử dụng PurgeCSS (một plugin PostCSS loại bỏ các kiểu không sử dụng) để đảm bảo rằng Tailwind không bao gồm mọi thứ trong gói. Quá trình thanh lọc biến thành JIT biên dịch CSS để tối ưu hóa tốc độ, vì vậy Tailwind sẽ chỉ thêm các lớp bạn đã sử dụng vào biểu định kiểu thay vì xóa các lớp không sử dụng. Ưu điểm của JIT khi biên dịch Atomic CSS là các cải tiến về tốc độ xây dựng là rất lớn, điều mà chúng ta sẽ xem xét sau. Tailwind đã thêm những thứ quan trọng khác như hỗ trợ chế độ tối thông qua tiền tố inline-flex2, giúp việc hỗ trợ chế độ tối trở nên rất dễ dàng, đặc biệt là khi kết hợp với các thuộc tính tùy chỉnh CSS

xây dựng nhanh

Một xu hướng ngày càng tăng, nói chung, là. CSS nguyên tử không khác. Các khung gần đây như Windi CSS và UnoCSS đã được tạo để cải thiện hiệu suất xây dựng

Windi CSS

Windi là một khung nhằm mục đích sử dụng trình biên dịch JIT để cải thiện hiệu suất trong khi vẫn duy trì việc tạo lớp css tương thích với Tailwind. Thay vì chỉ được cung cấp dưới dạng plugin PostCSS, Windi chủ yếu có sẵn dưới dạng plugin công cụ xây dựng hoặc CLI. Cũng có một plugin PostCSS, nhưng nó không được khuyến nghị. Như tôi đã đề cập trước đó, Windi CSS sử dụng trình biên dịch JIT để nhanh hơn Tailwind. Bạn có thể bối rối vì tôi cũng đã nói rằng Tailwind cung cấp tính năng biên dịch JIT. Điều này tiết lộ một “phần đen tối” trong quá trình biên dịch JIT của Tailwind. Trên thực tế, Tailwind đã sao chép CSS của Windi trong thiết kế của trình biên dịch JIT và chỉ công nhận khi một trong những người đóng góp cốt lõi cho Windi đề cập đến cách Tailwind sao chép chúng. Vì vậy, bây giờ bạn có thể đang nghĩ, "tại sao tôi nên sử dụng Windi nếu Tailwind cũng có JIT?" . Bây giờ bạn đã biết thêm về Windi CSS, vậy hãy xem UnoCSS

UnoCSS

UnoCSS là một dự án được phát triển bởi Anthony Fu, người đóng góp cốt lõi cho Windi CSS và Vue, vào cuối năm 2021. Nó nhằm mục đích nhanh hơn đáng kể và dễ cấu hình hơn Windi. Theo điểm chuẩn riêng, nó nhanh hơn gần 200 lần so với Windi và nhanh hơn gần 250 lần so với Tailwind JIT. Nó đạt được tốc độ này nhờ sự đơn giản trong phân tích cú pháp và sự tối giản tổng thể của thư viện. Ngoài ra, nó có thể mở rộng hơn nhiều. Với Windi và Tailwind, bạn có một khuôn khổ đã thiết lập. Bạn có thể mở rộng chủ đề, nhưng tập hợp các lớp cơ sở được đặt trước. Với UnoCSS, bạn có thể chọn các giá trị đặt trước khác nhau hoặc thậm chí kết hợp chúng để cho phép bạn sử dụng các lớp tương tự như Tailwind, Tachyon hoặc thậm chí Bootstrap. Bạn cũng có thể dễ dàng thêm các lớp của riêng mình bằng RegEx. UnoCSS thậm chí còn có một cài đặt trước cho phép bạn sử dụng hầu hết mọi biểu tượng làm lớp CSS

CSS nguyên tử trong JS

CSS trong JS là một yếu tố đang phát triển khác của hệ sinh thái CSS. Nó giải quyết một số vấn đề tương tự mà CSS nguyên tử khắc phục nhưng vẫn có một số nhược điểm mà CSS nguyên tử khắc phục, như CSS ngắn gọn và các gói nhỏ. Để giải quyết những vấn đề này, một số người đã tạo các dự án hợp nhất CSS trong JS với Atomic CSS. Hai cách tiếp cận để thực hiện điều này có thể được đại diện bởi các dự án chiết xuất vani và Fela.

Tinh dầu vanilla

Vanilla-extract là project kết hợp giữa Atomic CSS và CSS trong JS. Về cốt lõi, vanilla-extract là một CSS trong thư viện JS. Ưu điểm chính của nó là bạn có thể viết CSS trong TypeScript bằng các đối tượng đơn giản và việc tạo chủ đề thật dễ dàng. Tuy nhiên, có nhiều tính năng hơn. Cái chúng ta sẽ tập trung vào là rắc. Sprinkles là một tính năng của vanilla-extract cho phép bạn xác định các lớp tiện ích của mình bằng cách sử dụng CSS của vanilla-extract trong cú pháp JS. Sprinkles cũng cho phép bạn sử dụng các lớp tiện ích một cách linh hoạt. Bây giờ, hãy nhìn vào Fela

mèo con

Fela là một dự án CSS trong JS cố gắng tận dụng các cải tiến về kích thước gói của các lớp tiện ích. Nó tự động chuyển đổi các quy tắc CSS thành lớp riêng của chúng và sử dụng lại lớp đó bất cứ khi nào bạn sử dụng cùng một quy tắc. Cách tiếp cận này cho phép bạn sử dụng một CSS quen thuộc trong cú pháp JS trong khi sử dụng các lớp tiện ích bên trong. Mặc dù mới, các dự án như Stylex của Facebook đã sử dụng phương pháp này và nó khá hứa hẹn cho những người không thích sử dụng trực tiếp các lớp tiện ích

Phần kết luận

Cảm ơn đã theo dõi toàn bộ bài viết. Nếu bạn thích bài viết này, hãy nhớ đăng ký nguồn cấp RSS và đăng ký nhận bản tin ByteofDev bên dưới. Tôi hy vọng hôm nay bạn đã học được điều gì đó về Atomic CSS

CSS Tailwind khác với CSS như thế nào?

CSS của Tailwind là giao diện người dùng hay chương trình phụ trợ?

Ai đứng sau Tailwind CSS?

Tailwind là CSS hay Bootstrap?