Trong dự án mọi người thường đặt tên cho màu thế nào?

40 lượt xem

profile picture

Ẩn danh

Ngày 12 tháng 07 năm 2023

Chào mọi người, mình đang làm frontend mà do nhu cầu công việc cũng phải đụng đến chút design. Trong styled-component mình đang dùng DefaultTheme { color : { red : ~~ ; blue : ~~; } , ...} để quản lý màu, nhưng mình đang không chắc nên đặt tên thế nào cho tiện... Mình đang định đặt kiểu red-0, red-1 theo thứ tự từ màu sáng đến màu tối, nhưng làm thế thì mình sợ ví dụ sau nếu mình muốn thêm màu vào dãy màu nào đó thì lại phải sửa tên của những màu khác trong dãy đó ấy... Cho mình xin kinh nghiệm của mọi người với ạ. Xin cảm ơn!

Đánh giá câu hỏi ngay!

Hãy ấn Up Vote với những câu hỏi cụ thể và chi tiết

Hãy ấn Down Vote với những câu hỏi chưa rõ ràng Careerly sẽ nhắc người hỏi chỉnh sửa lại.

1 câu trả lời

BEST

Ảnh đại diện của Tín Nguyễn

Mình thấy bài viết này khá hay, bạn có thể tham khảo thử xem: https://uxdesign.cc/how-should-you-name-your-colors-in-a-design-system-3086513476df Đại loại là sẽ có vài cách đặt tên phổ biến như sau: - Đặt đúng theo tên của màu. Ví dụ như red, green, yellow Cách này thì mình nghĩ chỉ nên dùng cho những project nhỏ nhỏ thôi, vì project lớn, có design có màu chủ đạo hoặc là chế độ ban ngày/đêm thì sẽ khá là khó để control. Hơn nữa rất khó để naming nhiều màu giống nhau. - Semantic naming: đặt tên theo ngữ nghĩa. Ví dụ như: primary, secondary, info, warning, danger, success. Này cũng rất phổ biến, vài thư viện css như bootstrap đang dùng, cũng khá là tiện. Ngữ nghĩa cũng khá rõ ràng, tường minh - Đặt tên theo ngữ nghĩa cộng thêm trọng số (100 -> 900). Ví dụ: red-900, red-600, blue-200, hoặc là primary-900, secondary-400. Cách này cũng khá phổ biến, tailwindcss cũng đang dùng cách này, mình thấy khá là tiện. Ngoài ra thì cũng có một vài thư viện sử dụng cách này như: Material CSS, Ant Design Cá nhân mình thì thấy cách cuối là ok nhất, khá là tiện, vừa sử dụng được theo ngữ nghĩa (eg: primary, secondary …), mà lúc cần cho nó nhạt bớt/đậm hơn thì có thể thêm trọng số vô sau.

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.

Xem thêm

Đồng ý với Điều khoản dịch vụ Chính sách bảo mật của Careerly

Bạn đã có tài khoản rồi?

Đăng ký ngay bây giờ để đọc toàn bộ câu trả lời!

Cộng đồng lập trình viên sẽ giải đáp tường tận cho bạn.