4 February 2010

Modular CSS

If you've ever created or managed a medium or large web site you'll know that keeping track of all your CSS can be a bit of a nightmare sometimes. There are styles to handle the page layout, styles for the navigation menu, styles for the headings and content, styles for form inputs and buttons, styles for all those extra little boxes the client wants putting in. If all your style definitions are in one place, that's going to amount to one hefty CSS file to wade through!

And that's what prompted me to think about modular CSS - dividing all those components up into separate CSS files and then putting them back together again when we want to use them. This isn't a new idea, I'm sure others have been using this technique for years, but I thought it was worth sharing with you in case it's of any help, and in case I'm able to explain it in a way you've not heard before.

The power of re-use

Traditional programmers have been reusing code for years and are perfectly happy coding everything in classes or functions that can be transferred from one project to another. Rather than writing something specifically for one purpose, you overengineer it ever so slightly so that it could be lifted out and plonked into an entirely different project and still work.

If we take the same approach with our CSS, a lot of possibilities open up for us. Found some nice clever styling for an input button? Well don't just leave it in that one project, take it out and store it away somewhere. Next time you need a nice looking button in another project, rather than coding it from scratch you just import that other CSS file and all the hard work is done already. Reusing CSS by modularising it can save you time and effort and streamline your development process.

On-off debugging

We've all been there. Your site was going so well, but now for some unknown reason the layout has gone completely wrong, and you're not sure what's caused it. And so begins a process of commenting out bits of your CSS to try to find out which line is the culprit.

With modular CSS you can comment out individual CSS files in a single stroke (well, two forward slashes) to quickly narrow down which one is causing the problem. It'll make your life a lot easier!

Enough already, show me the goods!

Right, now onto the juicy bit. How you divide up your CSS is entirely up to you, but I would advise breaking it down into groups that you know can be reused without them interfering with other code, and save each one as its own .css file. Let's say you've got some really neat CSS for making input buttons look nice and professional and consistent across all browsers. Or perhaps you remember that we shared some CSS for styling sub and sup elements so that they don't affect the line-height. Grab all those components and put them somewhere central where you can refer to them.

// buttons.css - styling for pretty buttons
.input[type=submit], .button {
padding: 3px 8px;
border: 1px solid #909090; -moz-border-radius: 6px; -webkit-border-radius: 6px;
background: #d0d0d0 url(images/button-bg.png) top repeat-x;
// etc...
}

// subsup.css - styling for superscript and subscript that behave nicely
.sub {
position: relative;
font-size: 0.8em;
// etc...
}
.sup {
// etc...
}

// layout.css - styling for the web site layout
#header {
height: 105px;
background: #000000 url(images/header-bg.png) top left no-repeat;
position: relative;
}
// etc...

Right, now it's time to collect those individual CSS files together and use them. There are two ways of doing this - either by including each one in the HTML head (example 1) or by using the @import technique in a central CSS file (example 2). Whichever you prefer. I personally would go for the second option, simply because it keeps the HTML file cleaner.

Example 1

Example 2

// master.css - where we put it all together again
@import url("buttons.css");
@import url("subsup.css");
@import url("layout.css");
@import url("headings.css");
@import url("navigation.css");
@import url("formelements");

In this case, no styles are actually defined in master.css at all, it just references all the other modular CSS files where all the magic happens. And this is where debugging becomes easier, because you just comment out one of those import lines in master.css to turn off that style completely:

//@import url("buttons.css");

Adding in functionality later on

Okay, let's say your site is all set up and working, and then several months later you need to add some special functionality or style to the site, say for sign-up form. Now, this new form will need to have a particular visual style of its own, but you don't want that to interfere with the styles of the rest of the site. That's no problem, we'll just make sure that we enclose the whole form in a particular element id and reference everything relative to that. But do we really want that additional CSS being downloaded for each and every page on your site? Again, modular CSS lights the way to a more efficient and manageable solution.

You'll see that what we've done here is included the signupform.css file just before the form itself. Normally we would put that in the HTML head, so that the CSS is loaded by the time the page displays (if we didn't, the page would load up and then shift around in front of you as the CSS was loaded afterwards). But there is no reason why we can't put this modular CSS file here, as we know it's not going to interfere or change anything elsewhere on the page. Of course we could put it in the head, but putting them together in the body works just as well and is potentially easier to manage if you're using a Content Management System - it means you only have to include that chunk of code in one place on the page rather than having to worry about handling the CSS separately earlier on. It also means that if you want to take that signup form off the page later on you can immediately see that the CSS file lives with it and can also be removed, saving you having to search through your master.css file or your head for anything that might otherwise get left behind.

Using modular CSS with MODx and TinyMCE

Actually the principle probably applies to other Content Management Systems and graphical text editors too, but since these are the tools I use most often I'll use them as examples here.

If you're editing your page content through a CMS, it would be brilliant if it was truly WYSIWYG, so that the way the text looked in the editor was exactly the same as how it would look on the page when it was rendered. In MODx you can set the stylesheet that TinyMCE uses by going to Tools > Configuration > Interface & Features, and scroll down to the box labelled "Path to CSS file" (which is probably just underneath the option for which editor to use, and just above the settings for that editor). Put in something like "assets/templates/mytemplate/editor.css", and in that file import all the modular CSS styles that will be needed for the content - paragraphs, bullet lists, images, headings, links, and whatever custom classes you're using, just as we did earlier in master.css.

The beauty of this is that if you make a change to the way the site looks out front, it'll show up in the editor as well automatically. This is great for reassuring clients that what they put into the editor is what they'll see when they view the site in full.

Onto the next project

So now you're onto another project, something completely different. But wait - haven't I done an image border style like this before somewhere? If you're using modular CSS, you can stop thinking right now, grab that CSS file you'd created before and simply plug it into your new project! Job done.

In fact, you could potentially built whole web sites this way, with all your layout options pre-planned ahead of time, and all you have to do is choose how many columns you need, in what order, with what sort of navigation menu, and in no time at all you've got a wireframe of your new site without having to do any CSS coding whatsoever! That just leaves you to plug in the colour scheme and graphics for your new site (again, in their own modular CSS files), and you've got a whole web site coming together, plug-and-play style!