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:

react toastify

React-Toastify (2025 update): Setup, styling & real-world use cases

Learn how to use React-Toastify in 2025, from setup to styling and advanced use cases like API notifications, async toasts, and React-Toastify 11 updates.

Chimezie Innocent
Apr 18, 2025 â‹… 18 min read
5 Best Open Source Tools For Cross-Browser CSS Testing

5 best open source tools for cross-browser CSS testing

Discover open source tools for cross-browser CSS testing like Playwright and BrowserStack to catch rendering errors, inconsistent styling, and more.

Peter Aideloje
Apr 18, 2025 â‹… 11 min read
react suspense data fetching

How to handle data fetching with React Suspense

With the introduction of React Suspense, handling asynchronous operations like data fetching has become more efficient and declarative.

Ovie Okeh
Apr 18, 2025 â‹… 10 min read
Use TypeScript Instead Of Python For ETL Pipelines

Use TypeScript instead of Python for ETL pipelines

Build a TypeScript ETL pipeline that extracts, transforms, and loads data using Prisma, node-cron, and modern async/await practices.

Muhammed Ali
Apr 17, 2025 â‹… 6 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