Professional SharePoint® 2010 Branding and User Interface Design

CSS Primer

❘

187

CSS Developer Tools

As mentioned in Chapter 5, several CSS developer tools are available to help you in your branding

projects. CSS can be frustrating and overwhelming at times, especially when you have many lines of

code to maintain, and various inheritance and aggregation rules apply to elements that have not had

any style applied to them individually. Furthermore, the long list of browsers (and all their versions)

still active on the Web can make maintaining this code diffi cult. This is when CSS developer tools

can be useful.

One of the most widely used tools for CSS troubleshooting is Firefox’s Firebug (

https://addons

.mozilla.org/en-US/firefox/addon/1843

). This tool was already introduced in Chapter 5, but

you can see it in use later in this chapter as well.

Best Practices for CSS

This chapter has mentioned some CSS best practices along the way, but it might be a good idea to

review the main suggestions in one place. With that in mind, here are some of the major things to

remember:

Re-use code

➤

— If you can group elements, share style sheets, and so on, your pages will load

faster and maintenance will be easier.

Use shortcuts

➤

— Similar to the preceding point, don’t write unnecessary code. For example,

instead style rules such as

padding-right: 5px; padding -left: 5px; padding -top: 5px; padding -bottom: 5px;

you could simply write the following for the exact sa ...