Organize & write better CSS

[mittalyashu]

We are using SASS pre-process to write CSS styles, here's are a few examples of styles:

	Classes	Styles
1
2

The quality of the CSS needs to be improved, in terms of CSS class names and by applying some CSS principle.

We are using the BEM to write the CSS class name, and they also need to be re-named for a better understanding of each class name.

There are few styles which we still wrote in native .sass files, those styles also need to move to .vue file or make a separate component out of it.

CSS Principles

Grouping properties

background:
  color: #6d695c
  image: url("/img/argyle.png")
  size: 70px 120px
border-radius:
  top-left: 8px
  top-right: 10px
  bottom-right: 54px
  bottom-right: 10px

Colour Declarations

You might see a lot inside the Thermal codebase where color is used by its keyword name white and black. Keep the color value in rgba(255, 255, 255, .5), so even if we want to change increase the transparency in the color we have to just decrease the value of the fourth parameter.

Please: Do share your feedback/suggestion about how we can further improve the CSS.