Use normalize.css or a similar css reset. This will make browsers render more consistently.
Use a preprocessor
Divide your styles into various components and use one master file that imports them
Example
main.less
mixins.less
variables.less
base.less
typography.less
nav.less
...
Use preprocessor features sparingly. Strive to mimic css as closely as possible so that devs can be onboarded quickly. Use the core features that save lots of time but are easy to understand like variables and mixins. Advanced features like mixin guards and looping are smelly code smells.
Avoid deeply nested selectors using &
to reference
parent selectors. A good rule of thumb is no more than
one &
per selector:
Bad
nav {
& > a {
color: #00f;
&:hover { color: darken(#00f, 20%) }
}
}
Good
nav > a {
color: #00f;
&:hover { color: darken(#00f, 20%) }
}
Read this guide to writing efficient css and go file by file ensuring you don't do stuff like use universal selectors.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
Stick to animating opacity
and transform
most of the time.
Other attributes tend to perform poorly.
Design mobile first.
Start by assuming you are working on a mobile device first. Make lots of block elements. Remember Fitt's Law.
the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.
Basically, bigger targets = easier to click.
As you work with larger viewports, add media breakpoints to override styling.
Don't try to stuff everything under a single media query. Group media queries next to their related selectors.
Bad
ul > li { display: inline; }
img { display: block; }
@media (min-width: 768px) {
ul > li { display: inline; }
img { display: inline; }
}
Good
ul > li { display: inline; }
@media (min-width: 768px) {
ul > li { display: inline; }
}
img { display: block; }
@media (min-width: 768px) {
img { display: inline; }
}
Add a css hinting to your IDE, so you don't fuck up later on
Sorry some steps are more guidelines than actual steps. They are important though. Follow them for a good time!