Cách đơn giản hóa CSS Tailwind bằng ESLint, Tagged Template Literals, và hơn thế nữa!

Sau nhiều năm phát triển, chúng tôi quyết định chuẩn hóa giao diện người dùng của một trong những sản phẩm quan trọng nhất của chúng tôi - bảng điều khiển đa ứng dụng của chúng tôi.

Chúng tôi đã làm điều này cho khách hàng và người dùng nội bộ (dễ sử dụng) cũng như nhóm sản phẩm của chúng tôi (quá trình thiết kế, ra quyết định và mã hóa dễ dàng hơn). Chúng tôi cũng cần phải điều chỉnh một cách nhất quán hơn với thương hiệu của công ty chúng tôi.

Để làm được điều này, chúng tôi đã xây dựng một hệ thống thiết kế nội bộ , được gọi là Vệ tinh.

Trong quá trình phát triển Satellite, chúng tôi đã xem xét các giải pháp CSS khác nhau cho thư viện UI, tất cả đều có ưu và nhược điểm: Saas , css module , css-in-js .

Sau khi xem xét các khung công tác tương tự như Bootstrap, chúng tôi quyết định dựa trên khung công tác CSS Tailwind CSS . Tại sao?

• CSS thuần túy (không có thời gian chạy JS) - tốt cho hiệu suất.

  
  

• Có xu hướng tạo các tệp biểu định kiểu CSS nhỏ hơn (sau khi xóa) - cũng tốt cho hiệu suất.

  
  

• Không chuyển đổi giữa tệp CSS và mã javascript của bạn trong khi phát triển các thành phần mới.

  
  

• Không lãng phí thời gian để cố gắng tìm tên tốt cho các lớp tiện ích.

  
  

• Giúp thúc đẩy tính nhất quán của giao diện người dùng.

  
  

• Cho phép bạn xác định một tập hợp các khoảng cách và màu sắc ánh xạ tốt để thiết kế mã thông báo (“Bảng màu bị hạn chế”).

  
  

Tuy nhiên… có một nhược điểm đối với Tailwind: khả năng đọc các thành phần phức tạp. Món súp Tailwind có thể khó tiêu khi bạn không quen với các tên gọi của nó.

Trong trường hợp của chúng tôi, nó còn tệ hơn vì chúng tôi phải sử dụng phiên bản có tiền tố của các lớp CSS ( stl- ) để tránh xung đột với CSS cũ của chúng tôi, thậm chí còn thêm nhiều tiếng ồn và độ dài cho các chuỗi tên lớp của chúng tôi.

Bài viết này cho thấy cách chúng tôi giảm thiểu vấn đề về khả năng đọc. Để bắt đầu, chúng tôi đã sử dụng một số kỹ thuật phát triển web, chẳng hạn như các ký tự được gắn thẻ và phép nội suy, để rút ngắn độ dài chuỗi của chúng tôi.

Sau đó, chúng tôi đã đơn giản hóa việc sử dụng các tên lớp bằng công cụ linter ESLint, cung cấp DX tốt hơn với hai công cụ:

• Một plugin ESLint, vì không có plugin ESLint-Tailwind chính thức vào thời điểm đó.

  
  

• Một phần mở rộng Visual Studio Code để đơn giản hóa việc sử dụng bằng cách cung cấp nhiều lớp của Tailwind. Tiện ích mở rộng ESLint VS chính thức không hoạt động với chúng tôi vì nó mong đợi một tệp cấu hình ( tailwind.config.js ) có mặt trong dự án, trong khi chúng tôi đã sử dụng phiên bản dựng sẵn vào thời điểm đó. Trong số các tác vụ khác, chúng tôi cần VS để làm việc với tệp cấu hình của chúng tôi.

  
  

Đó ít nhiều là nền. Bây giờ chúng ta hãy bắt tay vào thực hiện.

Tailwind - Tên lớp tốt nhưng có thể phức tạp

Tên lớp tốt

Khung CSS ưu tiên tiện ích như Tailwind đi kèm với một tập hợp lớn các lớp tiện ích có sẵn mà bạn có thể sử dụng trực tiếp trong HTML và JavaScript của mình. Các lớp này cho phép tính nhất quán trên toàn bộ mã.

Và chúng hoàn toàn có thể định cấu hình: với các tên lớp giống nhau, chúng tôi có thể dễ dàng gắn nhãn ứng dụng của mình bằng các biến thể. Do đó, việc sử dụng tên lớp CSS Tailwind cho phép chúng tôi tạo một tập hợp màu sắc, khoảng cách, phông chữ nhất quán - về cơ bản, tất cả mọi thứ là CSS - và triển khai một hệ thống thiết kế dễ thực hiện.

Nhưng các lớp Tailwind có thể trở nên phức tạp

Chúng tôi muốn đơn giản hóa việc sử dụng các lớp học của Tailwind.

Đối với điều này, chúng tôi đã sử dụng các kỹ thuật như ký tự mẫu được gắn thẻ, phép nội suy và điều kiện.

Chúng tôi bắt đầu với một chuỗi dài các lớp CSS như sau:

 const className = 'stl-inline-flex stl-items-center stl-justify-center stl-rounded-full stl-h-10 stl-w-10 stl-bg-blue-100';

Nhưng chúng tôi sớm nhận ra rằng điều này không dễ đọc. Ngoài ra, nó chứa nhiễu không cần thiết, chẳng hạn như tiền tố stl- , được sử dụng để tránh xung đột với các lớp khác.

Vì vậy, chúng tôi đã tranh thủ sự trợ giúp của các nghĩa đen mẫu được gắn thẻ để xóa tiền tố khỏi chuỗi. Chúng tôi đã tạo một thẻ stl :

 const className = stl 'inline-flex items-center justify-center rounded-full h-10 w-10 bq-blue-100';

Cuối cùng, chúng tôi muốn dễ đọc hơn. Vì vậy, chúng tôi đã thêm:

• Các dòng riêng biệt để dễ đọc hơn và nhóm các yếu tố chung
• Nội suy với các ký tự mẫu được gắn thẻ nội tuyến
• Điều kiện để có kiểu dáng thích ứng và mạnh mẽ hơn

Kết quả là một đoạn mã (CSS) thanh lịch:

 const className = stl ' inline-flex items-center justify-center h-10 w-10 ${round && 'rounded-full'} ${iscool ? 'bg-blue-100' : 'bq-red-100'} ;

ESLint - Dễ dàng sửa lỗi con người

Thanh lịch là một chuyện. Đúng là khác. Thật dễ dàng để viết sai chính tả các lớp học, đặc biệt là khi có nhiều lớp học để tìm hiểu ban đầu trong Tailwind.

Dưới đây là một ví dụ về những gì có thể xảy ra sai:

 cost className = stl 'felx space-between text-gray-200';

Bạn có thể phát hiện ra các lỗi không?

• Chuyển đổi chữ cái (felx cho flex)
• Các lớp không đầy đủ hoặc không tồn tại (khoảng trắng giữa)
• Cách viết của người Mỹ và người Anh (màu xám)

ESLint giải cứu - Tạo một Plugin ESLint

Chúng tôi cần xác minh rằng các lớp mà mọi người đã sử dụng có phải là các lớp chính xác hay không. Vì vậy, chúng tôi đã sử dụng công cụ linter ESLint để phân tích cú pháp mã, phân tích nó và báo cáo lỗi.

Chúng tôi đã tạo một plugin ESLint cho chất lượng mã và để báo cáo lỗi về tên lớp không tồn tại.

Đây là mã ESLint trung tâm thực hiện xác thực:

ESLint sử dụng cây cú pháp trừu tượng (AST) cho phép truy cập vào các dòng mã riêng lẻ.

AST về cơ bản chuyển đổi các chuỗi mã thành các nút, mà bạn có thể phân tích cú pháp dưới dạng các bộ sưu tập và phần tử.

Đây là phân tích về cách ESLint phân tích mã. Toàn bộ biểu thức là một node của kiểu VariableDeclataion :

Chúng tôi muốn phân tích cú pháp biểu thức ở phía bên phải, TaggedTemplateExpression .

Như bạn có thể thấy, có một lệnh gọi lại xử lý loại biểu thức này:

Trong lệnh gọi lại TaggedTemplateExpression , chúng tôi thu thập tất cả các chuỗi trong mẫu đó. Ví dụ:

• TemplateElement

  
  

• Literals

  
  

Sau khi thu thập xong, có một lệnh gọi lại đã đăng ký khác lặp lại các tên lớp đã thu thập và xác nhận xem chúng có tồn tại hay không.

Nó thực hiện điều này với bộ sưu tập, validClassNames :

Đó là nó.

Chúng tôi biết ngay rằng việc tạo plugin xác thực này là điều đúng đắn nên làm, bởi vì chúng tôi thực sự tìm thấy một vài lỗi chính tả trong hệ thống của mình, cũng như trong cơ sở mã bảng điều khiển hiện có!

Đề xuất đề xuất với tiện ích mở rộng VisualStudio ESLint của chúng tôi

Công cụ cuối cùng chúng tôi tạo là một tiện ích mở rộng trong Visual Studio Code. Sử dụng logic tương tự như trong plugin của chúng tôi, ESLint đề xuất các lớp typecript như một loại nhà phát triển.

Intellisense này giúp các nhà phát triển không phải đoán hoặc phải truy cập vào trang web Tailwind để tìm kiếm và tìm đúng các lớp.

Như bạn có thể thấy trong GIF, nó không chỉ đề xuất tên lớp mà còn hiển thị màu sắc hoặc biểu tượng hữu ích cho mỗi đề xuất.

Với Tailwind CSS và ESLint, chúng tôi có thể thực thi các tiêu chuẩn của mình (có thể truy cập nội bộ trên Github) bằng cách cải thiện DX trong việc triển khai chúng.