Frontend best practices (Part I)

In this post, I will try to summarize some of the tips my team and i were using to write a quality code:

Naming

• When trying to name your variables or your components try always to make the name describe the purpose of the variable or function or component.
  Rule: If you need a comment to describe the purpose of variable/function/component most probably you didn't use an adequate name for your variables.
  It's okey if the name is long as far as it still making the purpose clear.

• One more thing you need to consider when choosing names is consistency.
  Assuming that you are creating a file Registration.js the styles of this file should be in registration.scss and if you have more files related to registration like RegistrationCTA.js as separate component for the call to action button you can use a folder called Registration to put all files together.

Styling:

1. Mobile first:

When trying to style your page, it is recommended to start by designing the mobile first then use media queries to design tablets and desktop.
This rule creates consistency between all your styles and all the team working on separate pages or other parts of the page. In addition it makes media queries simpler to understand for developers.

.registration-form__image {
  padding: __px-to-rem(40);
  margin: 0 __px-to-rem(20);

  @media (min-width: $tablet-breakpoint) {
    padding: __px-to-rem(80) __px-to-rem(40) 0;
  }
  @media (min-width: $desktop-breakpoint) {
    margin: 0 __px-to-rem(129);
  }
}

2. Common files:

When working on a project and you have recurrence of some values across files like colors, variables of media queries and mixins in this case it's recommended to create a common folder:

common
   |
   |__colors.scss
   |__queries.scss

his will help ensure consistency across project.

3. BEM naming:

Like any other rules that has a purpose to keep consistency in the project especially if there is a big team working on it they need to name Class Names using a standardized naming convention. For that you can use BEM to name all CSS classes.
CSS class is taking this format
block__element--modifier

Block
Standalone entity that is meaningful on its own.
form header footer section container menu
Element
A part of a block that has no standalone meaning and is semantically tied to its block.
title item list checkbox caption
Modifier
A flag on a block or element. Use them to change behavior or appearance.
color disabled highlighted checked

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Note: They better appear in css files in same order they are in your component.

Consider SEO and Accessibility

In next articles I will talk about both of them