Reusable CSS, how to layout

Reusable components are one of the most important facets of web development. To be productive and competitive in the web development industry, one must have the correct processes and formulas to create great websites in quick time.

CSS frameworks can help in this regard but generally use poor class and id attributes which can result in harder to read websites. What we really need are modules that can be plugged in to websites and reused easily and consistently.

The best approach that one can take to perform this task is to layout our CSS files separately for each module and component. For example check out our CSS layouts for one of our websites.

List of the CSS files that are used on a website

Currently we have our CSS files split into 'form', 'navigation', 'modules' and 'global'. Hopefully these names are self explanatory. Apart from the global files, each other file is a component of the website. This ensures that we can copy and paste the file into new websites that we build and have everything working as quickly as possible. We may need to adjust the colours and margins and paddings, but this takes a very short amount of time when everything has been laid out before.

If you do decide to layout your CSS files as above you will need to have a combining script that combines all the files into one. That way your users only need to make one request for the CSS files.