SCSS

Basics

• The MDN full reference.
  Some remarks:
  • Child vs Descendant: children are direct descendants (like in graph theory). Children are selected with > while any descendant with .
  • Selecting an element based on 2 (or more) classes, attr etc: .hello.world { } for a <div class="hello world"/>.
  • CSS3: ':hover' is a pseudo-class vs '::after' which is a pseudo-element. Pseudo-classes can be used for state (active, checked etc), to react to user actions (hover, focus etc), to access directly elements of lists (first-of.., nth-of etc.) or validate stuff (). Some useful pseudo-elements are first-letter, first-line and selection (can't find a good use case for after or before...)

Styleguide

• Shorthand vs longhand: explicit is better than implicit but also simple is better than complex. The extra bytes argument against longhand is funny and also wrong in some cases. As a rule of thumb, go with readability. If the settings are of different values (e.g. solid 1px red;) shorthand is easier to understand. Some good candidates for shorthand are here.
  • NB: the shorthand order in box-related properties (e.g. padding and margin) is clockwise, while in grid-related ones (e.g. grid-area, grid-template) it's counter-clockwise.

CSS Grid

• CSS-tricks guide
• Grid garden game: not a complete reference but OK for a start
• Rachel Andrew's grid by example: