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

Rate this post

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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...
Git

18/12/2022

Xử lý lỗi Git không thể tiến hành merge do merge.renamelimit
Khi bạn tiến hành merge nhánh phụ vào nhánh chính hoặc lên nhánh production, có thể xung đột xảy ra...