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:

1. Nếu gán từ 3 biến trở lên thì nên xuống dòng.
2. 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.