У нас в проекте вся вёрстка из сделанного вами макета будет переводиться из html в slim (http://slim-lang.com/), а css стили в sass (http://sass-lang.com/).
- Верстать дивами, без таблиц, без css фреймворков. Таблицы использовать только в случае, если надо сверстать таблицу.
- Мы используем при вёрстке независимые блоки по аналогии с БЭМ. Блоки именуем с префиксом
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 {
...
}
- Не писать стили на #id, только на .классы. Иногда можно привязываться на теги внутри классов, но не стоит злоупотреблять этим.
- Не использовать css спрайты. Все картинки класть по отдельным маленьким файлам. Спрайты у нас построятся автоматически через compass (http://compass-style.org/).
- При вёртстке инлайновых элементов никогда не писать в коде пробелов, прописывать паддинги в стилях.
пример:
<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>
- Не использовать style="display:none;", вообще никогда никаких стилей в вёрстке, вместо этого пишите class="hidden"
.hidden {
display: none;
}
- Всю графику, что можно, делать через css, использовать как можно меньше фоновых картинок. Особенно актуально это для кнопочек: из текущих макетов "плохие" кнопки похоже только будут с треугольным краем, их скорее всего через css сделать не выйдет. Но если получится и их без картинок фоновых, то было бы замечательно.
- Поменьше использовать
absolute
иrelative
позиционирование для элементов. Если можно обойтись без них, то делать без них. - Поменьше использовать
float: left
, если можно обойтисьdisplay: inline-block
, использовать егоinline-block
. - Не использовать отдельные элементы для очистки
float
. То есть не использовать элементы со стилемclear: both;
только для того, чтобы очистить предыдущиеfloat
элементы. Вместо этого на контейнер вешать.clearfix
класс, который будет выглядеть примерно так http://www.positioniseverything.net/easyclearing.html - Как можно меньше использовать
!important
. Если можно обойтись без этого, перетасовав стили, то перетасовать их. - Все анимации, какие только можно, реализовывать через css3 transition (например раскрытие/сворачивание элементов).
$.animate
по возможности стараться не использовать. - Кнопки, которые не предполагают перехода на другие страницы, не делать ссылками
<a href="#">
, вместо ссылок использоватьdiv
илиspan
.
- Везде отступы (в файлах стилей, скриптов и вёртски) - по 2 пробела на уровень вложенности. Никаких табуляций.
- Не сливать стили в одну строчку. Вместо
:focus {outline: none;}
писать
:focus {
outline: none;
}
- Перед фигурной скобочкой 1 пробел. Вместо
.class{
писать.class {
- После двоеточия 1 пробел. Вместо
text-decoration:underline;
писатьtext-decoration: underline;
- Из атрибутов тегов писать первым класс, вторым id, остальное не важно в каком порядке.
Вместо
<input name="…" id="…" class="…" />
писать<input class="…" id="…" name="…" />
- Группировать стили по самому первому классу в цепочке. Картинка, как делать не надо: https://www.monosnap.com/image/qZWJRmY6LBoEGgEEhmE8avzfU
- Ни в каких файлах не должно быть не используемых в вёрстке стилей.
Нам нужны только скрипты анимации элементов: затухания, поворачивания, всплывание окон и подобное. Всю остальную логику мы будем писать сами, можно на это не тратить время, разве что самый минимум для самого себя, чтобы вёрстка работала в макетах.