Using default CSS in custom Web Parts

Question

I am designing a custom visual web part. In order to have a consistent look for a site, it seems to me to make sense to have as much of the styling come from the master page (or wherever the site wide CSS is coming from).

What I think that means in practice is that I should use existing CSS classes used by SharePoint as much as possible. Is that a good practice?

And if so, Googling hasn't turned up much on the subject, best I've found is this list of CSS classes, which are from an older version. Is there more official documentation on this somewhere? Or a good unofficial reference?

Answer 1

You have a couple options. If you want to completely modularize your VWP, keep the styles in the webpart itself by Adding a Mapped SharePoint folder. I usually do this if I have classes specific to the Web Part and are unnecessary to load on every other page (they would if you put it in a global css). This also holds the advantage of one deployment with no manual steps. If you deploy this Web part to another site collection, you need to ensure the styles are in the global css which could be a manual step.

The other option would be to place all your classes in the global css (ie. style.css), in which case any changes to these could affect multiple entites. This could be an advantage or a disadvantage depending on your situation. This would be considered best practice by a browser (because you only have one trip to the server to grab a single css).

In short, I would combine both techniques. If global styles can be reused, don't create them again in your VWP css. If you have css specific to your VWP, create a new mapped stylesheet which will only be loaded when the app is in use. It is ok to reference multiple stylesheets in one application, of course.

Check out this post by Heather Solomon on OOB SharePoint classes. I'm not sure the version you are using but these are for 2010. Leverage them if you can