Utility classes, which are typically provided by a CSS framework, are superior to styling at the ID level in any page builder that doesn’t offer a class-first workflow (assuming the page builder gives you an easy way to add the utility classes). This is because you’re defining styles once and using them over and over again.
Another benefit to utility classes is that they don’t bludgeon your site with ID styles, which have high specificity and are difficult to override.
However, utility classes aren’t nearly as helpful in a class-first page-building workflow. This is because assigning custom classes to elements is much more powerful, preferably using BEM methodology to keep your classes readable and organized.
While utility classes are quick to add and super efficient, they don’t offer a single source of truth for styling. “Littering” utility classes everywhere is better than styling at the ID level but is still far behind custom BEM classes regarding maintainability.
But the game is about to change.
The introduction of components in page builders like Bricks and Cwicly and the introduction of “partially synced patterns” in WordPress’ block editor introduces a new way to achieve a single source of styling truth for an element or group of elements.
Even though this feature mimics the concept of “components” that have been around in programming languages for decades, I actually prefer the term “partially synced patterns” over “components.” Going forward I’ll refer to these as PSPs.
Where CSS classes give you a single source of truth for a block’s styling, PSPs give you a single source of truth for the styling, as well as some of the HTML, PHP, and JS associated with that block.
You can think of a partially synced pattern like a “mini template.” For example, you can have a “Service Card” PSP that controls both the styling and HTML/PHP/JS of every service card on your website (except for any that you might manually “unsync”).
They’re referred to as “partially synced” because the content of each instance can be unique (not synced) while the core styling and structure both remain synced.
Let’s get to the point of this post. Since a partially synced component is inherently a single source of truth, you can style it with utility classes rather than BEM classes if you prefer.
This means you can style it faster, you won’t have to bother adding classes to every element, and you won’t have to struggle to come up with names for your classes (naming things is hard!).
Now, this doesn’t mean you should switch to a pure utility-first workflow. Why? Because not everything should be a PSP.
What it means is that utility classes and BEM classes can now work much better together throughout a project. And we no longer have to look at the use of utility classes in repeating elements as “littering.”
Achieving professionalism and maintainability in projects with the block editor and certain page builders is about to get much faster and easier. Rejoice.
