Требования к верстке

reqs.md

Общие требования

1. Все динамические картинки (те которые теоретически могут меняться через админку) делать с помошью тега <img> а не css-свойства background-image. Например, фотографии товаров, иконки разделов.
2. Верстать дивами, без таблиц. Таблицы использовать только в случае, если надо сверстать таблицу.
3. Не писать стили на #id, только на .классы. Иногда можно привязываться на теги внутри классов, но не стоит злоупотреблять этим.
4. Не использовать css спрайты. Все картинки класть по отдельным маленьким файлам.
5. При вёртстке инлайновых элементов никогда не писать в коде пробелов, прописывать паддинги в стилях. пример: <span><b>или</b> <a href="#tab1">регистрация</a></span> <span> <b>или</b> <a href="#tab2">вход</a></span> чтобы не было пробелов между тегами <span><b>или</b><a href="#tab1">регистрация</a></span><span><b>или</b><a href="#tab2">вход</a></span>
6. Не использовать style="display:none;", вообще никогда никаких стилей в вёрстке, вместо этого пишите class="hidden"

.hidden {
  display: none;
}

7. Всю графику, что можно, делать через css, использовать как можно меньше фоновых картинок.
8. Поменьше использовать absolute и relative позиционирование для элементов. Если можно обойтись без них, то делать без них.
9. Поменьше использовать float: left, если можно обойтись display: inline-block, использовать его inline-block.
10. Не использовать отдельные элементы для очистки float. То есть не использовать элементы со стилем clear: both; только для того, чтобы очистить предыдущие float элементы. Вместо этого на контейнер вешать .clearfix класс, который будет выглядеть примерно так http://www.positioniseverything.net/easyclearing.html
11. Как можно меньше использовать !important. Если можно обойтись без этого, перетасовав стили, то перетасовать их.
12. Все анимации, какие только можно, реализовывать через css3 transition (например раскрытие/сворачивание элементов). $.animate по возможности стараться не использовать.
13. Кнопки, которые не предполагают перехода на другие страницы, не делать ссылками <a href="#">, вместо ссылок использовать div или span.
14. Семантическая верстка. Это означает, что все теги и элементы страниц применяются строго по назначению. Например, свойство background-image используется для изображений, не несущих смысловой нагрузки, списки оформляются с помощью <li>, <ul> и <ol>, цитаты — с <blockquote>, заголовки — с <h1>, <h2>, <h3> и т. п.

Оформление

1. Везде отступы (в файлах стилей, скриптов и вёртски) - по 2 пробела на уровень вложенности. Никаких табуляций.
2. Не сливать стили в одну строчку. Вместо :focus {outline: none;} писать

:focus {
  outline: none;
}

3. Перед фигурной скобочкой 1 пробел. Вместо .class{ писать .class {
4. После двоеточия 1 пробел. Вместо text-decoration:underline; писать text-decoration: underline;
5. Из атрибутов тегов писать первым класс, вторым id, остальное не важно в каком порядке. Вместо <input name="…" id="…" class="…" /> писать <input class="…" id="…" name="…" />
6. Группировать стили по самому первому классу в цепочке. Картинка, как делать не надо: https://www.monosnap.com/image/qZWJRmY6LBoEGgEEhmE8avzfU
7. Ни в каких файлах не должно быть не используемых в вёрстке стилей.