css guide

css.md

Steps to better css

Step 1

Use normalize.css or a similar css reset. This will make browsers render more consistently.

Step 2

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%) }
}

Step 3

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

Step 4

Stick to animating opacity and transform most of the time. Other attributes tend to perform poorly.

Step 5

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; }
}

Step 5

Add a css hinting to your IDE, so you don't fuck up later on

Addendum

Sorry some steps are more guidelines than actual steps. They are important though. Follow them for a good time!