Рекомендации по оформлению кода

liquid

Теги

Открывающие и закрывающие теги всех видов отделяем от содержимого пробелами
Liquid
        
          

Плохо

{%if condition %}
  {{collection.title }}
{%endif%}

Хорошо

{% if condition %}
  {{ collection.title }}
{% endif %}

Фильтры

| обрамляем пробелами, после фильтра : без пробелов, применяемое значение - после пробела
Liquid
        
          

Плохо

{% assign var = collection.price_min| plus: 0|round:0 %}

Хорошо

{% assign var = collection.price_min | plus: 0 | round: 0 %}

Условия

Действия, выполняемые по условию переносим на новые линии, отбиваем отступами
Liquid
        
          

Плохо
{% if collection.subcollections.size > 0 %}Выводим подкатегории{% else %}Список подкатегорий пуст{% endif %}

Хорошо
{% if collection.subcollections.size > 0 %}
  Выводим подкатегории
{% else %}
  Список подкатегорий пуст 
{% endif %}

Case-when

В виду большого количества кода, стоит отделять условие when новой строкой от предидушего условия.
Liquid
        
          

Плохо
{% case tamplate %}
{% when 'product' %}
<!-- 1 -->
    {% when 'index' %}
      <!-- 2 -->
{% endcase %}

Хорошо
{% case tamplate %}
  {% when 'product' %}
    <!-- 1 -->

  {% when 'index' %}
    <!-- 2 -->
{% endcase %}

Переменные / сниппеты

1. Использовать _ - нижнее подчеркивание для разделения слов в переменных и названиях сниппетов.
2. Обрамлять = пробелами
Liquid
        
          

Плохо
{% assign new-variable="value" %}
{% include "mail-slider" %}

Хорошо
{% assign new_variable = "value" %}
{% include "mail_slider" %}

liquid & HTML, JS

Условия и вычисления

Стараемся избегать применение условий и вычисления в целевом фрагменте кода. Если требуется произвести проверку, нужно выполнить ее до и сохранить в переменую.
Основной посыл: целевой фрагмент должен легко читаться, не нужно разбираться в хитросплетении применяемых языков и их возможностей.
Liquid
        
          

Плохо
<div class="snippet_class {% if snippet %}snippet_class--{{ snippet }}{% endif %}}">
  <!--  -->
</div>

Хорошо
{% if snippet %}
  {% capture snippet_mod %}snippet_class--{{ snippet }}{% endcapture %}
{% endif %}}
<div class="snippet_class {{ snippet_mod }}">
  <!--  -->
</div>

 

Плохо
<script type="text/javascript">
$(function(){
  $( '.js-slider--index' ).owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    autoplay: {% if settings.index_slider-autoplay == '1' %}true{% else %}false{% endif %},
    autoplayTimeout: {% if settings.index_slider-timeout %}{{ settings.index_slider-timeout }}
    {% else %}{{ assign timeout = 5000 }}{% endif %},
  });
});
</script>

Хорошо
{% if settings.index_slider-autoplay == '1' %}
  {% assign is_autoplay = true %}
{% else %}
  {% assign is_autoplay = false %}
{% endif %}

{% if settings.index_slider-timeout %}
  {% assign timeout = settings.index_slider-timeout %}
{% else %}
  {% assign timeout = 5000 %}
{% endif %}
<script type="text/javascript">
$(function(){
  $( '.js-slider--index' ).owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    autoplay: {{ is_autoplay }},
    autoplayTimeout: {{ timeout }}
  });
});
</script>

HTML

Используем lowercase в названии тегов

HTML
        
          

Плохо
<SECTION>
  <p>Пример</p>
</SECTION>

Хорошо
<section>
  <p>Пример</p>
</section>

Используем двойные кaвычки в атрибутах

HTML
        
          

Плохо
<a href=# class=link>Ссылка 1</a>
<a href="#" class='link'>Ссылка 2</a>
<a href='#' class="link">Ссылка 2</a>

Хорошо
<a href="#" class="link">Ссылка 1</a>
<a href="#" class="link">Ссылка 2</a>

Отступы

В качестве отступов используем два пробела Каждый новый уровень вложенности отбиваем отступом
HTML
        
          

Плохо
<section>
<p>Пример</p>
</section>

Хорошо
<section>
  <p>Пример</p>
</section>

Плохо
<table>
<tr>
  <td>Текст ячейкe</td>
</tr>
<tr>
<td>Текст ячейкe</td>
</tr>
</table>

Хорошо
<table>
  <tr>
    <td>Текст в ячейкe</td>
  </tr>
  <tr>
    <td>Текст в ячейкe</td>
  </tr>
</table>