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;
  }

"Remove unused code"

• sometime we need to show all possible classes to be aware we have some hidden (e.g. used by JS scripts only) or possible elements that may need to be styles. To remove empty classes here I suggest that we create expanded comment block that includes unused classes.

"Sort attributes alphabetically"

• we group attributes for more convenient way to work with - e.g. text attributes collected in on place (size, weight, color), block, position etc. That makes work clean and quick. Sorting out the attributes in alphabetic will slow the work a lot and add missing or duplicating some attributes.
  If we need the sorting - we can do it on final step but this will still make the maitanance work inconvenient.

@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 )