Развертывание

Установка зависимостей

cd spbgu sudo npm install

Запуск локального сервера статики

gulp watch

###Теперь должно быть доступно по адресу: http://localhost:3000

Стайл-гайд по CSS

BEM

Мы используем немного переделаный BEM в CSS.

Коротко о BEM

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

В HTML

<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

В 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).