Day 21. CSS Architecture

Progressive enhancement is the concept of building with worst case scenarios in mind, and enhancing the experience as things get better.

It’s the exact opposite of Graceful degradation, which uses the more waterfall-like approach of building with the best case scenarios in mind and reverting to less enjoyable experiences if things get worst.

CSS is architectured in a way that supports progressive enhacement by default.

There’s 2 things I think makes progressive enhacement easy in CSS

• The Cascade: The styles defined last apply to target elements (Assuming equal specificity)
• The way CSS handles errors: CSS doesn’t crash when it encounters errors. If an unsupported CSS feature is used in a browser, CSS ignores it as if it wasn’t there.

Take for example; CSS Grids - We could first make a layout that looks alright without CSS Grids and modify it to use Grids if available in the browser.

Versus: Using CSS Grid by default and fixing layout on browsers that don’t support them.

That’s all for today. It’s been crazy at work and I find it difficult going really deep into the topics while working on a few other projects. I’ll have to pause the exercise and continue some other time.