lp_cs_frontend_code_style.md

LP Corporate Server

Conventions

Use BEM

Class names accordingly to BEM

Good

  .block-name__elem-name_mod-name_mod-val {
    ...
  }

Bad

  .topMenuClear {
    ...
  }

File name the same as class name but with _ (underscore sign)

Good

application/top_menu_clear.scss for .top-menu-clear

Bad

application/top-menu-clear.scss for .top-menu-clear

Bad

application/topMenuClear.scss for .top-menu-clear

Bad

application/clear.scss for .top-menu-clear

Add styles by CSS classes, not by tags

Good

  .header_4 {
    clear: left;
    font-size: 14px;
    padding: 3px 0 8px 0;
  }

Bad

  h4 {
    clear: left;
    font-size: 14px;
    padding: 3px 0 8px 0;
  }

Bad

  h4.header_4 {
    clear: left;
    font-size: 14px;
    padding: 3px 0 8px 0;
  }

Structure

One responsibility - one file

Good: separated files

File: application_new/leftbar.scss

.leftbar {
  ...
}

File: application_new/leftbar_header.scss

.leftbar_header {
  ...
}

Bad: one huge file with many independent blocks

.leftbar {
  ...
}

.leftbar-header {
  ...
}

...

Put all CSS variables into one separate file with the name constants.scss

Put all CSS mixins into one separate file mixins.scss

CSS

Tabulation: Two spaces

Good

&:after {
  content: "";
  display: block;
}

Bad

&:after {
    content: "";
    display: block;
}

One attribute - one line

Good

&:before,
&:after {
  content: "";
  display: block;
}

Bad

&:before, &:after { content: ""; display: block; }

One selector - one line

Good

&:before,
&:after {
  ...
}

Bad

&:before, &:after { 
  ...
}

Separate blocks with one empty line

Good

@mixin button($color, $background-color, $hover-color, $hover-background-color, $padding: null, $border-radius: null) {
  color: $color;
  background-color: $background-color;
  border: none;
  
  @if $padding {
    padding: $padding;
  }

  @if $border-radius {
    border-radius: $border-radius;
  }
  
  &:hover {
    background-color: $hover-background-color;
    color: $hover-color;
  }
}

Bad

@mixin button($color, $background-color, $hover-color, $hover-background-color, $padding: null, $border-radius: null) {
  @if $padding {
    padding: $padding;
  }
  color: $color;
  background-color: $background-color;
  border: none;
  @if $border-radius {
    border-radius: $border-radius;
  }
  &:hover {
    color: $hover-color;
    background-color: $hover-background-color;
  }
}

Remove extra lines

Good

.leftbar-header {
  & { 
    align-items: stretch;
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
  }
}

Bad

.leftbar-header {

  & { 
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
    align-items: stretch;
  }
}

Bad

.leftbar-header {
  & { 
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
    align-items: stretch;
  }
  
}

No empty lines in the bottom of the file

Good

.leftbar-header {
  & { 
    align-items: stretch;
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
  }
}

Bad

.leftbar-header {
  & { 
    align-items: stretch;
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
  }
}

Remove useless comments

Bad

// Selectors mobile

.selectors-mobile {
  ...

Bad

File constants.scss

// -----------------
// Constants
// -----------------

$topbar_media_point_1: 72.5em;
...

Remove unused code

Bad

  &__website-link-text {
    //display: inline-block;
    margin-right: .3rem;
  }

Bad

.leftbar-menu {
  &__submenu {}

  &__li {}
  &__item {}
  &__item_active {}

  &__item_red {}
  &__item_faded {}

  &__item-link {}
}

Comments:

Good

// Inline comment 

/*
  Multiline comment,
  Used when text string exceeds 80 signs
*/

Bad

/***************************
  Common styles
***************************/

Bad

// ---------------
// Page
// ---------------

Sort attributes alphabetically (can be set up in editor)

Good

  & { 
    align-items: stretch;
    display: flex;
    flex: 1 0 100%;
    justify-content: right;
  }

Bad

  & { 
    flex: 1 0 100%;
    display: flex;
    justify-content: right;
    align-items: stretch;
  }

@galagan

"Remove unused code"
JS should NOT use CSS classes by convention, JS should use only data-attributes.
Please, don't collect empty unused code. If no styles defined - remove empty css blocks.

"Sort attributes alphabetically"
It allows avoiding code duplication, which I met quite often.
Ok, sort when you like, when you complete working with the page styles for example )