If your CSS updates aren’t working as you expect, what’s the best way to troubleshoot it? It can be a bit of a rabbit hole, but here are 13 ways to check your CSS.
1. Have you saved the file?
Seems obvious, but absolutely worth double-checking.
2. Clear your cache
You’ll want to clear two, possibly three, caches: your site’s cache, your browser and your server cache (if you have one). You may not be aware of a server cache but some hosts, such as SiteGround and WPEngine, use server-level caching to speed up websites.
Clearing your cache is the browser equivalent of turning it off and on again.
3. Check for spelling/syntax errors
Is the selector spelt correctly? Is the punctuation and spacing correct in descendant selectors (i.e. is it nav.class
instead of nav .class
?
Another classic would be to forget to close the declaration, so your CSS looks like this:
p {
color: #fff
font-size: 1rem;
}
Notice how the color
is missing the semicolon? That means the CSS file will read that code like this:
color: #ffffont-size: 1rem;
Urgh!
4. Does your rule appear in the inspector?
Does it have a line through it? If so, your selector needs to be more specific.
In Chrome’s DevTools, the Computed tab can show you what’s being rendered by the browser and the rules being applied to a specific element: really handy for tracking down inheritance and specificity issues.
5. Does the style you’re overriding have an !important
in it?
Or is the style declared in the HTML element (e.g. <div style="color: #fff;">
)? If so, you can only override that with another !important
.
6. Is the element inheriting a default browser style?
This could be anything, so check the inheritance in the inspector.
7. Is the element wider/taller than you’d expected?
It might need box-sizing: border-box;
applied to it so that the width and height are calculated based on the size of the border-box rather than the content box (the default).
8. Is it a browser incompatibility issue?
This is much less of an issue than it used to be, but worth checking if the issue is replicated in another browser. The website caniuse.com is a great tool to help with this as well.
9. Have you validated it?
If you’ve got this far and nothing has worked, it might be worth popping it into the CSS Validator to check it’s valid CSS. CSS Lint is another resource to check out that will give some additional feedback on what you’ve written.
10. Try replicating the CSS and basic HTML structure in a tool like Codepen
If it works there, but not in your site, you’re likely dealing with an issue of inheritance or specificity. This is especially likely if you’re using a framework or template.
More advanced checks
If the rule is shown in the inspector but it’s not taking effect, there’s probably something not quite right.
11. Have you applied the rule to the correct element?
Often things need to be applied to the parent element, especially things related to the display
or position
properties.
12. Does the element have the right value for display
?
It’s always worth checking the display
property, especially if it’s inline
, inline-block
or block
. This might fix the issue, especially if you’re trying to apply a property that’s incompatible (or has no effect) when applied to the wrong one.
13. Can you actually apply that property to the element?
Not all properties can be applied to all elements. :visited
is a good example of this, but there are lots of others.
This article was originally published at cssfordesigners.com
Top comments (0)