2022-11-24
1787
#css
Daniel Schwarz
141822
Nov 24, 2022 â‹… 6 min read

What should a modern CSS boilerplate look like?

Daniel Schwarz Previously, design blog editor at Toptal and SitePoint. Now I advocate for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, CreativeBloq, CSS-Tricks, and more.

Recent posts:

8 Reasons Your Next.js App Is Slow — And How To Fix Them

8 reasons your Next.js app is slow — and how to fix them

You don’t need to guess what’s wrong with your Next.js app. I’ve mapped out the 8 biggest performance traps and the fixes that actually work.

Chizaram Ken
Jun 20, 2025 â‹… 16 min read
how to truncate text in CSS (single and multi-line)

How to truncate text in CSS (single and multi-line)

Learn how to truncate text with three dots in CSS, and use two reliable CSS text truncation techniques while covering single-line and multi-line truncations.

Chinedu Okere
Jun 20, 2025 â‹… 10 min read
how to use the Interest Invoker API for better, more accessible UX

How to use the Interest Invoker API for better, more accessible UX

Explore how to use Google’s new experimental Interest Invoker API for delays, popovers, and smarter hover UX.

Emmanuel John
Jun 19, 2025 â‹… 7 min read
How To Build And Deploy A Web App With Bolt.new

How to build and deploy a web app with Bolt

Bolt.new revolutionizes how you build and deploy web apps with no-code development and seamless AI integration.

Isaac Okoro
Jun 19, 2025 â‹… 8 min read
View all posts

2 Replies to "What should a modern CSS boilerplate look like?"

  1. I totally disagree with most of your ideas.
    Changing the box-model is something I really wouldn’t do. I get that it can be a bit of a challenge to get your head around the standard box model at first, but once you get it has at least as many pros as it has cons, and as it is the standard way, it makes your CSS a lot more understandable for others that might have to work with it at some point.
    Valuing your own design over the needs of users, as you do with disabling borders and even worse outlines, is plainly rude and selfish. (That you try to be clever about t it by using focus-visible shows, that you are not totally ignorant. It might make it even worse though, as a lack of knowledge might be an excuse for a lack of wisdom…)
    You can do this for each element you actually carefully design and where you do offer good accessibility alternatives – I do it all the time. But you can never know if your client or her nephew at some point in the future will install a plugin that shows crucial elements that you made inaccessible with your laziness.

    Changin the root font-size because you want to make it easier to calculate things, that most likely should be handled totally differently (ever heard of CSS custom properties?) seem just foolish. Also, code examples with unitless values for font size or with? Really?

    Even if some of the standards of the web are disputable, your ‘solutions’ for the most part are worse.

Leave a Reply