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

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
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...