Organizing CSS

Ideas from Kevin Powell vid.

Reduce complex selectors

Don’t use overly complicated selectors. It’s better and more readable to use more class names.

Create a hierarchy

This is especially important when not using a preprocessor like SASS or LESS.

You can even add a table of contents at the top of the page:

/* =========
   Contents:

   1. Layout

   2. Typography

   3. Components
     3.1 buttons
     3.2 cards
   
   4. Navigation
   ========== */

Refactor your CSS

This means re-writing it to simplify it, make it easy to read and reduce code. You can do this as you go along and also at the end.

Styling :focus

If you remove the outline from focus states: :focus { outline: none} replace it with something else. The easiest way is to just use the same styles for the hover state.