Write Proper CSS: No More Resets

This is one in a series of byte-sized tips and tricks for upping your CSS game.

In an era of frameworks, compilers, component libraries, and data-binding, most who call themselves front-end developers are making less and less time to hone their CSS skills and architecture their CSS properly. The role of CSS in shaping user experience and application flow is undeniable, yet so many client-side developers appear unwilling to touch CSS with a ten-foot pole, viewing it as a black box better relegated to “Design” or else hacking away at it piecemeal and only where necessary.

I’ve seen the same attitude affect 99.9% of my students and peers, and, to me, it smacks of the I-couldn’t-learn-coding-because-I-was-never-great-at-math-in-high-school illusion. You don’t need to be a web developer to write well-architected CSS (and designers shouldn’t be worried about code architecture), and as a front-end developer, it’s a professional responsibility to fill that gap.

One step at a time, I aim to break down those walls.

No More Resets

If you’re unfamiliar with CSS resets, then (A) you may have missed a pretty fundamental step in accounting for CSS differences and quirks across different browsers, but (B) you’ve lucked out, because we don’t really need them so much anymore.

The web is pushing forward at a break-neck pace, and it can be tough to keep up most of the time; but in this case, our load as front-end developers has actually been lightened a touch! Browsers are getting better and better at unifying how they render CSS, and users are more and more engaging with web content using more stable and modern browsers and clients (looking at you, Internet Explorer and Microsoft Outlook users; seriously, stop that).

As a result, CSS resets — separate style sheets we had to link to our projects to effectively “reset” browser-specific styles — are going the way of the dodo, and I couldn’t be happier about it.

Now, we can rely on the simple universal selector in CSS:

* {
    margin: 0;
    padding: 0;
}

And done. That’s it. Or at least, that’s the most diminutive and basic version of a contemporary reset. The universal selector does exactly what it sounds like it does — it selects each and every DOM element in our HTML and applies the given style directives. As such, it would be an easy thing to expand this universal reset for more developer-specific style choices, such as:

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    vertical-align: baseline;
}

— for more a more customized reset.

Be careful, though, because the universal selector isn’t for everything. For example, font styles, which are extremely inheritable, would be redundant in a universal selector, when they could be more efficiently applied to the html selector (to inherit all the way down the element chain). But more on this later.

Evan is an illustrator, developer, designer, and animator who tells stories in any which way he can. When he’s not branding businesses or building front-end apps; he’s illustrating children’s books, painting for tabletop games, animating commercials, or developing passion projects of his own.