Các quy ước Code Standards Shopify dành cho lập trình viên

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

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.

Share vì hữu ích

Previous Article
Next Article
avatar
  Subscribe  
Notify of