You can override JetPacks CSS styles without using the !important declaration with a few tweaks in your functions.php file.
Currently the JetPack CSS style sheet is loaded late in the header of the document pretty much after your main theme’s style sheet, it is a 53kb minified style sheet which has CSS for a number of the JetPack modules all concatenated in the one file.
Even if the modules are not active their CSS gets loaded in the minified style.
Since it’s loaded after your themes style sheet any similar selectors declared in your theme’s style sheet will not take precedence. You have two options either use the !important declaration or make the selector more specific, since it’s considered best practice not to use the !important tag the latter is the better option.
An example of a JetPack CSS selector (which is very specific)…
By returning false only the active modules CSS files are loaded in a non minified style and also loaded higher in the head, if you are using an action with a priority to load your own theme style sheet late then the JetPack CSS will now load before your style.
Lets say you are just using the Related Posts module, well now the CSS file size is 5kb which is quite a reduction, even more efficient would be to take the CSS of the Related Posts module and just add it with your customisations to your own theme style sheet – which will save another file server request.
To do this you also need to deregister the JetPack CSS Module.
To do this for any of the other modules these are the scripts to deregister
Bonus Round – Popular Post Tabbed Widget
If you also use the separate Popular Posts Tabbed Widget for Jetpack, you can do the same thing in that you can dequeue the CSS and just add it in your own style sheet.
