Base classes for each block?

Just thinking out loud here.

Removing the block defaults in v1.2 was a big step forward. The styling was always tied to the block specific class (ex. div-c4c1c4a), so this made the styling hard to override due to specificity and of course added unnecessary bloat to your stylesheet.

I think base styling via broad classes can be quite helpful in speeding up your workflow though. We now see this with image elements that automatically have the class .cc-img applied and have this styling:

.cc-img {
height: auto;
max-width: 100%;
vertical-align: middle;

It might be a good idea to expand this out to other elements as well.

For example, for most my divs I’ll generally want to use display: flex and align-items: flex-start.

I don’t think Cwicly should necessarily add that base styling, but it’d be nice if there was an easy way for me to add it.

Divs currently only have a specific ID and class (ex. <div id="div-cc9b376" class="div-cfe80e6">).

If they had the base class .cc-div, it’d be a lot easier for me to add my own styling.

I know I could currently use something like div[class*=“div-”] to target all of Cwicly’s div elements, but when unused block-specific IDs and classes are removed in a future update that will no longer work.

I could also add my own global class, but it’d be nice not to have to apply it to my divs every single time.

I took a look at Bricks, and they have a base class for every element as well:

Thoughts?

I had the exact same thoughts but had one doubt.
Only the classes which I actually use should appear in my HTML.
If this is possible somehow, it’s a clear yes from my side.
I just don’t want to bloat my DOM with something unnecessary.

1 Like

That would be cool. Maybe you could have a Block Defaults section under Global Styles for every block type. Then if you set a style, the base class shows up on the front-end.

Regardless, I would also definitely be fine with one class per block like in that Bricks screenshot if it meant I could set base styles.

1 Like

How about the opportunity to add default global classes to blocks?
Every time you add a block, this specific class is automatically attached to your block (appears under the class field as global class).
You would still be able to remove it, so you wouldn’t even need to override it.

Not sure if I made it clear, but I suggested it a couple of days ago.

Not sure, but maybe we’re sitting in the same boat already.

3 Likes

That’s a pretty good idea as well.

Only issue I can think of: what happens to existing blocks when you add a new default class?

Well, this could be discussed.

Default option should prevent design breaking behavior which means that the class(es) needs to be added manually afterwards to blocks that already exists.

But there could be an option as well to add a class or classes to all blocks of a specific type, which would even open more possibilities than the actual intended one.

These classes could be placed inside the global styles stylesheet, so they can be overridden at any time, also with any other global class.

2 Likes