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...)
  • Shorthand vs longhand: explicit is better than implicit. Longhand can be even more "performant". Some good candidates for shorthand however (especially if you need to set more than 1 settings) are the ones listed here.
    • Note: 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: