Refactoring my CSS

I love learning about how to improve my skills and processes, especially on long weekends. It's a chance to sit down and learn something new and actually try and apply it right away.

I started off by watching a few YouTube videos on Object Orientated Cascading Style Sheets (OOCSS) and related CSS methodologies. What started me down this path was when I needed to update one of the patterns on this very website and it was a pain remembering which SCSS partial I had placed the specific style in. Now when I say "a pain" I mean it took more than 60 seconds to remember, which seemed like much too long in my book. So off I went to learn about SMACSS and BEM. After several hours learning about the ins and outs of both popular methodologies I decided to go with BEM.

After picking BEM as my methodology of choice I began breaking up my SCSS files into two main categories, base and module. All of my base styles are broken up into several smaller partials for each of the main patterns of my site. That includes text, forms, layout, and some basic resets. Then my module styles are broken down by, well, module. I consider a module a reusable pattern. So I have a module for post, summary, main menu, entity, and more.

I tried using Snook's Semantic CSS approach to my module naming convention. This can be seen in my choice of using "summary" rather than naming it "blost-post-summary". I could use this again in the future to display something other than a blog post, so I didn't want to tie the name directly to the content it is currently displaying.

I eventually stumbled upon this post on We Build Envato where Jordan Lewis talks about chain-able modifiers and BEVM, a slight modification of BEM. I really liked the idea of being able to use modifiers that are not module specific and can be chained together. Now this does seem to stray from the idea of sticking to a limit of one class per element, but in certain cases I think it makes sense. Especially when you want to have slight differences between multiple instances of a module, and that slight difference could be used for multiple modules. I may decide that this isn't how I want to live long term, but for now it is the path that I have chosen.

So after a few hours of work my CSS was in order and refactored to fit BEVM. I'm really happy with the way it looks and functions so far. Now my classes should be easy to locate and I can cut down my brainfart to under 30 seconds.