При разработке необходимо использовать gulp или webpack.
Структура может быть различной в зависимости от проекта, но выделять
- компоненты
- стейты
- ресурсы (стили, скрипты, картинки), которые никак нельзя вынести в какой-то отдельный компонент
Пример структуры:
src/
--assets/
----javascript/
----images/
----stylesheets/
--components/
----header/
------script.js
------style.[scss|css]
------template.jade
--states/
----index.jade
----about/
------index.jade
----category/
------index.jade
------product/
--------index.jade
.gitignore можно составить с помощью сервиса. Обычно конфиг выглядит так.
Использование npm предпочтительнее bower.
В качестве шаблонизатора используется jade или handlebarsjs.
В качестве препроцессора используется scss. При желании можно использовать post-css.
Для сброса стилей используется normalize.css
Собранные стили желательно пропускать через csscomb. Конфиг .csscomb.json
Конфиг autoprefixer: browsers: ['last 2 versions'].
При задании имен классов следует придерживаться БЭМ нотации.
Следует избегать каскада.
Стили задаются классам, а не тэгам.
За добавлением вендорных префиксов следит autoprefixer.
При указании transition следует избегать all и указывать атрибуты, которые будут изменяться. Например: transition: color 0.2s ease-in;
Приветствуется указание will-change.
По возможности весь js желательно подключать внизу страницы.
Если можно обойтись без jQuery — обходимся.
Все что можно перегнать в svg — должно быть в svg. Иконочные шрифты не используем.