Best practice to target an element during SharePoint branding

Question

When we customize the SharePoint site and brand it, we sometimes need to do CSS styling for the elements of the page. What is the best practice to target an element? Is it by id or class or other means? I heard that using id's we could end up in trouble when the environment of site is moved to other environment.

Answer 1

Styling using classes is usually the preferred way.

Especially if you see IDs in HTML in ASP.NET control format, like "ctl00_ContentPlaceHolder1_CustomUserControl1_NestedExampleLabel", you should absolutely not bind styles to those ID's as they may change, even within the same environment, as controls get added/removed from the page.

If you have control of the IDs in your custom Page Layout, Master Page, Web Part, then there is nothing wrong in binding styles to those IDs as they will be static even if you move your customizations to other environments.

Of course, when SharePoint major versions change, UI (including HTML element classes and IDs) tends to change drastically, so at that point you can kiss your style sheets goodbye.

Answer 2

If the page in question is a custom page, then you can use class to target the styles. That is the best practice.

On the other hand if you are talking about SharePoint elements, then we should be careful with using class, because it might be used across and will have a global impact. In those cases we used to target the control's id for styling purpose.

In some cases we relied on jQuery to get specific element and style it.

As part of branding a SharePoint site, below are the key elements you can target as part of master page

1. Top Navigation
2. Left Navigation aka Quick Launch
3. Site Logo
4. Main Content PlaceHolder
5. Small Search Box
6. Ribbon
7. Site Actions menu
8. Adding a footer