Xây dựng Design System mà không cần tái tạo lại CSS

Design system thường rơi vào một cái bẫy.

Bạn bắt đầu bằng việc thêm các utility class. Bạn thêm các tùy chọn responsive. Bạn thêm các công cụ hỗ trợ layout. Chẳng mấy chốc, bạn xây dựng nên một cú pháp mới. Cuối cùng, bạn lại đang làm chính xác những gì CSS vốn đã làm.

Đừng cố gắng thay thế CSS nữa.

Thay vào đó, hãy xây dựng một lớp nằm trên CSS. Hãy tập trung vào mục đích (intent).

Các lập trình viên muốn sự linh hoạt. Nhưng sự linh hoạt lại mang đến sự phức tạp. Nhiều hệ thống phơi bày mọi breakpoint và tùy chọn layout. Điều này khiến markup trở nên khó đọc. Mã nguồn của bạn dành nhiều thời gian để mô tả cách xây dựng một layout hơn là mô tả layout đó làm gì.

Hệ thống trở nên khó hiểu vì nó cố gắng mô tả mọi thứ.

Hãy thay đổi trọng tâm. Đừng nghĩ quá nhiều về việc một layout được xây dựng như thế nào. Hãy nghĩ nhiều hơn về việc layout đó đạt được điều gì.

Hãy nhìn vào ví dụ này:

Điều này không thay thế CSS. Nó thể hiện mục đích.

  • Nội dung thích ứng với một grid.
  • Trên thiết bị di động, nó sẽ xếp chồng (stack).

Việc triển khai (implementation) nằm bên trong hệ thống. Đây không phải là về việc tăng thêm sự trừu tượng (abstraction). Đây là về việc giao tiếp tốt hơn.

Các giá trị mặc định (defaults) tốt sẽ hiệu quả hơn là việc cấu hình vô tận. Hầu hết các layout đều tuân theo các pattern phổ biến. Hầu hết các lập trình viên muốn sắp xếp nội dung, chứ không phải phát minh ra các hệ thống layout mới.

Một design system nên cung cấp các giá trị mặc định hợp lý. Nếu bạn cố gắng phơi bày mọi khả năng của CSS, bạn sẽ thất bại. CSS vốn đã mạnh mẽ và được tiêu chuẩn hóa.

Nhiệm vụ của một design system là:

  • Giảm tải nhận thức (cognitive load).
  • Tạo ra sự nhất quán.
  • Truyền tải mục đích.
  • Giúp các pattern phổ biến trở nên dễ dàng.

Hãy tự hỏi mình câu hỏi này khi thiết kế các API: "Liệu mình có thể hiểu được cái này sau sáu tháng nữa không?"

Đừng hỏi:

  • "Mình có thể cấu hình mọi thứ không?"
  • "Mình có thể hỗ trợ mọi trường hợp biên (edge case) không?"

Khả năng đọc (readability) có thể mở rộng. Sự phức tạp thì không.

Sự đơn giản không phải là một hạn chế. Mục tiêu là đặt sức mạnh vào đúng nơi nó thuộc về. Các quy trình làm việc (workflows) phổ biến nên giữ được sự đơn giản. Các quy trình nâng cao phải luôn khả thi.

Những design system tốt nhất tạo ra một ngôn ngữ chung. Chúng tập trung vào mục đích thay vì cách triển khai. Chúng giúp các lập trình viên truyền tải được mục tiêu.

Các lập trình viên không muốn xây dựng layout. Họ muốn xây dựng sản phẩm. Layout chỉ là một phần của công việc.

Nguồn: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41