cd spbgu sudo npm install
gulp watch
Мы используем немного переделаный BEM в CSS.
Всё на странице делится на блоки и элементы. У блока должны быть независимые стили, чтобы его можно было переиспользовать. Элемент наоборот имеет смысл только внутри своего блока.
<div class="foo">
<div class="foo__top">
<ul class="foo__top__menu">
<li><a>...</a></li>
<li><a class="foo__special-link">...</a></li>
</ul>
</div>
<div class="foo__bottom">
<div class="bar">
<h3>...</h3>
<p class="bar__descr">...</p>
</div>
</div>
</div>В примере .foo и .bar это блоки, .foo__* — элементы.
В элементах не обязательно указывать всех родителей
(можно .foo__special-link вместо .foo__top__menu__special-link),
И если получается сильно длинный селектор, то может стоит выделить
новый блок вместо очередного элемента.
Можно использовать просто теги (.bar h3, .foo__top__menu a),
но только если есть уверенность, что в этом или
дочерних блоках больше не встретится такой тег.
Например для p добавлен класс .bar__descr т.к. в .bar
может появится другой p, а h3 скорее всего будет один.
Модификаторы отделяются --:
<div class="bar bar--bigger">
<h3>...</h3>
<p class="bar__descr bar__descr--light">...</p>
</div>В CSS должно быть минимум вложенности селекторов, и другой специфичности. В большинстве случаев селектор — один класс.
/* плохо */
.foo .foo__top .foo__top__menu li a {...}
/* хорошо */
.foo__top__menu a {...}
/* плохо */
.bar__descr.bar__descr--light {...}
/* хорошо */
.bar__descr--light {...}
/* плохо */
.foo .bar .bar__descr { изменяем блок .bar когда он внутри блока .foo }
/* хорошо */
.foo .bar__descr { изменяем блок .bar когда он внутри блока .foo }Нужно стараться выделять переиспользуемые модули, и верстать так чтобы их было легко переиспользовать. BEM в помощь.
Стараемся мыслить не в терминах страниц, а терминах модулей. Верстается не страница, а модули. Потом модули используются, чтобы получилась страница.
Если получается выделить глобальные модули, кладем их в папку
css/includes/blocks/,
если нет, создаем css/includes/pages/<page_name>.styl и кладем туда.
И там и там BEM, но в pages/<page_name> блоки для конкретной страницы.
Стили блока не должны опираться на стили родительских блоков.
Например, если в родительском блоке указан шрифт,
а в дочернем используется такой же шрифт, в дочернем всё равно нужно это указать,
ведь дочерний блок может быть перенесен из родительского.
Но можно опираться на глобальные стили (normalize.styl и global.styl).