Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Debug CSS
Sharing simple trick that I'm using for debuggin everyday:
0- Fluid(s)
img,object,video,embed {
max-width: 100%;
}
--
1- use Pesticide plugin:
ExtensionPesticide for Chrome
or just do it yourself:
* {
border: 1px solid red !important;
}
--
2- Bookmarks:
http://yahoo.github.io/debugCSS/
--
3- http://csslint.net/ or use a grunt tasks, I recommend this approach:
https://github.com/gruntjs/grunt-contrib-csslint
--
4- PhantomCSS: Visual/CSS regression testing with PhantomJS
--
5- W3C validator: http://jigsaw.w3.org/css-validator/
--
6- clean you CSS
https://github.com/addyosmani/grunt-uncss
Be aware that CSS controlled by JS is not going to be checked.
--
7- Find Unused CSS Rules With Google Chrome Audit Tool:
In Chrome’s developer tools, visit the Audit tab. Despite it’s name, the taxman won’t start shaking you by the ankles.
Run the Web Page Performance option. You can then get a list of unused css rules for the page you are on.
--
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment