sovofeel / nuxt-test

Архитектура проекта

Все презентационные компоненты должны расопологаться в ~components/base Все глобальные стили подключаются в ~assets/scss/_global остальные стили должны лежать в компоненте

---

Именование

1. Имя переменной – существительное.
2. Имя функции – глагол или начинается с глагола. Бывает, что имена для краткости делают существительными, но глаголы понятнее.
3. Имена однофайловых компонентов должны быть всегда в PascalCase
4. При использовании компоненты в шаблоне стоит писать в kebab-case например (html <base-button></base-button>)
5. Базовые презентационные компоненты должны начинаться с префикса Base (например, BaseButton)
6. Компоненты, которые должны иметь только один активный экземпляр, следует начинать именовать с префикса The (например TheHeader)
7. Если компонент имеет смысл только в контексте одного родительского компонента, то это отношение должно быть очевидным в его имени. (Например TodoList, TodoListItem, TodoListItemButton)

Имя каждого компонента должно соответствовать следующим критериям:

1. Понятное: в меру детальным, в меру абстрактным
2. Короткое: не более 2-3 слов
3. Произносимое: чтобы его можно было упомянуть в обсуждении
4. Имена компонентов должны состоять из полных слов, а не аббревиатур

---

Нотация классов

В основу мы положим БЭМ. Чтобы не тащить весь стек технологий БЭМа в свои проекты, мы его упростим. Разделитель между блоком и элементом в нотации — одиночный дефис. Разделитель перед модификатором — двойной дефис.

Если блок или модификатор содержат несколько слов — используется кэмел-кейс. При необходимости для обозначения проекта или крупного раздела проекта используется префикс с подчёркиванием.

Написать дефис быстрее, чем подчёркивание. Также написать один дефис проще, чем два.

Поэтому чем чаще используется сущность в названии класса, тем в меньшее количество действий его следует писать. Общие модификаторы — это отдельные классы. Пишутся кэмел-кейсом с префиксом is- без подчёркивания.

1. is-disabled — элемент неактивен;
2. is-active — активный элемент (текущий пункт меню или строчка в списке);
3. is-pressed — нажатый (приоритетнее использовать :active)
4. is-focused — в фокусе (приоритетнее — :focus);
5. is-hidden — спрятан через display:none;
6. is-invisible — спрятан через нулевую непрозрачность;
7. is-visible — видимый;
8. is-highlighted — выделенный;
9. is-animated — анимированный;
10. is-animating — анимируется прямо сейчас;
11. is-ready-for… — для скриптовых состояний;
12. is-big / is-small / is-large… — глобальные размеры блоков с фиксированными ширинами и высотами;
13. is-font-regular / is-font-big / is-font-small / is-font-large… — глобальные размеры шрифтов
14. is-font-green / is-font-color… — цвет шрифта;
15. is-bg-green / is-bg-color… — цвет фона.

Блок шапка: .header

Логотип в шапке, элемент: .header-logo

Логотип может быть также блоком: .header-logo.logo

Шапка с другим фоном: .header--greenBackground

Кнопка в шапке: .header-button.button

Кнопка в шапке, заблокированная. Общий модификатор: .header-button.button.is-disabled

Кнопка в шапке, заблокированная. Модификатор кнопки: .header-button.button.button--disabled

---

Форматирование

Для форматирования нам потребуется vs code и плагины для vs code vetur, prettier и eslint, конфиг для форматирования лежит в папке с проектом

---

Советы

Для избежания путанницы с путями при импортах используем ~ (обращение к корневой структуре, например '~/components/TheHeader' )

---

Оставляйте свойства простыми

Хотя Vue и поддерживает передачу атрибутов в виде сложных объектов, старайтесь избегать этого. Старайтесь ограничиться простыми типами JavaScript и функциями для этого. Не передавайте сложные объекты в компоненты-наследники.

Почему?

1. Используя для каждого свойства отдельный атрибут - API вашего компонента будет более наглядным.
2. Такой подход совместим с API к которому мы все привыкли у нативных HTML(5) элементов.
3. Созданые вами атрибуты будет легче понять другим членам команды.
4. При передаче сложных объектов сразу не видно, какие из его свойств далее используются, - это затруднит рефакторинг.

Как?

1. Используйте отдельные атрибуты для каждой опции и передавайте в нее примитив (флаг, строку, число) или функцию.

<!-- правильно -->

<range-slider
  :values="[10, 20]"
  min="0"
  max="100"
  step="5"
  :on-slide="updateInputs"
  :on-end="updateResults">
</range-slider>

<!-- неправильно -->

<range-slider :config="complexConfigObject"></range-slider>

Порядок именования

Template -> Script -> Style

Методы components -> props -> data -> computed -> watch -> methods; далее lifecycle methods (created, mounted etc)

<script type="text/javascript">
  export default {
    // обязательно не забываем имя к.
    name: 'RangeSlider',
    // можем использовать композицию уже существующих к.
    extends: {},
    // перечисление свойств и переменных
    props: {
  bar: {}, // еще лучше если по-алфавиту
  foo: {},
  fooBar: {},
  },
    data() {},
    computed: {},
    // когда внутри используются другие к.
    components: {},
    // методы
    watch: {},
    methods: {},
    // методы жизненного цикла к.
    beforeCreate() {},
    mounted() {},
};
</script>

Именование событий

В Vue все инлайн-выражения и методы компонента напрямую относятся к VM (ViewModel) и меняют ее состояние. При декларации собственных событий важно их грамотно называть, чтобы избежать сложности при дальнейшей разработке и использовании компонента.

Почему?

1. Разработчики могут использовать совпадающие имена, что может вызвать проблемы.
2. Полная свобода в выборе имён событий может также привести к проблемам с обработкой шаблонов.

Как?

1. В названиях событий стоит использовать кебаб нотацию kebab-cased.
2. Название компонента должно быть уникальным и отражать что в нем происходит, например: upload-success, upload-error или dropzone-upload-success, dropzone-upload-error
3. В именах компонентов лучше использовать только существительные и глаголы, например: client-api-load, drive-upload-success

Определяйте this как component

В контексте кода компонента Vue this всегда означает экземпляр самого компонента. Таким образом если вам понадобится обратиться к ней в другом контексте сделайте так, чтобы this означало component. То есть, не используйте устаревшие конструкции присваивания вроде const self = this;. Можно и нужно использовать component в Vue компонентах для этого.

Почему?

1. Присваивая this к переменной названной component напрямую укажет тем кто это будет использовать, что это означает сам компонент.

Как?

<script type="text/javascript">
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      console.log(this.hello());
    }
  }
};
</script>

<!-- неправильно -->
<script type="text/javascript">
export default {
  methods: {
    hello() {
      return 'hello';
    },
    printHello() {
      const self = this; // не нужно
      console.log(self.hello());
    },
  },
};
</script>