Các quy ước Code Standards Shopify dành cho lập trình viên
Mặc dù ngôn ngữ Liquid của Shopify tương đối dễ sử dụng, ta vẫn cần chú ý các vấn đề về code standard Shopify để thống nhất quy ước và chuẩn hoá tốt hơn. Dưới đây là các gợi ý của Code Tốt về vấn đề này.
Code Standard Shopify trong ngôn ngữ Liquid
Spacing trong Liquid
Có rất nhiều người thường quen viết:
{%assign title = 'About Us'%} {{title}}
Quy ước: Ta nên thêm 1 space vào trước và sau cặp dấu tag để đảm bảo dễ nhìn và thoáng hơn:
{% assign title = 'About Us' %} {{ title }}
Dấu trong Liquid
Thường trong cả markup cũng hay chia ra trường phái sử dụng dấu ngoặc đơn hay ngoặc kép. Ví dụ:
{% assign title = "Get Everything Up!" %} {% assign description = 'Could we move to an apple producing region?' %}
Quy ước: Ta nên sử dụng dấu ngoặc đơn mà thôi.
{% assign title = 'A great movement!' %} {{ 'logo_url' | asset_url }}
Tab Indent khi sử dụng “include”
Thông thường ta hay viết:
{% include 'hero', title: 'Visit our new room!', 'description': 'Grab a pint, a flight, or a 6-pack to go and enjoy some live music, food, games, and more.' %}
Quy ước:
- Nếu gán từ 3 biến trở lên thì nên xuống dòng.
- Nếu xuống dòng thì lùi vào 2 space.
Tức là ta nên viết như sau:
- Nếu chỉ có 1 hay 2 variable được gán thì viết liền 1 dòng.
{% include 'social-links', list: social_links, title: 'Follow Us' %}
- Nếu có từ 3 variable được gán, cần xuống dòng và thêm 2 space vào đầu mỗi line xuống dòng. Thường các editor không hỗ trợ thêm tab indent trong tình huống này nên ta phải tự thêm.
{% include 'newsletter', title: 'Subscribe to our Newsletters', description: 'Follow our latest news and promotions', button_text: 'Subscribe' %}
Code Standard Shopify trong postCSS/SCSS
Ngoài ra, ta còn một vài gợi ý trong khi viết CSS bằng postCSS hay SCSS cho Shopify.
Tách dòng với các thuộc tính
Nên tách dòng cho các thuộc tính bên trong, nếu sử dụng SCSS/postCSS
.button { padding: 40px 0; // Nên thêm 1 line empty này rồi mới tới :hover &:hover { } }
Tránh nesting class
Các thuộc tính override lại cần có cùng BEM Class structure, và nên viết từ extend.
Sai: Gán class của một module này cho module khác.
.card__image { .four-up__item {} }
Đúng: Đặt riêng class để có thể override lại
.card--four-up { .card__image {} }
Kết luận
Như vậy, cùng với mẹo lập trình Shopify và lỗi tránh whitespace trong Shopify những hướng dẫn về Code Standards cũng rất đáng quan tâm và lưu ý để sử dụng trong team để đảm bảo chất lượng code đồng nhất.
Bạn có thể đọc thêm Liquid For Designers để nắm thêm những quy ước khác.