The CSS Reset 2021 – And Beyond
Is a CSS Reset Still Needed in 2021?
A CSS reset has never been needed, so the short answer here is no.
However, a simple CSS reset will help to make your project easier to keep uniform or close to it across all browsers and devices, so while not needed it’s pretty handy to have.
Is it Even Good to Reset CSS?
This often depends on who you’re talking to, some have pretty strong feelings on the topic of resets. It’s also dependent on the situation, not every project is going to need a reset, for example, if you’re building a one-page lander it’s overkill to include a reset or normalize to the code.
What’s the Best CSS Reset?
This is another subjective question and a lot of designers will answer it based on some affinity they have for a specific reset library or reset creator.
My thoughts here is that the reset which does what the designer needs it to in the least amount of code is the best one for the job.
CSS vs. Normalize
I was reluctant to include this because it isn’t an apples-to-apples comparison. The fact is a CSS reset is designed to remove built-in browser styling, where Normalize was made to instead make the built-in browser styling more consistent from browser to browser.
For me personally, a reset is always easier and better than trying to normalize.
What’s the Difference Between Resetting and Normalizing CSS?
A CSS reset simply strips away the built-in browser stylings and lets the designer/developer apply the rules their project needs, as needed, to all browsers and devices.
On the other hand, Normalize works by fighting with all browsers, bending them to its will in order to “normalize” behaviors. This adds lines and layers of code and styles overwriting the built-in browser styles. More bloat and more processing.
Why Would You Use Normalize?
I wouldn’t, as described above I’d rather make elements uniform across browsers by simply stripping their built-in styling with a short reset then declaring the rules I want for the element in my CSS, which will then apply on any browser or device, than use a ton of code to fight various browsers and beat them into submission to do the same thing.
What I Use to Reset CSS
This is a very minimal CSS Reset, and while there are some minor differences that can appear across browsers with this, they’re rare and obscure at this point with most modern browsers being fairly uninformed it’s just better to tweak for a specific oddity if needed than have a huge and wasteful reset adding to the bloat of your CSS.
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
font-weight: normal;
margin: 0;
padding: 0; }
ol, ul { list-style: none; }
img {
height: auto;
max-width: 100%; }
How’s that for simple and direct?
You’ll notice right off that I don’t specify a font-size in the html, *, root, or body rules. I do this for mobile and more importantly, accessibility. From then on in my CSS all font sizing will be handled with proportional rem declarations, allowing the user’s device (and needs) to dictate.
I typically like to style my ol’s and ul’s myself rather than use the default bullet-points and padding, but if you prefer the defaults that’s one more line you can remove from this tiny reset.
You’ll notice I added an img rule with height: auto; and max-width: 100%; This is going to give any images I use on the site a generic responsiveness by default, though I’ll almost assuredly be adding PureCSS after my tiny reset which comes with the .pure-img class that will handle that better.
Speaking of PureCSS, it’s a minimal library of style modules that gives you a foundation for quickly producing a design layout with ease, much like Bootstrap does only without the bloated CSS code and with no JavaScript. Then you tweak and adjust the fine-tuning of specific elements for your design, rather than having a ton of unused and unnecessary CSS rules in your code that only exist for “might use” cases.
PureCSS does suggest using Normalize.CSS and including it before you bring in the PureCSS styles of your web page, however, I just use the tiny reset above instead. My thoughts on Normalize and why I don’t do it are already detailed above.
When minified (as your CSS always should be) and compressed before serving with gzip, PureCSS comes in at under 4kb in file size.
This is what I’m using for my projects at this time, and my client’s projects as well. What are you doing with yours? Tell me in the comments below I’d love to hear different ideas and methods.
My Favorite Tools & Services
The tools and services below, some I’m affiliated with and some I am not, are exactly what I recommend to paying clients based on value and quality.
WordPress & Web Hosting: BanProNET – Fast, secure, reliable web hosting for personal sites, small businesses, and national organizations since 2002.
Domain Names: NameSilo – I’ve had accounts with just about every domain registrar on the planet over the years, NameSilo by far is my favorite for simplicity and pricing, hands down.
WordPress Plugins: WPFavs listing of the common plugins I use and recommend to clients. You can import this list directly using WPFavs to save time by installing them all with a single click.
Content Writing: WriteMyArticles.com is among the most affordable content services out there, and unlike most that have different tiers of quality based pricing, WriteMyArticles delivers top-quality with every piece of content going through a researcher, writer, and editor’s hands before being delivered to the buyer.
Comments are closed.