Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Общие соглашения по верстке фронтенда

При разработке необходимо использовать 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. Иконочные шрифты не используем.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.