Clean Up Customized CSS with CSSCompare
Have you ever come across a SharePoint installation that’s been customized in an unsupported way? You look at the 12 (or 14) hive and see that files have been modified by hand? Not good.
As you may know, changing core SharePoint files is unsupported and can lead to problems when patching.
The best way to clean up modified SharePoint installations is to pull out the customizations and move them into new files as part of a solution package (WSP file). That makes it easy to re-deploy customizations and ensures your environment will stay clean.
Re-packaging most files is easy, but CSS can be very tricky to pull out the customizations. What if somebody went in and modified a few random styles (e.g. changing a color attribute or border width). Tracking those down by hand is tedious and error-prone.
Enter CSSCompare
For situations like these, I wrote a tool called CSSCompare. CSSCompare will look at two CSS files and output the effective differences between them.
With SharePoint, you can take your customized version of Core.css (or other customized CSS file) and find the differential from an uncustomized version of Core.css by running:
CSSCompare.css -v1 CustomizedCore.css -v2 OriginalCore.css > MyCustomStyles.css
You can then add “MyCustomStyles.css” to your solution and replace your customized file with its original version.
Other Uses
CSSCompare works with any CSS files, so it can be used in non-SharePoint scenarios as well. I’ve started using it in version control situations to quickly determine changes between styles.