Troubleshooting CSS
Tags: css, tutorial, beginners, webdev
Published: 2019-08-13 09:41:34

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](http://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](https://jigsaw.w3.org/css-validator/) to check it’s valid CSS. [CSS Lint](http://csslint.net/) 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](https://cssfordesigners.com/articles/troubleshooting-your-css)_