Skip to content

Latest commit

 

History

History
206 lines (164 loc) · 15.4 KB

FRONTEND.md

File metadata and controls

206 lines (164 loc) · 15.4 KB
  • Используй SASS @import, @mixin, concerns и т.д.

Webpack, настройки

  • Для всех проектов используется только webpack. Запрещено использовать sprockets, gulp, grunt и т.д. для создания новых проектов
  • Используй наш конфиг webpack

Организация файлов в webpack

webpack
├── common # миксины, переменные специфичные для этого проекта
│   ├── mixins.sass
│   ├── variables.sass
│   └── index.sass # импортирует два предыдущих файла для удобного импорта через import "~common";
├── layout # общий CSS, не входящий в блоки (формы, текстовый контент и т.д.)
│   ├── page.sass
│   ├── forms.sass
│   ├── typography.sass
│   ├── grid.sass
│   ├── icons.sass
│   ├── formstyler-theme.sass
│   └── buttons.sass
├── fonts # Шрифты
│   └── fonts.sass
├── vendor # нежелательная папка - сторонние плагины которые никак невозможно получить из NPM
│   └── ancient_plugin.js
├── blocks # блоки, разделяемые между несколькими страницами
│   ├── header
│   │   ├── index.sass # стили блока должны начинаться с класса .header
│   │   ├── index.es6  # отсюда импортируй sass, import "./index.sass"; этот файл можно не создавать если js нет.
│   │   └── extra.es6
│   ├── footer.sass # Допустимо но нежелательно не создавать отдельную папку
│   └── index.es6 # импортируй здесь все блоки
├── pages # CSS отдельных страниц
│   ├── news
│   │   ├── index.sass # для небольших контроллеров (до 50 строк css) объедини все экшены в 1 файл
│   │   ├── show.sass  # разбивай большие контроллеры на отдельные action
│   │   └── index.es6
│   └── projects
└─ application.es6 # импортируй здесь все нужные блоки и страницы

Общие требования к фронтэнду

  • Картинки должны быть ресайзнуты до нужного размера и оптимизированы. Добавление в верстку вещей больше 700кб (картинок и т.д.) возможно только если это абсолютно неизбежно и по согласованию.
  • Не используй compass (он умер)
  • Используй autoprefixer. Не используй вендорные префиксы.
  • На сайтах с "подвалом" обязательно использовать технику sticky footer
  • Лого РС в подвале должно обязательно быть ссылкой, вести на наш сайт http://rocketscience.pro/ и что-то делать при наведении (как и любая ссылка)
  • Используй только проверенные плагины.
  • Используй только плагины из npm, не помещай их в проект
  • Нежелательно изменять код готовых плагинов
  • Весь CSS, использующийся только на одной конкретной странице, должен быть в отдельном файле, соответствующем этой странице. Все селекторы, относящиеся к конкретной странице, должны начинаться с класса .#{params[:controller]}_#{params[:action]}**
  • Избегай пустых тегов, особенно контентных <h2>, <p> и т.д.
  • Не используй контентные теги, напр. <h2>, <p>, <strong> и т.д если это не параграф текста.
  • Все шрифты и другие ассеты должны быть добавлены в проект, запрещаются внешние URL, в т.ч. CDN, Google Fonts и т.д.
  • Никогда не используй устаревшие теги https://www.w3.org/TR/html5/obsolete.html
  • Если у тебя есть вектор в макете, запрещено его растрировать, т.е. необходимо использовать его как SVG.
  • Включай box-sizing: border-box для всего проекта глобально
*
  box-sizing: border-box
  • Запрещено создавать классы из одного конструктора. Используйте функции.
  • Никогда не дублируй HTML для создания мобильной версии.

Названия классов

Именование клаасов должно быть единообразным по всему проекту. Допускается либо именование БЭМ

.header
  &__title
    color: red
.header
  .header__title= title

Либо именование блок + элемент

.header
  .title
    color: red
.header
  .title= title

Схема именования классов должна быть общим для всего проекта, запрещается использовать в разных частях проекта разные схемы.

Никогда не используй в CSS классы с префиксом js-. js- только для JS.

Используй префикс is- для классов состояния которые разделяются между CSS и JS (is-active, is-hovered). (только для именования блок + элемент, для БЭМ используем модификаторы БЭМ)

Если используешь именование БЭМ, получающиеся в результате имена классов должны быть не длиннее 4 слов или 40 символов.

Не допускается использование различных вариантов именования внутри одного проекта

Специфичность (классы vs. ids)

Запрещено использовать ID элементов для каких-либо целей (кроме исключительных случаев, когда это необходимо для работы стороннего кода).

Описание стилей для отдельного блока должно начинаться с класса или идентификатора этого блока. Избегай излишней специфичности селекторов (например, использования наименований тегов совместно с классами):

<ul class="category-list">
  <li class="item">Category 1</li>
  <li class="item">Category 2</li>
  <li class="item">Category 3</li>
</ul>

// namespace блока
.category-list {
  li {
    list-style-type: disc;
  }
  // ссылки хоть и являются вложенными в li, стилизуются одинаково в пределах всего блока
  a {
    color: #ff0000;
  }
}

CSS

  • Используй SASS синтакс
  • Используй SCSS синтакс для файлов в css синтаксисе, которые ты не хочешь конвертировать. Не пиши свой код в SCSS.
  • Избегай более чем трех уровней вложенности селекторов
  • Начинай селекторы с класса блока или страницы
  • Разумно используй z-index. В рамках одного проекта, блоки должны иметь разные группы z-index. Старайся выделять 10 уровней z-index на каждый блок, например от 20 до 30, и внутри блока использовать только z-index из этого диапазона.
  • Когда меняешь существующий элемент для конкретного случая, старайся использовать специфичные имена классов. Вместо .listings-layout.bigger используй .listings-layout.listings-bigger. Думай о том как ты будешь позже делать поиск по коду.
  • Не используй font-size: 0 для скрытия текста. Убирай текст из HTML.
  • Не используй font-size: 0 для удаления пробелов. Убирай пробелы из HTML.
  • Не пиши текст в свойство content. Допустимо использовать отдельные символы для иконок. Пример, как не надо делать: label:after {content: '\418\437\43C\435\43D\438\442\44C'}. Допустимый пример: .fa-home:before {content: "\f015"}

CSS ресет

Хорошие CSS ресеты:

  • Минимальный
*
  margin: 0
  padding: 0

normalize.css

sanitize.css

css mini reset

marx

Запрещенные ресеты:

  • Eric Meyer’s “Reset CSS” (Причина - засорение DOM инспектора)
  • Eric Meyer’s “Reset CSS” 2.0 (Причина - засорение DOM инспектора)
  • А также любые аналогичные ресеты с перечислением 5+ тегов в одном блоке: html5doctor.com Reset Stylesheet, CleanSlate, Typeset.css, minireset.css

Статичные текстовые страницы

Должны верстаться таким образом, чтобы в дальнейшем их можно было редактировать wysiwyg-редактором:

  • Привязка всей верстки классу-контейнеру .text_content
  • Внутри контейнера привязка к названиям тегов: <p>, <h1>, <h2>, <h3>, <ul>, <ol>, <li>, <blockquote>, тд.
  • Привязка к классам/id-никам только в случае невозможности задать однозначный селектор по названию тега
  • Если на странице есть сильно выбивающиеся графические вставки, можно разбить текст страницы на несколько блоков. Текстовые части обернуть в .text_content, графические - верстать как обычно

JavaScript

  • Используй отступ в два пробела.
  • Никогда не используй $.get или $.post. Вместо этого используй $.ajax и обязательно укажи обработчик и для success и для error.
  • Используй $.fn.on вместо $.fn.bind, $.fn.delegate и $.fn.live.
  • Используй $(() => {}) вместо $(document).ready
  • Запрещено подключение двух разных библиотек для одной и той же функции. Если происходит замена одной библиотеки на другую - она должна быть выполнена во всем проекте

CoffeeScript

  • Пиши новый JS на ES6, не используй для новых файлов CoffeeScript.

Готовые плагины / библиотеки

  • Используй плагины из NPM
  • Если для нужного тебе функционала есть готовый плагин, используй его.
  • Если плагин крив и ужасен, не используй его.
  • Не правь код готового плагина, если это не баг плагина.
  • Если поправил баг в плагине - сделай pull request.
  • Если тебе абсолютно необходимо поправить код в самом плагине:
    • Добавь в имя файла плагина слово modified
    • Вверху файла плагина, опиши суть и причину внесенных тобой изменений.
  • Никогда не добавляй в проект минифицированный JS (исключение - highslide и аналогичные по сложности библиотеки, находящиеся сразу в папке public).
  • Используй библиотеки, уже добавленные в проект. Избегай добавлять библиотеки, сходные по функционалу с уже добавленными в проект.
  • Удаляй библиотеки, которые более не используются в проекте.
  • Для больших проектов, подлючай библиотеки при помощи Bower, гемов, или другим способом, позволяющим отследить, откуда взята конкретная версия плагина.
  • Используй lodash если в проекте активно используется JS.
  • Используй momentjs если в проекте есть работа с датами, временем.
  • Не добавляй в проект старую версию плагина. Перед тем как добавлять плагин в проект, проверь нет ли новой версии.

Поддержка броузеров с отключенным функционалом

Желательно, чтобы если в броузере пользователя выключен минимально необходимый для использования сайта функционал (js, cookies и т.д.) пользователь видел сообщение об ошибке, а не сломанный сайт.

Поддержка масштабирования страницы пользователем

При масштабировании страницы броузера пользователем, допустимы небольшие визуальные косяки, никак не мешающие работе с сайтом. Недопустима сильно поехавшая из за зума верстка.