- Prefer to use
em
/rem
rather thanpx
rem
is the browser's default size - usually equal to16px
em
is relative to it's parent's sizing
- Consider which sizing makes most sense - should the sizing increase if the parent's increases (
em
) or should it remain constant (rem
).
- Always move colours into a separate file and reference through CSS variables
var()
- Colour pallette should be declared in
:root
- When an element may take colours from other classes, declare colour variables at the top of the element's class
This will allow for modifier classes to change the colours where applicable
.element { --color: yellow; --background-color: black; color: var(--color); background-color: black; }
.element--inverted { --color: black; --background-color: yellow; }
Naming is hard
- Use BEM methodology
- Block
.navigation
- Element
.navigation__list
- Modifier
.navigation__list--dark
- Block
- Avoid tageting HTML tags
.navigation { ul { } }
- Avoid nesting where possible
- Nesting is useful for adding modifier classes.
.navigation__list { &--dark { } }
- Use
margin-inline-end: 1em;
rather thanmargin-right: 1em;
to help with right-to-left languages
- Keep
block
styles in separate files - Identify reusable patterns early
- Style and build generically
- Reuse where possible