Namespacing CSS to avoid conflicts with existing styles…

I’ve just finished a quick freelance web development job for a direct marketing agency based near Bath, which was a little bit unusual. The job was to convert some designs from .PSDs into HTML. Nothing new there, we’ve been providing PSD2HTML services for web designers in and around Bath and Bristol for yonks. But the HTML I needed to produce was just for one part of the page as whole, and my HTML was then going to be slotted into the Sitecore Content Management System powering the website (of a global manufacturer of network equipment). I didn’t have access to the CMS to test the code in situ. Not only that, but the templates I created would then have to be translated into multiple languages, and the CSS could not be external. All of which could get very messy.

My major worry was that CSS from the “parent” part of the site could play merry hell with the very fine control needed for these layouts. So I decided to “Namespace” all the CSS definitions and image names so it would be vanishingly unlikely that someone had, or would at a later date create styles with conflicting names. It makes the CSS look a lot more verbose than I would like, but I think it minimises the chances of getting a call in 3 months time saying everything’s suddenly broken after an update to the parent external CSS files.

I also temporarily imported the CMSes current CSS files so that I could see and override any definitions in the parent styles. Working on these sort of “brownfields” projects is often much more time-consuming that starting from a blank canvas, but with a little forethought about how the CMS will be used, you can try to minimise the inevitable rounds of amends…

Need some help with your web design or development project? Whether you’re in Devizes or Dursley, Bath or Bedminster, Sweet-Apple is ready and waiting to help you build websites for you (or your clients). Please give us a call on 01380 830224 – we’d love to help…