Last October my Tea Time Tech Talk friend and co-founder of this ten-minute-non-sense-tech-talk-while-getting-our-morning-cup-of-tea, Bryan, and I attended the 2014 CSS Dev Conference (pedi-cab!) in New Orleans where we heard a lovely closing keynote with Chris Coyier, founder of CSS-Tricks and CodePen. From the one hour (maybe it was two – in all honesty I got sucked into Words With Friends) Q&A I took away a single comment made by Coyier relating to CodePen’s CSS that in one weekend, two months later, changed my CSS life forever.
Now before the 2014 CSS Dev Conference I had experimented with SASS (using the SCSS syntax) and much like during a blind date I thought it was a pretty and elegant way to handle css. It was creative, smart and with just enough sass and could easily hold an intelligent conversation with my HTML, but once I came down from cloud nine, the ability to create variables and nested styles really wasn’t worth the investment of effort for me and wasn’t something I wanted to pursue a long-term relationship with; although, there was that one blonde. Anyhow, the deal breaker for me was how SASS (SCSS) presented the compiled CSS, in specific, media-queries. In a big huff and puff about it at work one day I snubbed my nose and never looked back and returned to coding long-hand using some great shorthand tools like Emmet in Sublime Text. However as my CSS grew more tentacles with media queries and the files themselves were abstracted for a higher level organization and load-time optimization I was starting to realize that this too wasn’t working. Be smarter than I was and understand you will never have to edit the minimized CSS file generated by your preprocessor (such as CodeKit or Koala) so who the frak cares what it looks like, right? Just say yes.
So, once I accepted that it was me, not SASS (SCSS), I typed in Firefox’s awesome bar: “Coyier CodePen CSS” and finally read his mind-blowing blog post about how CodePen leverages SCSS. Now, similar to CodePen I separate my CSS into numerous smaller SCSS files which is genius! in addition to being easy to manage, semantically readable code with browser specific prefixes (via Autoprefixer – although I apply these through Sublime Text) and then through CodeKit output a single minimized CSS file built from one “table contents” SCSS file. Pure brilliance Chris!
It’s definitely worth a “pedi-cab!” ride over to Coyier’s blog post for some great tips on better organizing your CSS life with SCSS, or more commonly referred to as SASS.