In my initial days of working as a Web-designer, much of the bugs encountered by our QA guy were because of some edge cases that we don’t generally consider while writing our styles.

Having a component with dummy data might not reflect the side-effects of having real-world data, things like number of words in a title, number of cards in a slider, amount of words in a button, won’t be fixed to a certian number.

You will always have to make your components and layouts ready for such edge cases.

Last year, I came across this great article from Ahmed Shadeed, called Defensive CSS, where he demonstrated a whole lot of such cases where our general assumptions as a designer may go wrong, or there can be some edge cases we don’t even think about that can lead to a complete layout breake and eventually, a very bad user experience.

You can have a read, it’s full of very detailed and real-world examples.

The article got quite a lot of popularity as a term Defensive CSS and the author decided to put it into a whole new Series or collection.

Recently, defensive.dev came into light, with a new article and so many tips.

This resource is a must go-to guide if you’re an aspiring Web-designer, especially if you love writing Vanilla CSS.