CSS

• Css được viết theo thứ tự element, từ parent tới child nhưng không nên quá 3 cấp. Hạn chế viết CSS quá nhiều cấp, chỉ nên tối đa 3 cấp để dòng css không bị dài:

• Sử dụng các class chung để viết CSS nhanh hơn:

• Đối với các svg icon, ưu tiên sử dụng thuộc tính color: currentColor, để đổi màu cho svg icon thay vì css trực tiếp trên svg:

• Các css nào được load ban đầu để layout được hiển thị thì sẽ viết trong file base.css, còn những css nào cần thao tác như click, hover,...thì có thể viết thành file riêng và load ở dạng defer để optimize.

• Hạn chế sử dụng !important

• Đối với các css hover, nên viết khi breakpoint ở màn hình desktop (1025px hoặc 1200px tùy theme).

• Khi viết breakpoint, viết max-width trước và min-width sau, không được đổi thứ tự ngược lại. Max-width sẽ từ kích thước lớn trước, Min-width sẽ từ kích thước nhỏ trước, không được viết lộn xộn:

• Phải có focus, focus-visible cho các phần tử có thể click được.

• Thống nhất cách đặt số cho class: 1,2,3,... hay là 01, 02, 03,...

• Đặt tên cho các class và id nên có sự mô tả, thể hiện được class đó đang nói về cái gì.

• Gộp các đoạn css giống nhau của các class khác nhau:

• Thêm chú thích cho các đoạn CSS trong một khu vực nhất định:

• Hạn chế sử dụng CSS inline

Các css từ Theme settings

Đối với các css được viết từ các setting trong Theme settings, tạo file variable.liquid viết thành dạng CSS variable ở file này:

Các css từ Section

Đối với các css được viết từ các setting trong riêng mỗi section, viết thành dạng CSS variable inline, hạn chế sử dụng thẻ <style> để viết css:

Sử dụng quy tắc BEM

• Khối: Gốc duy nhất của thành phần

• Phần tử: Một phần thành phần của Khối

• Modifier: Một biến thể hoặc phần mở rộng của Block

• Các phần tử được phân cách bằng hai 2 dấu gạch dưới ( __) và các phần tử sửa đổi được phân cách bằng hai 2 dấu gạch nối ( –)