Difference between virtual and global classes

[Dev.tomi]

I still don’t understand the difference between virtual and global classes workflow.

Can somebody explain it to me please?

[StrangeTech]

Hi @Dev.tomi,

Virtual classes are specific to the current page - they allow you to re-use existing classes from other blocks and/or any other classes that may be dynamically loaded within that page. To edit virtual classes from existing blocks, you edit these directly on that block.

Global classes are usable from anywhere on the site. To edit global classes, you can do so either from the dedicated panel in the inspector, or by selecting a global class chip when it has been applied to a block.

[Dev.tomi]

Thanks, but I still can’t understand the difference…

To me, virtual classes are the same as global classes (a normal CSS class workflow).

Can you please describe an example for a virtual class use case?

[StrangeTech]

They do similar things but in different ways.

A virtual class essentially allows you to reuse styles from an existing class, usually one from another block that you have already created on the current page.

A global class is more flexible and isn’t specific to the current page.

Aside from those considerations, in terms of what they actually do, they are similar in that they provide styles from another class to the block you apply them to.

You may also find this post useful:

Q to Classes, Presets and how to use it right in Cwicly

@jonn_mc, for sharing button styles across multiple pages of the entire site, global classes are likely to fit your needs better because virtual classes are specific to the page you are in. The Cwicly docs for global classes cover the general usage and you can add and remove them from the dedicated panel, although I personally recommend the following shortcuts. To associate a global class with a block: While editing a block select the global class button Type the name of the class you want t…

[StrangeTech]

@Dev.tomi

Can you please describe an example for a virtual class use case?

We prefer to use global classes in general because we find it more efficient and maintainable to organise the site that way, so I’m probably not the best person to advocate for virtual classes or explain their benefits.

[Dev.tomi]

Thanks @StrangeTech but I still don’t see the difference…

Anybody who can provide real life example on how virtual classes are different than global class?

[hopscotch]

A virtual class is like adding another class to H3 or div. For example:

[sunny]

You use global classes when you intend to add styling to them using the Cwicly UI. You are creating a global class object within Cwicly.

With virtual classes, you don’t add any styling to them. The class should already be styled elsewhere. All you are doing is adding the class name to your element in the HTML.

An example is if you have a custom stylesheet with utility classes.

You would add them as a virtual class, since you don’t actually need to add any styling to the class inside the editor.

[Dev.tomi]

Thanks @sunny ,

finally it now makes sense to me.