Debug CSS

gistfile1.txt

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. 

--