Implementing SMACSS

When I decided to rewrite my personal website I quickly threw the CSS together. I wanted to achieve a few key things:

  • I wanted a website, rather than perfect code.
  • I didn't care about IE (or Firefox) and wanted to use CSS3 flexible box model (everywhere).
  • I'd use Kaizen principals to refactor my website as I went.

So, I'm getting started on point 3.

I've been reading a book called SMACSS by Jonathan Snook. SMACSS stands for scalable and modular architecture for CSS. As described by Jonathan, it's not really a framework, but more of a style guide for implementing css. The book is well written and concepts are demonstrated through clear examples.

So while the CSS output hasn't changed a lot, my understanding of the code has improve dramatically. As has the readability of the code.

I'm using SCSS and have separated my files like so:

  • styles-flexbox.scss (main file)
  • reset.css (eric myer's reset)
  • _base.scss
  • _layout.scss
  • _module.scss
  • _state.scss

I have no idea if Jonathan's intention was to split the files like I have (I'm still reading), but it has really helped me to pick up the concepts of the book.

Alright... I'm off now. I'm going to refactor my CSS a little more.