Utility Classes vs Custom Classes: How to Build Maintainable Websites Like a Pro

There's a clear line between *good* web devs and *great* web devs. If you want to elevate, this training should be a mandatory watch.

This was a highly requested training and it's been a long time coming. I've shown parts of this topic in various different videos, but it truly does deserve it's own in-depth video.

It's long, but it's *essential*, and it's littered with really important best practices throughout. If you invest the time in understanding these prices, it'll make you tremendously more valuable to your clients and to your team.

Automatic.css - https://automaticcss.com
Inner Circle - https://digitalambition.co/inner-circle/
Frames - https://getframes.io

What's covered in this training:

- Utility classes vs custom classes
- Why sites should *NOT* be built purely with utility classes (or styled at ID level)
- How to decide on utility classes vs custom classes for each section & component
- How to incorporate BEM methodology in a real build while using a utility framework
- Why "classless" copy/paste builders are a bad solution
- Classes vs "presets"
- An introduction to "contextual utility classes/variables"
- Global components vs global sub-components
- How to create your own CSS variables
- When to use a utility class grid vs a custom grid
- How to use modifier classes for global components to account for variations
- Why you should care more about maintainability and scalability than dev speed
- Many more best practices tidbits

Is your page builder legit? Watch this: https://www.youtube.com/watch?v=zWp-ms0qLvg

Happy to answer any follow up questions in the comments!

0:00 Intro & Context
04:22 Example Site
05:33 Why You Shouldn't Style Everything With Utility Classes (Or ID)
08:36 Building a Maintainable Hero Section
16:58 What Are Contextual Utility Classes
19:55 How to Make Variables
23:22 Global Components vs Global Sub-Components
30:31 When Are Utility Classes Appropriate?
37:23 Great Dev Isn't a Race
40:28 Using a Variable vs a Random Value
41:49 Creating a Maintainable List
47:06 Maintainable Signature Card
53:59 Maintainable Section Introduction
55:34 BEM Modifiers for Custom Classes
1:00:00 Utility Class Grid or Custom Grid?
1:07:50 Creating a Maintainable Card
1:18:11 Wrap-Up