Stylesheet Wrangling With SCSS

 

Last week, I gave a talk on creating optimal CSS using SCSS, at O’Reilly’s Velocity conference here in NYC. While giving my first conference talk to such a large audience was daunting, it was a huge honor. It was fantastic to meet so many brilliant people from our industry in one place, and from such a wide range of web development roles. Since dev ops isn’t something I’d call myself an expert in, I found myself really awed by the work the ‘other side’ of the technical stack has to put into keeping their products up, online, and functioning well for us front-end developers.

Inspired by several personal learning experiences and articles like Roy’s Tomeij’s “SASS doesn’t Create Bad Code, Bad Coders Do,” I put together a talk covering all the pitfalls of nesting. Specifically, we discussed how SCSS doesn’t magically fix overly specific selectors, the use of extends, mixins, and compass spriting, and we had a great Q&A about further performance optimizations and workflow tools.

This topic was close to my heart based on experiences on several projects at Roundarch Isobar. For example, when working on a fairly complex site for one of our larger financial services clients, one of the major challenges we encountered was keeping the stylesheets organized and performing well while working with a large team of developers. In order to keep styles consistent across such a large code base, we decided to make use of SCSS to help us keep our styles consistent. It was also a learning experience for most of the team, as SCSS was fairly new at the time we started, so we rapidly learned by trial and error.

I certainly learned a lot, and hope the attendees did too. For those of you that couldn’t make it, I can sum up the talk in just a few lines, “Use CSS. Don’t nest. And always check what your preprocessors are generating.”

More information and slides from the talk here:

More News

| 17th Apr 2019

Playtime is over when it comes to digital experiences

Is it too late for toy giants to win in digital?

| 16th Apr 2019

Brand equity gut check: A System 1 approach

Isobar Marketing Intelligence will be back at IIeX NA as Gold Sponsors, April 23-25 – this time in Austin, Texas

| 15th Apr 2019

Creating Single Page Applications in Adobe Experience Manager

Uncovering the opportunities of Single Page Applications in driving experience-led transformation through integration into AEM brand experiences.