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.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
