Configuring every button vs Presets vs custom CSS class

[Bizfound]

I have a fundamental problem understanding the best practice for configuring the style of elements in Pro. It seems that the latest version of Pro with the introduction of Templates and Presets is an attempt to address this, but it has only confused me more.

If I want to have all of my buttons looks the same throughout my entire site, traditionally the best thing to do would be to configure a CSS class, and assign that class to all the buttons on my site. If I want to make changes to all my buttons, I just edit the class CSS, and all the buttons change.

With Presets and Templates, I thought it would be essentially creating CSS classes, with the advantage of being able to use Cornerstone’s great UI for configuring style settings (instead of having to code CSS manually). But that is not the case. Presets only create a starting point for an element. If you have 100 buttons on your site that you built with a preset, you have to edit all 100 of those buttons individually if you want to make a change. Doesn’t really make sense to me.

So I guess my question is, if I create a custom class and assign it to a button, does the class CSS override the settings in the Cornerstone editor? Is that the best practice for creating elements that you want styled the same way, but have different content?

[friech]

Hi There,

Thanks for writing in! We certainly appreciate the feedback. You’re pretty much right with that. Here’s Kory response to the same query (read the second paragraph).

Pro element presets

Regarding applying a custom CLASS; Yes, a custom CLASS can override the configuration of an element, given that when you declare your custom CLASS it has the more specific selector.

CSS Specificity

Hope this shed some lights,
Cheers!

[Bizfound]

It seems like it would’ve made more sense to structure your presets as CSS classes, that maintain a single definition of a specific element that can be changed and would update all elements throughout your site that has that preset applied.

Thank you for that link, I will read and learn more.

What affect does this have on performance? I would think that having a single defined CSS class would perform much better than individually styled elements, even if they are styled the same?

[christian]

Hey @Bizfound,

Thank you for your feedback. The Preset currently works only as a saved element configuration. It does not add a class to the element. I’ll post your feedback as featured request so our development team might take this into consideration in the future.

Regarding performance, in theory, yes. The single defined classes would generate a smaller size. But the builder generates CSS optimized code so there might not be much of a difference. It depends also on the amount of styles and the elements being styled.

Thanks.