Nov 7, 2012 1 min read

# SMACSS

I've been working on redoing the OrangeQC website the past couple weeks and it was good to put into practice some fo the stuff I was learning at the end of my time at Nelson Cash. In my quest for css best practices I came across OOCSS and SMACSS .

    /css
    |- base.css
    |- layout.css
    |- module.css
    |- state.css
    |- theme.css

`Base` is for how your elements should look by themselves, no additional classes. `Layout` is for laying out larger elements on the page. `Module` is for smaller elements that will be reused on multiple pages. `State` is for handling the various states those modules can be in. `Theme` is for modifying the look if you need a different style.

Using SASS's partials I've included all of these files into one which has worked well. Bourbon for some standard mixins which works out great.

As with everything it takes practice knowing how to layout modules and when/where/how to refactor. I really just need more practice with it.

There is some debate of if you should add additional classes to your html in order to style elements or if you should use sass to mixin your various styles for targetted elements. I'm still figuring out pros/cons, but for my projects I have full control over the html so I'd rather add a couple extra classes where needed and reduce the size of my css.

If you are getting tired of targeting every element on the page and doing custom styling for everything, check out SMACSS and OOCSS, they'll speed up coding and make life easier. Things that would have taking me a day or two to do my old way is only taking me a couple hours now.

#### Ryan Mathews

San Francisco, CA