Logo Netdevops

Why is WordPress ignoring my CSS?

Some time ago we were working on a really cool project. Seemed easygoing and pleasent. Until things got complicated and we discovered a really troublesome issue of ours.
Seemed like WordPress can’t see our awesome CSS code that was supposed to make our project look great!

At first we went through all the stages of denial. Then we discovered the sad truth:

WordPress really can’t see our CSS

As crazy as it sounds – it was true. So we had to find a solution for this issue and get to know what’s going on!

Turned out that there are lot of reasons why this might be happening; but the primary one is the heart of the “C” in CSS’s full name (“Cascading Style Sheets”) and how WordPress enqueues your style.css into it.

What is actually Happening!?!?

Here’s an example. Let’s say you have a child theme (we all do) and you added a plugin that has its own stylesheet(!). If you were to activate that plugin and then try to override the styles in your child theme, you’ll notice that it simply doesn’t work.

There is a technical explanation: The plugin is enqueuing its corresponding style.css with the wrong action. But the outcome is that the style.css is added later in your page therefore taking precedence over any style that precedes it.

To put it plainly: The plugin overwrites your style.css with its own.

Here’s an example: You have a plugin called “page beautifier” and let’s say this plugin makes fonts, pictures etc. “beautiful”

Now you want to actually add some css code to make text appear on the picture. So what you do is to add some html code to WordPress and adding some code to style.css.


/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

It seems easy. Everything works on your local machine…

And then crash. WordPress is not responding.

WHY!?

You made the class container that is overwritten:



.container {
 position: relative;
 text-align: center;
 color: white;
} /* ← this one doesn’t get applied */

/* Centered text */
.centered {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.container {
 position: centered;
 text-align: left;
 color: red;
} /* ← this one will be applied */

And your code loses all its sense.

Hence the term “cascading”. The same thing happens with multiple styles. If you want to make text red, and in another line you have forgotten about using the name already and adding some more text in green… the red one will be ignored (since it got overwritten)

What can we do about it then?

WordPress is not making it easy to find the handle of styles. How we handled our issue was just deactivating and throwing away the plugin that caused all the drama. The other thing you can do is to open up the files of the “trouble” plugin and search for “wp_enqueue_style”. The first argument in that function is that stylesheets “handle”.

Complications?

Like all the things in development and IT: everything may get more complicated ;).

WordPress filters all the plugins alphabetically. So if you are making a plugin with style.css you may get stuck. Also CSS specificity can make things more complicated! Themes tend to have their own style.css and some of them are extremely specyfic. So if you want to overwrite them, you need to turn on the OCD and be more specyfic than the theme developer.

Leave a Comment

Your email address will not be published. Required fields are marked *