Do I really need the "theme-overrides" method to handle custom CSS properties?

[alvarofranz]

The Hubspot CMS boilerplate theme uses a theme-overrrides.css file which redefines properties that can be edited via the theme settings.

But it confuses me to have different properties for the same element in different files, I don't see the point.

I tested using the variable directly in the normal original CSS file where the element is being defined, as follows:

.header__icon:hover {
color: {{ theme.global_colors.secondary.color }};
}

And it works fine.

To me, this is more logic than having a separate file handle "the overrides".

But since that is the way this is currently being done for the official boilerplate theme... I wonder: why? what's the catch?

Thanks.

[GRajput]

Hi @alvarofranz 

There are a few reasons why HubSpot uses a separate file for theme overrides.

* **Simplicity:** Having a separate file for overrides makes it easier to see what changes have been made to the theme. This can be helpful for developers who are trying to troubleshoot problems with the theme.
* **Scalability:** As the theme becomes more complex, it can become difficult to manage all of the styles in a single file. Having a separate file for overrides makes it easier to add new styles without having to worry about breaking existing styles.
* **Flexibility:** Having a separate file for overrides gives users more flexibility in how they customize the theme. Users can choose to override individual styles or entire sections of the theme.

However, as you mentioned, there are also some drawbacks to using a separate file for overrides.

* **Duplication:** If the same style is overridden in multiple places, this can lead to confusion and errors.
* **Maintenance:** It can be more difficult to keep track of changes to the theme if they are spread out over multiple files.
* **Performance:** Using a separate file for overrides can slightly impact performance.

Ultimately, the decision of whether or not to use a separate file for theme overrides is a trade-off between simplicity, scalability, flexibility, and performance.

In your specific case, it sounds like you are using a simple theme and you are not concerned about performance. In this case, there is no need to use a separate file for overrides. You can simply add the override to the original CSS file.

However, if you are using a complex theme or you are concerned about performance, you may want to consider using a separate file for overrides. This will make it easier to manage the theme and to troubleshoot problems.

Hope this will helps you out. Please mark it as Solution Accepted to help other Community member.

Thanks!

[alvarofranz]

Thanks for the insight, this helps!

[alyssamwilie · Accepted solution]

No, you do not have to set up your theme in exactly the same way as the boilerplate is. It's just a guideline. Having this separate file can be useful for certain development builds and it's likely this override was added to account for that, but it certainly isn't applicable to all development setups.

I for one use a separate file for theme settings because:

1. I set all these settings as CSS variables that can be more easily changed depending on other settings (dark mode, module settings, etc)
2. My builds uses Sass and HubSpot variables are not able to be compiled properly in scss files.

[alvarofranz]

Thanks, I appreciate your feedback.