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
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?
Top comments (15)
I started using Tachyons a couple of years ago and have never looked back.
Every-time, I dive into a project not using a modular framework a part of me dies.
So, If you are not yet on this camp, stop whatever your doing now, plough through the hazy beginning and enjoy the kool-aid.
The last time I experienced this, was when switching from AI to Sketch!
I love CSS but I loathe atomic CSS toolkits with a passion.
I'm a fan of the classic rule of having HTML for the content and CSS for the presentation. Atomic CSS basically puts the presentation in HTML, and to me it's just a little more convenient than writing everything in the
styleattribute.I don't want to flood my markup with lengthy class attribute. I want to keep it as clean as possible. I want to see the content there. Atomic CSS fails me hard there.
Good points. The one thing I haven't yet seen a deep discussion on is (although I hate the word) SEO. It'd be interesting to know if the rise of the utility-first css frameworks are having a negative impact on SEO (more markup to less content ratio) in Google. As the video liked by @juelo it seems there is a performance boost with utility first (when gzipped), but rankings??
CSS classes don't affect SEO and won't do it in the foreseeable future. And there's a reason for that: sites that don't use semantic class names have never been penalized for that and changing that would have a huge impact. And backlash.
Although modern crawlers could potentially infer more meaning from CSS (it's not like Google doesn't have the capability), there's no reliable way to tell how much you can infer and even if it's not actually misleading. For example, what if a class has been removed from the stylesheets but not from the markup? Or if it's been completely overridden?
Moreover, there are frameworks that completely mangle class names when compiling the project. Google's homepage itself is a classic example of this!
The performance boost of atomic CSS is one of the main advantages, but hardly noticeable on average. CSS isn't normally what makes a page stutter or load slow 😉
That's a fair point. This video compares and contrasts semantic and atomic css patterns. Maybe give it a watch!
I just have, thanks for the suggestion!
Sadly there's nothing new for me. I know the good points of atomic CSS (or utility-first CSS), but they haven't bought me. Maybe I'll write an article about it.
It's not like I'm completely against utility classes, actually. I've reached the conclusion that using a few is quite beneficial in terms of development velocity and maintainability. Like
.uppercase, or.text-small. For the rest, I think there are better solutions.Of course I will never despise those who prefer atomic CSS. They may be smart people moved by legitimate reasons, like in the video. But, as a developer with a healthy relation with CSS and its semantic approach, I believe the compromises that come from a utility-first toolkit are not worth it.
In the end my main goal is to have a markup the looks like the final example in this article of mine: even classes would be rarely used.
I've only played with Tachyons. I'll need to invest a bit more time there sounds like
I'm really liking conic gradients, and the possibilities of CSS Houdini! How bout you?
Houdini looks great! I love it!
Unfortunately, its development is not really swift... It's taking years, really. I'd like to see something more for the other modules: layout, animations, fonts, parsing...
And much wider adoption, of course.
I swear by tailwind!
It's literally made me go from being afraid to touch CSS to being happy to get to work on my personal designs :)
It is fancy! I actually started to create my own css framework based off of css grid (wilsmex.github.io/gridwork/) and realized I was basically re-creating tailwind with what I was wanting to do... :)
Yeah, still a ways out!
Empezando a amar css / gracias.
Asi asi y de nada!