Maintainable CSS – Part 2 - Smaller CSS Files
- 22 June 2014
This is part two in a series that explores different ways of making your CSS code easier to maintain and more efficient. The first part of the series talks about how CSS can be implemented in various ways without just shifting the burden from the HTML to the CSS. Maintainable CSS - Part 1 - Don't Move the Burden
You should avoid creating large singular CSS files and aim to create several smaller and more logical files, then use server side combination to bring the files together. How you create these will depend on how your site is structured, for instance you may have CSS files for grid layout. What I would suggest though is that you have CSS files for specific regions/elements/widgets on a page; e.g. header.css, navigationBar.css, footer.css, slider.css etc.
In doing so will make your code easier to maintain. Not only will it make development easier by being able to locate styling for a specific section more easily (especially if working in a team), but it will help to stop redundant CSS being kept in the codebase.
When widgets or regions are no longer used you can simple stop including that particular style sheet. If you keep all your style in one sheet or larger style sheets it becomes much more difficult to remove unused style, more so on larger websites. Meaning your users will be downloading extra unnecessary code, your website will also take longer to load and also have a negative impact in Google because Google rewards websites that load faster.
These files should then be combined and minified into a single file using a server side script, so that the user is downloading a single file and only doing one request to the server.
Where you have generic global styling that applies to the whole site put into a global CSS file like main.css for instance styling for site wide font, text, h1, a tags etc. If you have or specific areas of the site which have different styles they should be in specific style sheets. So global and generic styles should be in generic style sheets and specific styles should be in specific style sheets.