Skip to content
Snippets Groups Projects
Select Git revision
  • 1cdce7f52052a21fd6e4db72434c30884fe34371
  • master default protected
  • improved-skeleton
  • xsrf-token
4 results

sass-recommendation.md

Blame
    • sass-recommendation.md 2.22 KiB

    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 application:

    • 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