SCSS Best Practices - AndelaOSP/Andela-Socials GitHub Wiki

Introduction

In building frontend end application, it is necessary to write styles for the view. As the size of the application grows, it becomes harder to maintain and refactor such style. This is why quite a lot of persons implement writing css in modules or using SCSS. In using SCSS to write maintainable styles, here are some necessary tips.

File Structure

It is important to structure the scss files based on elements and the part of the project they are targeted. Hence, we expect to see a structure as such below:

├── /utils

│ ├── _animations.scss

│ ├── _easings.scss

│ ├── _grid.scss

│ └── _misc.scss

├── /components

│ ├── _header.scss

│ ├── _footer.scss

│ ├── _button.scss

│ └── _sidebar.scss

└── main.scss

From the above examples, all the scss files are imported into the main.scss file.

Name the colours

It is not easy to understand HEX value of colours. It is pretty easier to understand human readable names of colours like Blue, Black, Aquamarine, etc. It is imperative to convert the HEX value of our colours and assign them to an understanding variable. Use http://chir.ag/projects/name-that-color/ to convert a HEX value of a colour to the colour name and then assign it as a variable as shown below.

$gold = #ffd700;

This makes the scss file human readable and easy to understand

Write descriptive media queries

When writing media queries, target specific devices and apply the required style. Here is an example

    @media only screen and (min-width: 768px) and (max-device-aspect-ratio: 9/16){
	body{
		font-size: 20px;
        }
    }