CSS has evolved rapidly over the last 10 years. In an effort to stay abreast on some of the new fancy things css can do, I've created this practical guide for CSS in 2020. Watch the video or jump down after the video for a list of most of the features (& links) covered in the video.

Please consider subscribing to the YouTube Channel!

Part 1 - CSS Features - 1:06

grid-gap, column, custom-properties, box-alignment, @supports, scroll-snap, clip-path, mask, vw, vh, vmax, vmin, min-height: 100vh, caret-color:orange, ch units, CSS Angles - deg(), grad(), rad(), turn(), Conic (cone) Gradients

Part 2 - CSS Frameworks - 7:48

Tailwind
Bootstrap
Tachyons
Pure
Foundation
Materialize
Sematic-UI
Bulma
UIKit

Part 3 - CSS Future Features - 9:45

Houdini - Complete control over custom layout/rendering of CSS
Focus-within - Accessibility fixes for focusing within elements
prefers-* - Adjust UI/UX to user’s device preferences
Logical properties - Block-start, block-end, inline-start, inline-end
Position Sticky - Keep UI within viewport
Backrop-filter - Style adjustments behind an element
:is() - combine any() & mathes()
CSS sub-grid
CSS regions
CSS modules
Display:outer inner
size: w h, aspect-ratio
Custom elements -
#RRGGBBAA - specify alpha in 8 digit 'hex' mode
‘All’ property - reset of all properties on an element
font-variant: small-caps;
image-set() - specify image sources based on resolution
lab(), gray(), lch(), hwb() - new color modes
calc() min() max() clamp() sin() cos() - and more math functions

Part 4 - CSS Pre-processors - 14:34

SASS
LESS
Stylus
PostCSS

Part 5 - CSS Style Guides - 16:00

BEM
Atomic CSS
OOCSS
Suite CSS

CSS in JS -
Styled Components
CSS Modules
Styled JSX
Emotion
JSS
Glamor
Radium
Aphrodite

Part 6 - CSS Resources - 17:37

CSS Tricks
Smashing Magazine
CoDrops
A List Apart
Mozilla Developer Network
Codepen
FreeCodeCamp
Scrimba
CanIUse
Frontend Masters
Pluralsight
Lynda
Syntax (podcast)
Shop Talk Show (podcast)
Dev.to
DevTubers

I didn't cover many of the new things coming out, but this is already pretty large and can give you a great starting point for branching out into some of the new CSS and web tech!

Which features are you most eager to learn?

What CSS features are on your wish list?