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. Both help set a tone for what you should be trying to accomplish with CSS: reusable code. OOCSS feels more like theory to me, where as Smacss provides some applicatable ideas, such as a file structure:

/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. I haven't found much of a need for state, OrangeQC page is pretty static, so I've taken it out. I've also added a mixins class so I can put my sass mixins in one spot. I've also been using 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. I was able to redo the layout of this site with Smaccs within a couple hours.

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.