Everybody who has worked on a large website will understand the pain of keeping your CSS in order. This problem becomes even more difficult when there are multiple teams working on different parts of the website, there becomes a dependency on the CSS file. On the latest project I’ve been working on the team decided to make improvements to the way we development and maintain our CSS. In doing this we’ve created a CSS strategy that will allow multiple team to work on the UI of the site without creating dependencies.
Breaking down your CSS
So what have we done. Well the CSS has been broken down into three distinct area’s page layout, page style and control layout.
- Page layout – The site uses a CMS system so the page layout CSS is used by all pages throughout the site and defines the positioning of controls on the page.
- Page style – Each page on the site can have its own page style CSS file although in practice many pages share the same file. Page style encompasses anything to with colour, background images, borders …etc.
- Control layout – Each control has its own layout CSS file, this contains the internal layout CSS for the control, every control is designed to work within a defined column width which is define from the page layout CSS file. A given control can be created to work in more than one column width using cascading styles.
With our CSS broken down into small file, it becomes easier to manage change.
What about cross browser fixes (IE6, IE7)
To help deal with the problem of cross browser development each section of CSS is developed using Firefox (you will find that Firefox, Safari, Chrome, Opera and IE8 all render the same 99.99% of the time) and if there are issues in IE6 or IE7 use override files one for each browser.
What about page performance?
Your right in thinking that having so many individual CSS files degraded the websites performance. To ensure that we meet our target on YSlow (a firebug add-on from yahoo which measuring your websites page load time) we merge our CSS files together during the build process. We end up with two CSS file being called when the site loads.
- main.css – page layout CSS merged with all the control layout CSS files
- main-ie6.css – page layout CSS merged with all the control layout CSS files and the IE6 overrides
- main-ie7.css – page layout CSS merged with all the control layout CSS files and the IE7 overrides
- demo-page-style.css – the page style css file (this is not merged with the other CSS as this can be change by the CMS)
I hope people will find this post useful, I will post more articles about my current project as there seem to be a lot of good practices to be taken from it.