Gần đây tôi đã bắt tay vào một dự án thú vị: ra mắt một trang web mới theo phong cách tân Brutalist 8-bit sử dụng Astro. Thay vì chỉ xây dựng trang web, tôi quyết định tiến xa hơn bằng cách tạo một thư viện thành phần UI có thể tái sử dụng và có thể bảo trì lâu dài.
Giới thiệu AstroBits
Xin chào các bạn! Nó vẫn đang trong giai đoạn đầu, nhưng tôi khá hào hứng về cách nó đang hình thành. Tôi đã tạo các vấn đề GitHub cho tất cả các thành phần mà tôi dự định thêm vào, giúp tôi có lộ trình phát triển rõ ràng.
Phương pháp BEM: Một nền tảng vững chắc
Một quyết định mà tôi đặc biệt hài lòng là triển khai hướng dẫn BEM (Block Element Modifier) cho tất cả các kiểu, được thực thi thông qua các quy tắc kiểm tra lỗi. Nếu bạn không quen với BEM, thì đó là quy ước đặt tên tạo ra cấu trúc rõ ràng, nghiêm ngặt cho các lớp CSS của bạn:
- Khối : Thực thể độc lập (như .card)
- Phần tử : Các phần của một khối (như .card__title)
- Trình sửa đổi : Các biến thể của một khối hoặc phần tử (như .card--featured)
Tại sao BEM lại mạnh mẽ đến vậy đối với một thư viện như thế này?
- Tính mô-đun : Các thành phần vẫn độc lập và không bị rò rỉ kiểu dáng
- Khả năng đọc : Bất kỳ ai cũng có thể nhìn vào tên lớp và hiểu mục đích và mối quan hệ của nó
- Khả năng bảo trì : Giúp các bản cập nhật trong tương lai dễ dàng hơn nhiều khi cơ sở mã của bạn phát triển
- Khả năng mở rộng : Hoàn hảo cho các thư viện thành phần có thể được sử dụng trên nhiều dự án
Cấu trúc dự án
Tôi đã thiết lập một bộ sưu tập thành phần với một mô hình rõ ràng: mỗi thành phần sẽ có trang tài liệu riêng tại components/[slug]/index.astro. Điều này sẽ giúp bất kỳ ai sử dụng thư viện dễ dàng hiểu cách triển khai từng thành phần.
Nguồn mở và sẵn sàng đóng góp
Toàn bộ dự án được cấp phép theo MIT và có sẵn trên GitHub. Nếu bạn quan tâm đến tính thẩm mỹ cổ điển hoặc xây dựng thư viện thành phần với Astro, tôi rất mong nhận được ý kiến đóng góp của bạn! Những tính năng nào sẽ giúp thư viện này hữu ích nhất với bạn?
Hãy xem kho lưu trữ tại đây nếu bạn muốn đóng góp hoặc chỉ muốn tìm hiểu mã.
Tôi đặc biệt quan tâm đến phản hồi về:
- Ý tưởng thành phần phù hợp với phong cách thẩm mỹ tân thô sơ 8-bit
- Cải thiện khả năng sử dụng cho tài liệu
- Các tính năng tiện ích bổ sung sẽ giúp việc triển khai dễ dàng hơn
Bạn muốn thấy những thành phần theo phong cách cổ điển nào trong một thư viện như thế này?