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:

A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 â‹… 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 â‹… 10 min read
Deploying Next.js apps with Deno Deploy

Deploying Next.js apps with Deno Deploy

For those just getting started with deploying their first application, Deno Deploy’s simplicity might be exactly what you need; no complex configuration files to wrestle with or cloud concepts to master before getting your app live.

Emmanuel Odioko
Feb 6, 2025 â‹… 5 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