Руководство фронтенд-разработчика по оформлению кода

HTML, БЭМ

Навигация

Для блоков с навигационными элементами (меню, списки ссылок в футере, категории и пр.) должен использовать тег <nav>. Списки ссылок нужно размещать уже внутри него:

Плохо:

<ul class="top-menu">
    <li class="top-menu__item">
        <a class="top-menu__link" href="#">Blog</a>
    </li>
</ul>

Правильно:

<nav class="top-menu">
    <ul class="top-menu__list">
        <li class="top-menu__item">
            <a class="top-menu__link" href="#">Blog</a>
        </li>
    </ul>
</nav>

В больших списках с подзаголовками (например, карта сайта), скорее всего, нужно будет сделать по-другому. Например, разбивать логические блоки ссылок на списки определений dl.

HTML в админке

Переменные Magento

Внутри переменных Magento нужно использовать одинарные кавычки, а для атрибутов HTML-элементов — двойные. Так мы получим красивую подсветку синтаксиса в редакторе и возможность выполнять автоформатирование:

<!-- Плохо, кавычки одинаковые. У подсветки синтаксиса и автоформата
сносит крышу, редактор не понимает, где заканчивается атрибут элемента: -->
<a href="{{store direct_url="business/mca"}}" data-type="1">

<!-- Хорошо, кавычки разные, редактор адекватно подсвечивает и форматирует код: -->
<a href="{{store direct_url='business/mca'}}" data-type="1">

LESS →