Global Presets vs. CSS Classes: What’s best for building websites?

Whether it’s page builders like Divi or Breakdance, the WordPress Site Editor, or block suites like GeneratePress–all these different solutions use the concept of global presets.

A global preset is a set of predefined styles and settings that can be applied to multiple elements or pages within a website. This allows you to maintain a cohesive design and keeps the website maintainable.

So, one might say that global presets are indeed very useful.

But Kevin Geary disagrees and has even written an article called Page Builder “Global Presets” Are Weak, Limited, & Unnecessary.

If you don’t know who Kevin is, he can be best described as a WordPress influencer. He’s eloquent and brash and formulates his views as universal truths.

This explains why he’s a popular podcast guest: it drives engagements. And in the circle of WordPress influencers, that is what counts.

Part of Kevin’s view is that the Gutenberg project is primarily a failure. And I regularly get messages from people with links to Kevin’s content. And that’s because they think that if somebody is so sure about the shortcomings of the WordPress block system, maybe they also shouldn’t use it.

So they look to me, who clearly doesn’t think of the block project as a failure, for reassurance.

So in this email we will look at the dangers of the “one size fits all” approach. And why something that makes sense for one use case cannot be extended to apply to all WordPress professionals building sites for clients.

There isn’t one right approach

As I discussed in The Future of WordPress Themes: What to Expect, there is more than one WordPress.

And even within a subsection of WordPress, like ours, which builds websites for clients, there are still more sub-niches.

We see this in our work every day. Because for each challenge, there are multiple solutions on the market.

One example is search engine optimization. I always thought that Yoast SEO was just the default. But as I dove deeper into the topic, I discovered RankMath. And also heard from people that swear by All In One SEO.

So who is wrong here? Well, none of these people are.

And that’s because it depends on:

  • What you’re optimizing for.
  • What downsides you’re willing to live with.

Optimizing for the builder

When building a WordPress website, we can either optimize for the person building the website, or for the person using the website.

In Kevin’s case, he goes even as far as saying that clients shouldn’t edit their own website.

Now I’m not saying that clients absolutely need to edit their own website. But I’m fervently against keeping clients from changing their website.

But given this viewpoint, Kevin recommends that you use Bricks Builder. Which is similar to Webflow, in that it is a tool for web professionals, not end users.

Bricks has built-in support for CSS classes, which is what Kevin uses for styling. Kevin even sells his own CSS framework, Automatic CSS, which provides prebuilt and pre-styled components for Bricks.

Now, this is all great, but the reality is this: this is not an approach designed for end users.

So, recommending it to every freelancer and agency out there is misguided.

There’s nothing wrong with CSS. It’s a powerful tool for developers. But it’s not a good fit for people that want to create easy to use visual editing experiences.

This is in addition to the fact that this entire web development workflow depends on one plugin targeted at a niche audience. I’m wary of recommending that anybody makes their livelihood so dependent on one piece of software.

Instead, I recommend relying on WordPress Core as much as possible.

Optimizing for the end user

If we want to build websites that our clients can edit, then CSS is not an option. I cannot expect my clients to know which class to use when, or even how to combine classes to get to a specific outcome.

So presets are the best way to allow users to customize the appearance of their website, without having to deal with low level tools such as CSS.

Whether your clients want to publish articles or create landing pages, you must provide them with guardrails. And presets are a key component of these guardrails.

They allow clients to focus on creating content and pages and keeping these new pages aligned with the business’ brand identity.

Because there is a big difference between WordPress Core and the rest of these page builders.

And that is that you can expose users to presets, but you don’t have to. And you can give clients the ability to change styles, but again you don’t have to.

Because WordPress has an entire set of tools builtin that allow you as the site developer to control which customization options are available to your client.

For example lots of marketers are used to working with Hubspot pages. A tool that they all rile against. So for this type of user, you can give them access to all the color palettes, font sizes, block styles,… that they need to build out landing pages themselves.

But what about a restaurant owner? Do you expect him to find his way among all these styling options?

No. So he only gets access to a few pages, and everything is locked down to enable content editing, and not page building.

And the good thing for you as a developer is that you can cater to both use cases with the exact same building approach.

Implementing presets in your block themes

This article focused on the high-level approach to building websites. Next week, we’ll get into the details.

And that is the best practices for implementing presets in block themes. With a specific focus on websites built for clients.

Cheers,
Fränk

P.S. For a limited time I’m making a set of lessons from my Block Theme Academy course accessible to the public for free.

The lessons in Building a simple block theme from scratch will teach you the fundamentals of building a theme with the Site Editor.

Fränk Klein Avatar