Maintainable CSS vs. theme-ability

Question

The above seem to be contradictory goals.

On the one hand, making CSS maintainable seems to me to suggest keeping CSS structured and orderly, and keeping all the styles of an element together in one place.

So for example, the style of a top logo would look like this:

#logo {
  width:50px;
  height:30px;
  background-image:url(/images/logo.gif);
  background-repeat:no-repeat;
  background-position:left top;
  border:solid 1px blue;
}

As you can see, in the above case, one only has to look in one spot if one wants to update the logo style.

The problems begin when we want to make the site "theme-able", and separate the brand-specific elements from the essential elements.

In this case, we might have the '#logo' style spread across two stylesheets:

site.css:

#logo {
  width:50px;
  height:30px;
  background-repeat:no-repeat;
  background-position:left top;
}

brand.css:

#logo {
  background-image:url(/images/logo.gif);
  border:solid 1px blue;
}

Now our CSS is more flexible but less maintainable, since every time we edit '#logo', we'll have to look at two files and decide which to alter.

It gets exponentially worse if we decide to separate typography into another file, or IE 6 fixes into yet another file.

How do we deal with this complexity?

Do we sacrifice maintainability for flexibility?

Is there some middle-ground between the two?

Are CSS Variables the only answer?

---

I'm seeing a lot of intelligent answers but still not the advice I'm looking for.

Here's what I'm really getting at:

Suppose I decide to separate Theme styles from Main styles. How do I separate by components then?

Do I still separate Header CSS from, say, a Media Player component? Or do I just give up and mash them all together?

Or do I use 'sections' within Main.css and Theme.css?

Or do I use separate files for each combination of component and aspect? For example:

• Header.base.css
• Header.theme.css
• Mediaplayer.base.css
• Mediaplayer.theme.css
• etc...

Answer 1

I think it's about standard. If is your standard to put font styles in typography.css, then that's neither complexity nor disorganization. Although it is convenient to have everything in one spot, it's not very flexible, as you said.

Really what you need to decide is your standard. Will you support multiple CSS files to develop themes? Do you want single theme files?

CSS Variables are great. But there's rarely just one solution.

Answer 2

I think you can get both: themability and maintainability. In past works, I've made extensive used of CSS, and its all about last-in-wins for themes. The last CSS file imported is the one that takes the greatest precedence...so it is possible to have a default set of styles, which can be overridden by custom styles, in different stylesheets.

I would put all the necessary styles in site.css, and have a general "theme" that looks good, and blends well with most of the possible themes your site may have. In your brand.css, override any previously set styles with those specific to the brand. So long as you import brand.css after site.css, its styles will generally rule. It is also possible to throw the important modifier on a style, in case it is not overriding your base styles.

In projects that I have worked on that made heavy use of CSS, I usually put together a CSS handler that was responsible for creating a root .css file that simply contained the necessary @import directives to import the main .css files in the proper order. Depending on the theme in play, the imported .css files would differ per site except for a reset.css and default.css.

Answer 3

If you are editing the theme alter the theme don't mess with the main css for theme reasons.

The last read rule will be the one applied so load you css first and the theme's last.

// the theme goes last and theme rules will override main rules
<link href="/main.css" rel="stylesheet" type="text/css" />
<link href="/theme.css" rel="stylesheet" type="text/css" />

Now have your main css with all the rules it neads.

main.css

// this is your site CSS file
#logo {
    width:50px;
    height:30px;
    background-image:url(/images/logo.gif);
    background-repeat:no-repeat;
    background-position:left top;
    border:solid 1px blue;
}

And just alter the needed styles on the theme.css. Say the logo should have a red border and a larger width.

theme.css

// this will be read last and override the main css file
#logo {
    width: 250px;
    border:solid 1px red;
}

But from your implementation and previous questions it's pretty obvious you know this already. Am I not getting the point? Or are you just a bit weekend-sleepy? ;)

Hope it helps!