📝 CSS-Tricks 252: Nightmare CSS

View this newsletter on the web.

[Robin]: Stefánia Péter made a neat website called CSS Hell. It tells us what to avoid when writing CSS and I like this note about specificity:

Developers often write overly specific selectors just to be 10000% sure their rules will rule.

Stefánia then gives this example:

div#my-popup div span.my-radiocheckbox-label-text { color: #666; }

This is the sort of CSS that will lead to nightmares, but how do we fix it? Okay, sure, we can replace it with a single CSS class most likely:

.radio-label { color: #666; }

That’s a good first step but what happens when we find color: #666; a hundred times in our codebase? I’d say that specificity isn’t the problem in this case, but instead it’s the sign of a bigger problem with our system of styles. Is #666 some random color we want our label to be or all our labels?

We can simplify that further:

.label { color: #666; }

Or is #666 the secondary color we use throughout our website? In that case, we should have a variable that we can change to make sweeping changes within our codebase:

:root { --c-secondary: #666; } .label { color: var(--c-secondary); } .another-component { color: var(--c-secondary); }

Now, instead of fixing this one CSS problem (which can be annoying), we’re now solving system-level problems throughout our app.

It’s important to remember that specificity is always the sign of a bigger disagreement within a codebase and fixing those disagreements is the way to really make CSS scale across hundreds of components. It’s hard and annoying but it’s how you make sure the developers on your team and working as efficiently as possible and aren’t secretly arguing in your codebase.

Anyway, ranting aside, CSS Hell is riffing of Manuel Matuzović’s excellent HTML Hell that similarly walks through common mistakes and pitfalls when writing HTML.

Here’s Manuel on the problems with close buttons for instance:

In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.

Then Manuel gives us fifty different options for building a better close button for something like a modal and then talks about all those potential problems, too. Reading through all the different methods for this one particular thing reminds me that there’s never one way to build a website. There’s no easy guide for anything because all of these things are so very complex and nuanced.

Front-end development is hard! Who knew.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s