liquid

Фильтры

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

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>

liquid

Теги

Фильтры

Условия

Case-when

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

liquid & HTML, JS

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

HTML

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

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

Отступы