Rules in English

There're some frontend rules which must be followed according to code review and style guide.

BEM

Each component has parent dive whose name matches component name: component-name

Name child classes as parent-name + 2 underlines component-name__child-name

.logs {
  &__tabs {
    // стили
  }
}

You can save the link to parent class in the variable $this:

.logs {
  $this: &;

  #{$this}__tabs {
    // стили
  } 
}

Storybook

We use the library of components - Storybook. For example, there's a wrapper component for text: BravadoText

Buttons we wrap with BravadoButton (the last version at the moment I wrote the article - BravadoButtonV3)

Each component could be styled with various props. For example, size='md'

In Figma you should find the variant of BravadoText component under the tag field: BravadoText variant="semibold"

Themes and variables

There're light and dark themes in BravadoTheme.vue. Colors of texts, backgrounds and borders automatically switch between themes with prefix --theme-:

  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  color: var(--theme-sub_text);
  background: var(--theme-over_card);
  background: var(--theme-background);

You can add your custom Theme variables, but try to search for the color name in the project first and use it from standart variables.

There're mixins with basic paddings and shadows often used in Figma:

  @include mq('sm')
  @include elevation-01;

You can customise theme variables in BravadoTheme.vue: $baseLight, $baseDark

Pixel Perfect

QA use Chrome PixelPerfect Extension to check frontend PixelPerfect

Images and SVG

You should compress large images and svg

You can customize image sizes for different screen width: :srcset="${require(./images/man-in-saleshat.webp)}, ${require(./images/[email protected])} 2x, ${require(./images/[email protected])} 3x"

To change the icon color dynamically you should donwloand SVG and change fill to fill="currentColor". Then import it as Vue component and apply styles.

    TrashIcon: () =>
      import(
        /* webpackChunkName: "TrashIcon" */
        './assets/trash.vue.svg'
      ),
  },

<trash-icon class="jobs-back-office-note__delete-btn--color" />

Computed

Move class bindings from template to computed:

:class="{ 
        'jobs-back-office-profile-companies__table-head': true
}

  :class="tableClass"

Move more than 1 condition to computed:

v-if="rowsCondition.active || showDisabledRows"

v-if="activeAndDisabled"

Linters

There's a commit hook for automatic style fix lefthook.yml:

Install lefthook if it doesn't work from the scratch:

yarn add @arkweid/lefthook

Decorators

For the new components we use nuxt-property-decorators:

import { Component, Vue, Prop } from 'nuxt-property-decorator';

jinnyMcKindy/rulesEng.md

BEM