Custom CSS and SharePoint Branding (The Right Way)

There was a post on Stack Exchange this morning that struck a bit of a nerve with me. I don’t aggravate easily, but I’m a firm believer that the purpose of public discussions is to promote best practice methods and share that knowledge with people that have asked for answers to their problems. When best practice approaches were suggested by James Love (@jimmywim) and myself, we were practically attacked by people insisting that their practices were the way things should be done. I’m not naive–there’s a lot of people that make a lot of bad decisions–but the purpose of the community should be (and largely is) to help share the right way things should be done. The size of the deployment or scope of the customizations shouldn’t be an excuse for making bad decisions and following bad practices. At the risk of beating a dead horse, this is the best practices approach for deploying custom CSS styling in SharePoint (and why you shouldn’t be using these other methods).

Suggested Method 1: Write your own custom CSS selectors, and put !important on every selector.

The first suggestion on Stack Exchange was that you had to put !Important on all of your selectors to override any SharePoint styles. If you find that you need to use !important to make your CSS take priority over the out of the box CSS, either your selectors are wrong, or your custom CSS is being loaded before the core CSS. When CSS is rendered, the highest priority selectors will be those that are the last to be loaded (unless an !important declaration exists). Not as big of a deal here but in terms of the actual order of operations, your browser will also treat any inline style attribute as a higher priority than your stylesheet (be it embedded or linked).  SharePoint’s core CSS uses nested selectors, so the selectors for your custom CSS must follow suit. If SharePoint us using “body .s4-ca” and you make a custom selector called “.s4-ca”, the browser will render the more specific selector since it has a higher priority. Using !important is a bad practice (for all CSS/web development, not just SharePoint), because it drastically changes the approach you need to use to override that selector/class later. Finally, you need to think about cross-browser compatibility. In SharePoint 2010, this absolutely applies. In a lot of cases, you must write a style one way, then write a modifier to make that style render correctly in older browsers. Flagging !important on all of your styles makes this a real mess.

The use of the !important flag is simply a lack of understanding for how the browser will prioritize CSS markup. There’s a lot of resources out on the web that cover this, but in a nutshell: more specific selectors have priority over less specific ones, and in a scenario where two rules have the same weight, the last one specified will have a higher priority. Use debugging tools such as those in Internet Explorer or the ones within Google Chrome or the Firebug extension for Firefox to identify the selectors that SharePoint uses. Personally, I prefer Chrome because the developer tools are included without the need of an add-on, and you can make real-time changes to the CSS which are rendered in the browser as you edit (making it an excellent development companion when authoring new CSS). Once you know what selector SharePoint is using, use that same selector. Lastly, make sure that your custom style sheet is being loaded into the master AFTER SharePoint’s core files because remember, when rules have the same weight, the last one loaded takes priority. This ensures that your styles take over, without filling your markup with !important flags.

Suggested Method 2: Just modify the core files in SharePoint Designer.

Obviously it’s a bad practice to edit any core files, be it Master Pages, CSS or JavaScript. A particular user was adamant that it was an acceptable method because when you customize a file in SharePoint Designer a local copy is created just for that site, so you’re not affecting any other sites on the farm. While this is true, updates to core files can still be made during service packs or patches, leaving your customized file behind. Granted your custom master pages are never going to be updated, but keeping the core files uncustomized ensures you have a supported rollback plan–something you obviously loose when you start customizing the core files. There’s a lot of talk about SharePoint upgrades these days, and this is one of the things that will potentially make your upgrade an utter nightmare. Sure, you can go in and reset all of the customized files to their definition, but should you have to? Making a copy of a file takes all of a couple seconds and it will make your life 10 times easier if you need to reset to vanilla SharePoint. Can you just edit files, yes. Does it work, yes. Should you do it, no.

Best Practice Method 1: Branding Deployed via Solution

Hands down, the best practice for branding deployment is a Visual Studio solution packaged into a WSP and deployed to the farm. This method makes maintenance and updates to your branding solution easier, gives you more robust change control, and integration with source control (such as Team Foundation Server). Deployment via solution also makes your branding reusable between multiple site collections. Unlike modification of files in SharePoint Designer, you no longer have to touch 10 master page files to brand 10 sites; simply activate the solution. If you need to deploy an update to your solution, the update will automatically be pushed to each site where the solution is active (assuming you haven’t customized the files in SharePoint Designer). A correctly built branding package will also give you the capability to rollback to vanilla SharePoint with just a few clicks. It may not seem like an important thing now, but when you go to upgrade to the next version of SharePoint you’ll be glad you can do that.

Best Practice Alternative: SharePoint Designer

SharePoint Designer is a tool that has a lot of functionality. Yes, you have the ability to modify master pages and things of that nature, but it doesn’t mean that you should. Simply because you can do something doesn’t make it a best practice. That said, in certain environments you may not have the ability to deploy a solution; either due to a lack of staff with the know-how, a policy restriction, or lack of the necessary access to the server. In those scenarios (and only in those scenarios) should SharePoint Designer be used for branding. If you must use SharePoint Designer, you should follow some common-sense guidelines, one of the fundamental ones being to not modify out of the box files. If you need a custom master page, make a copy of the v4.master and work from that.

Where Should the CSS Live?

The purpose of a stylesheet is to promote reuse. It doesn’t make much sense to include your styles in every page, and in SharePoint 2010 where we have standard and minimal masters, it doesn’t make sense to duplicate your common styles by including them in each master page. Your stylesheet should be an external file, stored where it can be used by all instances of the masterpage(s) using them. If you’re deploying your branding using a solution, then most likely these files should live in a folder within the 14 hive. I’m personally not a fan of putting them in the style library, since (despite being able to manage it from the 14 hive), your browser will treat them as separate files for each site collection. This means that my browser will re-cache my stylesheet for each site I go to, even though they’re exactly the same file. If it’s 10 lines of CSS then this is negligible, but if I’ve got a few hundred it makes a difference.

Continuing Education

I’m not one of those people that usually promotes books, but if this topic is something that you wish to brush up on I suggest you get your hands on a copy of Randy Drisgill’s (@drisgill) book. He covers (in detail) processes for branding as well as the issue of CSS priority.

Demo
James created a great screencast that shows the process for correctly referencing external CSS files using the SharePoint:CSSRegistration tag. Check that out below, and visit his blog at http://e-junkie-chronicles.blogspot.com/.

05
Oct 2011
CATEGORY

Technology

COMMENTS 5 Comments
SHARE

5 Responses to “Custom CSS and SharePoint Branding (The Right Way)”

  1. Loving this post, absolutely agree about !important, it’s lazy coding or “I use it because I can’t select my class properly”
    Thanks
    Matt

  2. [...] Custom CSS and SharePoint Branding (The Right Way) [...]

  3. [...] all know that best practices SharePoint branding avoids the use of !important in your CSS, but how do you correctly control the specificity of your [...]

  4. Micheal,
    SharePoint Branding. You hit every point. Good article.

    Thank you,
    Robert Jumblatt
    CoreBix.com

  5. [...] Custom CSS and SharePoint Branding (The Right Way) [...]

Leave a Reply