I’ve been wanting to break some of the negative myths surrounding CSS pre-processors for quite a while, so when I got the opportunity to speak at SXSWi 2014 in Austin, Texas, I knew this would be the perfect forum to do so. I also wanted to provide useful tips and techniques to get started, and reveal how this technology can help developers to vastly improve their efficiency when coding CSS.
Besides getting the chance to visit Austin again, I wanted to provide useful tips and techniques to get started, and reveal how this technology can help developers to vastly improve their efficiency when coding CSS. South by Southwest Interactive (SXSWi) is a hub for great people, amazing food and inspiring talks, an event where the whole city turns into a buzzing hive of digital creativity and innovation. This March, I joined the incredible, inspiring line-up, with my talk aiming to reveal the truth behind the myths surrounding CSS pre-processors.
I was delighted to be invited to speak at SXSWi 2014.
Myths & Reality
1. ADD COMPLEXITY TO THE DEVELOPMENT PROCESS
Instead of adding complexity, pre-processors make CSS easier to maintain; variables can be defined once at the outset (so later changes are easily made) & nested definitions prevent repetition and increase organisation.
2. LOSE CONTROL OVER THE FINAL CODE
Following a few simple rules, and getting to know the tool, code problems such as specificity or bloating can be easily prevented.
3. ADDS OVERHEADS TO THE WEBSITE
Pre-processors automatically minify / compress, so no extra overhead is added to the website; the compiled end file is just plain CSS.
4. ADDS EXTRA DEPENDENCIES TO YOUR WORKFLOW
Current set-up already has many dependencies; if pre-processors are not utilised, the CSS coding will still need to be filtered through a post-processor to add vendor prefixes or minifying, for example. The tools are available for free, on any platform, and each has huge amounts of resources so developers can get started easily!
5. TOO HARD TO DEBUG
Well-organised code should not be difficult to debug; as pre-processors mainly act to aid the organisation of code and there are tools that facilitate the debugging process. The cost of switching to pre-processors is low, compared to the huge benefits developers can gain.
Resources
Developers can easily get started, as all three major pre-processors have excellent resources available online, from documentation and tutorials to videos! An extensive list of the additional graphic tools and extra tips available are on the full slides (below).
As a final example of the power of pre-processors, here’s a sneak peek at hoisin.scss (full write-up on the way!) – a simple, responsive mini framework, written using Sass, which was developed in-house at Cyber-Duck, made to be extremely light, extensible, and truly responsive. The tool is open-source, so please feel free to fork or clone it for your own responsive web projects – or even better, contribute to the project and help us make it better (and I’d love to see what you can do).
