Retrospective modularisation

This website, by any standards, is pretty darned small. Just a five pages and a blog. So, how complicated could the CSS possibly be? 613 lines, 9 sections and some headaches. That’s how complicated.

The worst of it is, I am retrospectively making the site responsive, with just two breakpoints at 520 and 1024 pixels. It is fiddly, to say the least.

To help clear things up, I’m implementing @snookca’s Scalable and Modular methodology. At the moment, my styles are mish-mashly organised by element, function and page:

1. Variables
2. Mixins
3. Typography
4. Links
5. Page elements
6. Navigation
7. Specific pages
8. Breakpoints
9. Hacks

The trouble with this is that colour and typography are higgeldy-pig with margins and padding. Not good. For example:

#primary-nav li a {
  background-color: #283135;
  letter-spacing: 0.13rem;
  line-height: 2.6rem;
  padding: 0 1.2rem 0.1rem;
  margin-right: 26px;
  border-radius: 3px;
  text-shadow: 1px 1px 1px #1A2023;
}

Jonathan’s approach is to abstract the CSS rules into five categories:

1. Base
2. Layout
3. Module
4. State
5. Theme

This way, it’s easier to refactor a section, for example, when you are creating variations for responsive design.

That’s all very well for the theory. Now, let the practice commence!!