Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# Good practices CSS/SASS
## Naming convention
Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)
## 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](https://stylelint.io/)
* a code formatter: for example [Prettier](https://prettier.io/)
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%.
```css
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](https://jakearchibald.github.io/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](https://css-tricks.com/using-css-transitions-auto-dimensions/)
* 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](https://github.com/philipwalton/flexbugs) if you find yourself with some issues.
*