Hassle-free site rebranding with Tailormade

I've worked on a number of projects throughout my lifetime that have had something in common: they're tools used internally in businesses and each business wants the tool rebranded slightly to match their site. In fact, they've got another thing in common: it's always been a major pain to do.

The Problem

As your site grows, it requires more CSS (or SCSS or something else) to style it - and your selectors often go deeper and deeper. Before long, some of your CSS could easily end up looking like this:

.app .header h1.main {
  color: dimgray;
  font-family: 'Times New Roman', serif;
  padding-bottom: 12px;
  margin: 0;
  text-decoration: underline;
}

It's quite a simple piece of CSS: within the header of the app, style any main headers in grey Times New Roman, underlined with padding at the bottom.

So your CSS is nicely distributed to your clients, and of course Company Ltd decide that they don't want it grey Times New Roman. They want it to be blue and Arial. Your other customers, however, want it the same.

Solutions, Act I

I've seen a number of solutions to this done in the past. It's always been one of the following:

`!important`

!important, or more accurately called !break-other-css, can be applied to override any other styling. So, you make a new style sheet specifically for Company Ltd (company-ltd.css) and you serve it when the user is in Company Ltd.

.app .header h1.main {
  color: dodgerblue !important;
  font-family: 'Arial', serif !important;
}

This works okay, until you need to add any other styling. !important will throw off the specificity of your CSS and will cause you problems in future. Seriously, don't do it.

Be more specific

Another way to make a CSS rule take precedence over another CSS rule is to be more specific with it. So, you'd still create your company-ltd.css as above, but it would contain something like this:

body .app .header h1.main {
  color: dodgerblue;
  font-family: 'Arial', serif;
}

Now, that works okay - and it doesn't use !important. But it still relies on overriding styles that you don't want there in the first place.

Solutions, Act II

Enter Tailormade, stage right.

Tailormade is a tiny (17.5kb) library which does something very simple to your styling code: it splits apart your structural CSS from your design CSS. Your padding from your color.

Let's take a closer look.

Given the following file, app.scss (that's right - it works with SCSS too!):

.app {
  background: cornsilk;
  margin: 0;
}

.header {
  height: 200px;
  width: 100%;
  background: sandybrown;
  color: white;

  h1 {
    font-family: 'Arial', sans-serif;
  }
}

We can use Tailormade to turn it into two other files (tailormade app.scss)

Our structural code (app.structural.scss):

.app {
    margin: 0;
}

.header {
    height: 200px;
    width: 100%;
}

And our design code (app.design.scss):

.app {
    background: cornsilk;
}

.header {
    background: sandybrown;
    color: white;

    h1 {
        font-family: 'Arial', sans-serif;
    }
}

This means that we can serve them in this order to our normal customers (the ones who don't insist on changing the colours of the app):

app.structural.scss
app.design.scss

and the page will look as normal.

But if we have a customer called Writing Inc, and they want the app to have a white background and the header to have a mediumseagreen background, we can simply copy app.design.scss to app.writing-inc.design.scss and place the following:

.app {
    background: white;
}

.header {
    background: mediumseagreen;
    color: white;

    h1 {
        font-family: 'Arial', sans-serif;
    }
}

We can then serve them like this:

app.structural.scss
app.writing-inc.design.scss
app.design.scss

And the page will still be structured the same, but because app.writing-inc.design.scss is served first, the design will come from that!

Even better: because we are serving app.design.scss after app.writing-inc.design.scss, we don't need to have everything in app.design.scss. We can place our custom styling in app.writing-inc.design.scss and leave the rest to get picked up by the main design.

.app {
  background: white;
}

.header {
  background: mediumseagreen;
}

Conclusion

For hassle-free rebranding of your site, follow these three easy steps:

Use tailormade to split your design code from your structural code
Create custom branding design code applying design code where necessary
Serve your custom branding before your base branding
Bask in the glory of a site that can be rebranded easily without having to spend hours fiddling with specificity!