Elementor to Bricks Series: Global CSS Classes

In this video in the Elementor to Bricks Series, I’ll show you how Global CSS Classes work in Bricks Builder and why they’re one of the biggest improvements over Elementor. You’ll learn how to create reusable classes, style multiple elements at once, understand class inheritance, and build faster, more consistent websites.

Timestamps:

• 0:00 Introduction
• 2:26 Create CSS Class
• 8:03 Create CSS Class Category
• 10:37 CSS Hover Selector
• 11:23 CSS Classes & Breakpoints

Global CSS Classes in Bricks vs. Elementor: Why Bricks Makes Styling So Much Easier

One of the biggest workflow improvements you’ll notice when moving from Elementor to Bricks Builder is how each platform handles global CSS classes.

If you’ve ever found yourself repeatedly applying the same padding, colors, spacing, or typography styles across multiple pages, you already know how valuable reusable classes can be.

While Elementor has begun introducing global CSS classes with its Atomic Elements, the implementation is still limited. Bricks, on the other hand, was built around a global class system from day one, making it significantly more powerful and consistent.

In this article, we’ll compare how each builder handles global CSS classes and explain why Bricks offers a more scalable workflow for modern website development.

Elementor’s Global CSS Classes: A Good Start, But Limited

Elementor Version 4 introduced global CSS classes as part of its Atomic Elements initiative. While this is a step in the right direction, the feature still has significant limitations.

The biggest issue is compatibility.

Global classes only work with Elementor’s newer Atomic Elements. Many of the platform’s legacy widgets, including common widgets like Login, Forms, and other older elements don’t support the system.

That means developers often end up mixing reusable styles with widget-specific styling, reducing the benefits of adopting a global CSS workflow.

If you’re building large websites, this inconsistency can quickly become frustrating.

Why Bricks Takes a Different Approach

Bricks was designed with global CSS classes at its core.

Every element in Bricks can use reusable classes, giving you a consistent styling system across your entire website.

Instead of styling each individual element, you create a class once and reuse it anywhere.

For example, you might create a class called:

• padding-blue-bg

Rather than naming classes after where they’re used (such as hero-section), it’s better to describe what the class actually does.

Good class names describe functionality rather than location, making them easier to understand months or even years later.

Creating Your First Global Class

Creating a reusable class in Bricks is straightforward:

1. Select an element.
2. Create a new CSS class.
3. Give it a descriptive name.
4. Apply your styles.

Once the class is active, every style you modify is automatically saved into that class instead of being tied to a single element.

For example, you could create a class that adds:

• 60px of padding
• A blue background

Any element using that class instantly inherits those styles.

Reusing Classes Across Your Website

The real power of global classes becomes clear when you begin reusing them.

Instead of manually recreating styles, you simply assign an existing class to new containers, sections, or blocks.

Even better, updating the class updates every element using it.

Need to reduce the padding from 60px to 20px?

Change it once, and every instance updates automatically.

This dramatically reduces repetitive work while keeping your site’s design consistent.

Understanding Visual Indicators

Bricks provides helpful visual cues to show when an element has a class applied.

When a class is active:

• The class is highlighted while editing.
• Style controls display colored indicators.
• You can immediately see which properties belong to the reusable class.

These visual indicators make it much easier to manage complex layouts without accidentally overriding styles.

What CSS Classes Can and Can’t Control

It’s important to understand that CSS classes only manage CSS properties.

Anything related to presentation, such as spacing, colors, borders, typography, or layout can be saved inside a class.

However, content-specific settings cannot. These non-CSS settings remain unique to each individual element.

Organizing Classes with Categories

As your projects grow, so will your collection of reusable classes.

Bricks makes organization simple by allowing you to group classes into categories.

Instead of scrolling through one massive list, you can organize classes into logical groups such as:

• Buttons
• Backgrounds
• Typography
• Layout
• Cards
• Spacing

This keeps your design system clean and makes finding the right class much faster.

Locking and Resetting Classes

Bricks also includes tools to help protect your design system.

You can:

• Lock classes to prevent accidental edits
• Reset styles back to their defaults
• Unlock classes whenever changes are needed

These safeguards are especially useful when multiple people work on the same website or when maintaining large client projects.

Creating Hover States

Hover effects are handled using CSS selectors.

Bricks allows you to create pseudo-selectors such as:

:hover

Once created, you can style hover states independently from the default appearance.

For example, you might change a container’s background color when visitors hover over it.

Because the hover styles belong to the class, every element using that class automatically inherits the same interaction behavior.

Responsive Classes Across Breakpoints

One of the most powerful features of Bricks is that global classes can change at different responsive breakpoints.

Imagine a section with:

• Desktop: 60px padding
• Laptop: 40px padding
• Tablet: 20px padding

Instead of creating multiple versions of the same class, you simply edit the class while viewing each breakpoint.

Bricks automatically stores the responsive values for you.

This creates a much cleaner workflow than manually adjusting styles on every individual page.

Keep Your CSS Strategy Simple

If you’re new to Bricks, it’s easy to get overwhelmed by discussions around:

• BEM naming conventions
• Utility-first CSS
• CSS frameworks
• Advanced architecture

While these approaches have their place, they’re not necessary to build excellent websites.

A better approach is to focus on the fundamentals:

• Use descriptive class names.
• Avoid duplicate classes that style the same property.
• Keep your naming consistent.
• Build a clean, organized design system.

As your projects become more complex, you can always adopt more advanced methodologies later.

Conclusion

Global CSS classes are one of the biggest reasons many developers choose Bricks over Elementor.

Although Elementor has started moving toward reusable styling, its current implementation is still limited to a subset of elements.

Bricks delivers a mature, site-wide class system that allows you to:

• Style every element consistently
• Reuse design patterns across your website
• Create responsive classes for every breakpoint
• Organize styles into categories
• Build hover effects with reusable selectors
• Maintain a cleaner, more scalable workflow

There is a slight learning curve if you’re coming from Elementor, but once you embrace Bricks’ global class system, you’ll likely find yourself building websites faster and with far greater consistency.