Use--variable-name: 10px syntax to define a CSS variable. To apply it, use the var(--variable-name) to an element.
If you need to have a fallback value when using a variable, follow the var(--variable-name, 15px) syntax
Variables follow the same inheritance rules in CSS - a variable is available to use from the selector it was declared and all its descendants.
Global variables are declared using the :root pseudo selector
Grids
CSS grid items are content-box by default
Fractional unit fr is similar to percentages but in decimal form
Use repeat(NUMBER_OF_TIMES, 100px, 200px) to save you from retyping your columns or rows
Use grid-template-columns: span NUM_OF_MERGE to create a colspan or rowspan merge. Also applicable to grid-template-rows.
Use grid-template-areas to name your columns. This name can then be used with grid-template-column:[COLUMN_NAME] 100px or grid-template-row:[COLUMN_NAME] 100px to quickly define your measurements.
2D and 3D Transformations Functions
translate(30px, 10px) to position elements in the x and y axes from its parent element area in a 2D plane
rotate(90deg) for rotating an element in a 2D plane
transform-origin: 50% 50% | center uses the element's midpoint for rotation in a 2D plane
rotateX(45deg) rotates an element from the x-axis in a 3D plane - the element is upside down like a reflection when the angle of rotation is 180deg
rotateY(45deg) rotates an element from the y-axis in a 3D plane - the effect of a 180deg rotation makes the element appear like you are looking at it from behind
rotateZ(90deg) is the same as rotate(90deg)
scale(.5,.5) is a short hand for scaleX(.5) and scaleY(.5). It resizes the specified element on a 2D plane. A value lower than 1 makes the element smaller. A negative value gives it a rotation effect.
Misc
These default font sizes are all the same font-size: 100% | 16px | 12pt | 1em | medium
Superimpose background images by specifying multiple images when using background, e.g. background: url(image1.jpg, image2,jpg)
Use object-fit to specify scaling rules on image or video tags in relation to its container element