Key art image for Trying to do a Good Job

Trying to do a Good Job

We recently had a workshop with Harry Roberts (a.k.a CSSWizardry) at the Google Office, largely with a goal of learning about better web project maintenance, hopefully helping us improve Web Starter Kit.

The annoying with this workshop was the number of things that immediately made sense to do in terms of best practice, the tricks were awesome and general ethos was reassuring.

I took some of the stuff we’d learnt and started to just muck about with reworking the styles in my site.

1. Figure Out the Inheritance of Styles

Harry has come up with ITCSS and it’s a formula he’s come up with over the past couple of years while developing InuitCSS. Essentially things boil down to an upside down triangle.

ITCSS Diagram

Harry can and will get insanely excited when he talks about this and he WILL draw a triangle on anything that he can while he talks about it.

I ended up renaming some of this stuff, just to fit with my mental model of what I was going to do.

Matt Gaunt’s Tweaked Version of ITCSS

Settings and tools are just SASS files I pull in (things like colors, sizes and mixins), the resets are a combo of HTML5Boilerplate and Normalize, my base is a combo of base styles on elements and typography on top of that. The base styles I’ve tried to ensure weird content doesn’t break out the bounds of the page and with typography I’ve tried to ensure everything is sat on a baseline grid.

On that note: is friggin' awesome!

Pick a page on my blog, open DevTools and in the console type window.GauntFace.debug.toggleBaselineGrid(); to see what it looks like on the base line.

2. Be Happy to Refactor

Once I had done all of the above, I was clinging onto an old way of visualizing the chunks of UI my site had. In the end I just scrapped it and made my life easier by moving everything around and putting it up on This is largely to act a personal reminder of the flow of responsibility, but it was weird my aversion to the change - change that stuff yo, it’ll make life easier!!

3. !default Variables

Possibly one of the simplest, yet most powerful things I’d learnt from the the workshop was the use of !default in Sass. All of the components on the styleguide page pull in the smallest amount of dependencies as possible (both CSS and JS), the idea being they should be self contained. The problem with this is that if I define a color in the Sass file, how can I change it on a specific page, the solution is !default.

Originally I was defining an overrides file with values like:

$some-color: #BADA55;

Then in my actual Sass for the component, I would do the following:

@import "some-component/overrides"

.some-component {
  background-color: $some-color;

This is fine, it works, but its tedious, because I then have to remove the overrides directory (I do this with a script), then ensure I add some file that officially defines the final colors for my site. The easier solution is to do this in the component Sass:

$some-color: #BADA55 !default;

.some-component {
  background-color: $some-color;

Then anywhere I want to change the color, I can do the following:

$some-color: #C0FF33;

@import "some-component"

Sass will then take the original value of $some-color - in otherwise !default only uses the supplied value if nothing has been set yet.

5. Layouts and Trumps

The main thing I’m missing from the triangle in my styleguide page are Layouts and Trumps.

Layouts I have very few of, the home page, the blog index, blog posts and the contact page. I generally haven’t wanted to define them in the styleguide (Although I could just link them up). The number of things which got componentised as a result of this was pretty surprising - ripping things out of the layout sass files to clean up the naming convention was easier if I moved it into a component in the process.

Trumps I haven’t found

Orig Image: