Suy nghĩ lại về CSS in JS

CSS là yếu tố cốt lõi giúp giao diện người dùng trở nên đẹp mắt và hữu dụng, nhưng khi quy mô tăng lên, việc quản lý CSS ngày càng trở nên khó khăn hơn.

Xung đột style, suy giảm hiệu năng và khó khăn trong bảo trì là những vấn đề khiến nhiều nhà phát triển đau đầu.

Bài viết này giải thích chi tiết một cách tiếp cận mới để giải quyết những vấn đề đó, đặc biệt là CSS in JS.
Bắt đầu từ bối cảnh lịch sử của CSS, bài viết bao quát nhiều chủ đề, từ các phương pháp styling hiện đại đến các design system của tương lai.

Cấu trúc bài viết như sau.

1. Định nghĩa và bối cảnh của CSS trong JS
   1. CSS trong JS là gì?
   2. Bối cảnh của CSS trong JS
2. Bối cảnh lịch sử của CSS và thiết kế
   3. Bối cảnh của CSS
   4. Bối cảnh của thiết kế
   5. Bối cảnh của design system
3. Phân tích các phương pháp quản lý style và đề xuất mới
   6. Việc quản lý style trước đây được thực hiện như thế nào?
   7. Nên quản lý style như thế nào?
4. Kế hoạch triển khai cụ thể CSS cho JS
   8. Tại sao JS lại có CSS?
   9. Giới thiệu dự án mincho
   10. CSS thân thiện với CSS trong JS
   11. CSS có khả năng mở rộng trong JS
5. Tích hợp với design system
   12. CSS trong JS cho design system

Đặc biệt, bài viết này giới thiệu phương pháp luận SCALE CSS và một khái niệm mới có tên StyleStack, đồng thời đề xuất dự án mincho dựa trên đó. Mục tiêu là hiện thực hóa CSS thân thiện và có khả năng mở rộng trong JS.

Mục tiêu cuối cùng của bài viết là gợi mở khả năng về một giải pháp styling tốt hơn cho nhà phát triển, nhà thiết kế và các bên liên quan khác của dự án web.
Dù là một bài viết dài, xin cảm ơn bạn đã đọc.

[savvykang]

Xin lỗi vì đây không phải là ý kiến hưởng ứng dự án, nhưng tôi nghĩ ngành frontend nên có góc nhìn dài hạn hơn và xây dựng những công cụ hay convention được đồng thuận rộng rãi. Từ góc độ của một người đã trải nghiệm kha khá stack như SCSS, LESS, AngularJS, Angular 2.0, React, tôi cảm thấy các công nghệ frontend mới đang bị over-engineering quá mức cần thiết và khá tốn kém, lãng phí.

[slowandsnow]

Nếu nói về sự đồng thuận trên web thì đã có các tiêu chuẩn web. Trong CSS, các tính năng như lồng nhau kiểu SCSS đang được đưa vào, và các chủ đề như class, các phương thức lập trình hàm, web component, v.v. cũng liên tục được thảo luận và bổ sung tính năng.

[alstjr7375]

Theo tôi, có lẽ vì bản thân frontend mới phân hóa chưa lâu nên người ta vẫn đang thử đủ thứ.
Từ các thư viện như React, Vue cho đến bundler, lint và tooling nói chung đều vậy.

Hơn nữa, khác với mảng ứng dụng, cũng không phải chỉ một công ty quyết định rồi phổ biến best practice, nên có vẻ mức độ hỗn loạn cũng lớn hơn nhiều!!