How to Make it Easier to Override Your Theme’s Styles

Overriding theme styles can be a problem for your users, and you should do everything you can to make it simple for them.

Your customer creates a child theme and adds new CSS.

Nothing happens. Why?

Because they have to override this selector: .excerpt .excerpt-content #excerpt-title.

Um… woops *blushes

Something you can do now: Un-nest any ID selectors in your SCSS.

What We Want

We want our users to be able to easily modify the way their site looks. We want them to follow our instructions on how to create a child theme, and be rewarded with easily overridden styles.

When a style doesn’t take effect because of a lack of specificity, there is no feedback. Nothing happens.

That’s frustrating. That is not how you want your users to feel. Here’s how you can make sure that never happens.

Limit SCSS Nesting

We all use CSS preprocessors. Nesting is great because it makes the styling easier to visualize and requires less written code.

However, if you keep nesting deeper and deeper, the inevitable conclusion is excessive specificity.

Here’s an example of overly-specific nesting:

.excerpt {

    .excerpt-content {

        #excerpt-title {
            margin-bottom: 1em;
        }
    }
}

As a rule of thumb, never nest an  ID. You don’t need to. If #excerpt-title was a class, this would still be challenging to override as well.

When you’re designing in browser and you need that quick, creative feedback, so you use an ID without thinking about the long-term implications, that’s okay. But, you have to remember to go back and undo any ID nesting that you’ve done.

When you tell a user to use !important, don’t you feel like you’ve failed, just a little bit? This can be avoided with less specific CSS.

Include a Child Theme for Them

Let’s do something extra for our users.

Instead of giving them instructions for adding a child theme and asking (read: begging) them to create one, lets simply include it for them.

It never occurred to me how easy this is. I got the idea from this post (read it, it will make a better theme developer) and I’ll never go back now.

Add a Child Theme Specific ID to the Body

Kudos to +Thomas Scholz for this tip.

The order of implementation of stylesheets isn’t always predictable when the parent theme uses multiple conditional stylesheets, or uses style.min.css instead of style.css.

To make sure it’s easy for your users to override any styles, simply replace your body tag with this line of code:

<body id="<?php print get_stylesheet(); ?>" <?php body_class(); ?>>

This will give the body an id based on the name of the current stylesheet allowing your users to prepend any selector with that ID to easily override any styles.

Implementing these steps will make for fewer support tickets and happier customers.

Related Posts