gistfile1.md

У нас в проекте вся вёрстка из сделанного вами макета будет переводиться из html в slim (http://slim-lang.com/), а css стили в sass (http://sass-lang.com/).

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

1. Верстать дивами, без таблиц, без css фреймворков. Таблицы использовать только в случае, если надо сверстать таблицу.
2. Мы используем при вёрстке независимые блоки по аналогии с БЭМ. Блоки именуем с префиксом b-.

Каждый блок помещается в отдельный файл. Префиксы для дочерних классов блока, как в оригинальном БЭМ, не используем (используем вложенные классы sass).

Используем лейауты с префиксом l- для каких-то верхних элементов, которые глобально определяют композицию страницы.

Все стили конкретной страницы, не умещающиеся по логике в блоки или в текущий лейаут, кладутся в класс текущей страницы. Класс текущей страницы должен быть только один на странице и должен начинаться с префикса p-.

Повторяющиеся на разных страницах элементы должно быть вынесены в блоки b-.

page.html

<div class="l-common-page">
  <div class="menu">...</div>
  <div class="p-article">
    <div class="some-page-element">...</div>
    <div class="b-menu">
      <div class="b-profile">
        <div class="image">
          <img src="..." />
          <span class="badge">...</span>
        </div>
        <div class="name">...</div>
      </div>

      <ul><li>Сайты</li><li>Проекты</li></ul>
    </div>
    <div class="another-page-element">...</div>
  <div>
</div>

Стили для подобной страницы должны получиться примерно такие:

styles/layouts/l-common-page.css

.l-common-page {
  ...
}
.l-common-page .menu {
}

styles/pages/p-article.css

.p-article {
  ...
}
.p-article .some-page-element {
  ...
}
.p-article .another-page-element {
  ...
}

styles/blocks/b-menu.css

.b-menu {
  ...
}
.b-menu ul {
  ...
}
.b-menu ul li {
  ...
}

styles/blocks/b-profile.css

.b-profile {
 ...
}
.b-profile .image {
 ...
}
.b-profile .image img {
 ...
}
.b-profile .image .badge {
 ...
}
.b-profile .name {
 ...
}

3. Не писать стили на #id, только на .классы. Иногда можно привязываться на теги внутри классов, но не стоит злоупотреблять этим.
4. Не использовать css спрайты. Все картинки класть по отдельным маленьким файлам. Спрайты у нас построятся автоматически через compass (http://compass-style.org/).
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, использовать как можно меньше фоновых картинок. Особенно актуально это для кнопочек: из текущих макетов "плохие" кнопки похоже только будут с треугольным краем, их скорее всего через 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.

Оформление

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. Ни в каких файлах не должно быть не используемых в вёрстке стилей.

Скрипты

Нам нужны только скрипты анимации элементов: затухания, поворачивания, всплывание окон и подобное. Всю остальную логику мы будем писать сами, можно на это не тратить время, разве что самый минимум для самого себя, чтобы вёрстка работала в макетах.