Quick Steps for Finding CSS Issues


Do you hand code your cascading style sheets (CSS)? Maybe you prefer working with a preprocessor. Whatever tools you employ to do your job, if you design websites, you’ve probably run into an issue that you could trace back to CSS.

CSS standards, for a brief moment, seemed stable and reliable. Then the rapid proliferation of smartphones and tablets brought a new wave of technological change. Proposed specification changes to keep up with these advances resulted in dozens of modules in various stages of maturity and stability. Additionally, browsers provide varying levels of support for these in-development CSS 3 and 4 specification changes. Doesn’t it seem like the not-so-good early days of CSS have returned?

So, what are the best ways to figure out what to fix when you encounter an issue with your CSS? Take a look at some common tips and tools to help you quickly identify where in the cascade you’ve run into trouble.

Solving simple syntax errors

Everyone who writes code by hand has done it: You omit a curly brace or maybe include an HTML tag or snippet of JavaScript where it doesn’t belong. Even those who use a CSS framework or preprocessor can make mistakes when customizing a style. There are now many tools that can help you look for typos and other syntactical mistakes automatically. Two solid standbys are the W3C CSS Validator and CSS Lint.

Another tool, HTML Inspector, is useful if you work on large projects and are using the BEM (Block, Element, Modifier) methodology for CSS naming. In that case, it helps identify when you haven’t used the CSS name correctly in the HTML. Even if you aren’t using BEM, it reports unused CSS rules found in the HTML.

Checking module support

Keeping up with which CSS modules are supported for which browsers can be challenging. The good news is there are a number of sites that can help.

Caniuse.com, maintained since 2009, is an excellent first stop for trying to decipher if features are supported by a given browser. Another site worth reviewing is QuirksMode.org and its CSS section. QuirksMode.org emphasizes a deeper look at mobile platform and browser combinations whereas Caniuse.com delves into more CSS features, in general. By checking these two sites, you can verify if your CSS issue stems from lack of or limited support.

Debugging in Chrome

There are many ways you can use Inspect Element in Google Chrome to debug a website. Here are two tactics that are helpful for identifying what isn’t working when you suspect a CSS issue:

  • Look at the details reported in the Styles tab, paying close attention to those that are crossed out. Systematically uncheck style details to verify whether the style you think should be applied is actually applied.
  • Use the diagram on the Computed tab to see if the actual spacing for the element is what you intended. Being able to view it within the context of the parent container gives helpful clues as to where layout styles have gone wrong.

The web development community is a global and active one with many sites dedicated to discussing and sharing CSS tips and troubleshooting techniques, such as css-discuss.orgcssweekly and CSS Wizardry.

Which sites or online forums do you turn to when troubleshooting CSS issues? Share your tips in the comments section. Want to know what the job market is like for developers? See this post.