sass-recommandation.md

Good practices CSS/SASS

Naming convention

Many exist, but we should look for SUIT CSS

Code formatting

Two tools are usually used for having a clean and nice organized code across all the applicaiton:

• a style linter: here the suggestion is stylelint
• a code formatter: for example Prettier

From here we can set some rules inside the IDE to keep the code clean: format on save setting, or a pre-commit hook that validates the code.
The main issue here is that sometime is difficult to put settings between the linter and the formatter that work together.

Responsiveness

Use REM instead pixel

One popular technique (there is a lot of discussion about it. The choice is yours):

It's all about changing the font-size for the html element to 62.5%.

html {  
  font-size: 62.5%  
}

The reason is that the default font-size for browser is usually 16px. It means now inside your application 1rem will be equal to 10px. This will help for the readability and maintainability of your code.

For mobile

• Increase the font-size on mobile
• Decrease or remove the paddings and margins

REM vs EM spacing

It has to be considered case by case. But in general:

• rem is more applied for horizontal spacing
• em is more applied for vertical spacing

Random things about SVG

• when you create a SVG, make it from the most small version you will use inside the website
• one tool to optimize your SVGs: SVGOMG
• if your SVG has some blurry, probably your paths are not enough specifics

Some questions

• animation on height:auto element:
  You are screwed :) . There is no miracle solution. Here you can find on this CSS Tricks article

• multiline text ellipsis:
  here it's even worse. there is no suitable solution !

• display:flex: is it possible to use it everywhere ?
  This has changed the way to use CSS, so no hesitation. The Flex main bugs are listed in this Github page if you find yourself with some issues.