CSS in 2020 - A Practical Guide
Tags: css, webdev, tutorial, guide
Published: 2020-01-08 17:23:19

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!](http://www.youtube.com/FollowAndrew?sub_confirmation=1)
___
{% youtube QG8Zv_doPOM %}

###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](https://tailwindcss.com/)
[Bootstrap](https://getbootstrap.com/)
[Tachyons](https://tachyons.io/)
[Pure](https://purecss.io/)
[Foundation](http://foundation.zurb.com/)
[Materialize](http://materializecss.com/)
[Sematic-UI](https://semantic-ui.com/)
[Bulma](http://bulma.io/)
[UIKit](http://getuikit.com/)

###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 - <follow-andrew>
\#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](https://sass-lang.com)
[LESS](http://lesscss.org)
[Stylus](http://stylus-lang.com)
[PostCSS](https://postcss.org)

###Part 5 - CSS Style Guides - 16:00

[BEM](http://getbem.com/)
[Atomic CSS](https://acss.io)
[OOCSS](http://oocss.org)
[Suite CSS](https://suitcss.github.io)

CSS in JS - 
[Styled Components](https://www.styled-components.com)
[CSS Modules](https://github.com/css-modules/css-modules)
[Styled JSX](https://www.npmjs.com/package/styled-jsx)
[Emotion](https://emotion.sh/)
[JSS](https://cssinjs.org/)
[Glamor](https://github.com/threepointone/glamor)
[Radium](https://formidable.com/open-source/radium/)
[Aphrodite](https://github.com/Khan/aphrodite)

###Part 6 - CSS Resources - 17:37

[CSS Tricks](https://css-tricks.com)
[Smashing Magazine](https://www.smashingmagazine.com)
[CoDrops](https://tympanus.net/codrops/)
[A List Apart](https://alistapart.com)
[Mozilla Developer Network](https://developer.mozilla.org/)
[Codepen](https://codepen.io)
[FreeCodeCamp](https://www.freecodecamp.org)
[Scrimba](https://scrimba.com)
[CanIUse](https://caniuse.com)
[Frontend Masters](https://frontendmasters.com)
[Pluralsight](https://www.pluralsight.com)
[Lynda](https://www.lynda.com)
[Syntax (podcast)](https://syntax.fm)
[Shop Talk Show (podcast)](https://shoptalkshow.com)
[Dev.to](https://dev.to)
[DevTubers](https://www.youtube.com/watch?v=BZRLKDlSaAI)

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?