Front-end education for the real world. Since 2018.

— From set.studio

The 3 Types of CSS Utility Classes

Published:

Check it out

This to me looks like a solid way to do things. I don’t agree with all of it, for sure, but I’m a big proponent of separating concerns.

James breaks utilities down into 3 concerns: aesthetics, layout and spacing. Aesthetic being more like CUBE CSS Blocks, layouts being like CUBE CSS Compositions and spacing acting as CUBE CSS Utilities.

To add my opinion in the ring, we’ve found that avoiding any aesthetics with utility classes to be very useful in recent projects, especially where heavy theming has been required. The point I’m making is like James’: always be open to making changes to how you approach CSS to make it work for you and your team.

Check it out

Take your skills beyond the next level with our Complete CSS course

Senior level CSS developers are so much more than syntax experts. That’s why this expansive course improves not just your CSS skills, but also those crucial, transferable core skills that will get you beyond the next level in your career.

Learn core skills, strategies, systems and approaches from Andy Bell, who has consulted on, and delivered CSS for huge organisations such as Google, Harley-Davidson, Oracle and the NHS, along with well-known brands such as BSkyB, Unilever, The Natural History Museum, British Cycling, Capita, Vitality and VICE Media.

Join over 500 others in transformimg your skills and your career trajectory for only £249.

Features include

  • Over 50 lessons, broken into 8 modules
  • Mixed written and video content
  • Support from the Piccalilli courses Discord community
  • Learn at your own pace
  • Build a stunning, real world project
  • Purchasing Power Parity and bulk licence discounts for teams

Take your skills beyond the next level