CSS Preprocessors

As part of a fullstack offering, css is an essential part of all web development. On large projects it’s more efficient to use a CSS pre-processor to speed up and simplify development. At this time there are a number popular pre-processors including Less, Sass and Stylus. My personal favourite is Less, however that’s because it’s Node based which made it really easy to include in projects. Despite Less’s ease of use, Sass appears to be the dominant player with it being used for Bootstrap and Jekyll among other things.

Sass is Ruby based rather than Node and the syntax is a bit more complex than Less however once you’ve learnt the basics of one pre-processor you should not have too much trouble working with others

If you’re still using native css then it’s worth adopting a pre-processor as soon as possible. You’ll quickly find you can organise your code better and mixins and variables will save a ton of repeated code.

When you start working with something like Less or Sass you will need a build routine as the css will need compiling. Most large projects will have an automated process be it grunt, gulp or webpack and if you don’t then it’s another good/essential practice to adopt. Your build process can also help with other things like compression and auto prefixing for all those browser/vendor prefixes.

CSS Animations

Animations in css are actually really easy to work with and can bring a dull site to life without the need for any javascript. Once you’ve mastered the basics e.g. transitions, animate and keyframes you’ll only be limited by your imagination. One other advantage of CSS animations is that they use the GPU rather than the CPU and can take advantage of hardware acceleration.

Useful Resources

Do you have an app/project you'd like a quote for?

Hi there, I’m Alex and I’d love to discuss your next project with you.

I’m happy to discuss requirements, timeline, budget and any other concerns you may have.