x-ref #23325 which was just closed asking the same question.

@mbabker thank you. I don't understand your point above overriding the class. Surely you can just use the new class to override or override as you would any other class?

Also I don't really understand the point in adding the class to the main div for the module and the child div. So if I do .myClass {margin:1rem;} it adds margin twice. I know this can be overcome, but there again I can do myClass > div and reach the first div. So I'm not sure what this is achieving, although again I'm sure I'm missing something really obvious.

Surely you can just use the new class to override or override as you would any other class?

You can do that, sure. But if you want to do a completely different design (not just a different margin), why should you first revert all of the existing class rules when you instead just can rename the class? That's where the suffix shines.

Also I don't really understand the point in adding the class to the main div for the module and the child div.

Yeah, that's stupid and likely related to history. Some templates applied it in their module chrome, others didn't. Thus many (again some, not all) modules decided to support it as well, resulting in it being applied twice.

@mbabker thank you. I don't understand your point above overriding the class. Surely you can just use the new class to override or override as you would any other class?

GitHub email's a little slow, but @Bakual did nail it as far as the concept goes.

So in a layout you have <div class="mymodule<?php echo $moduleclass_sfx; ?>"> right now, which means if you put "-customized" into the field you end up with the class "mymodule-customized" when the page renders, and putting " customized" (with the space) creates the classes "mymodule customized".

Why would you want to override the class? Say the module has a CSS file that applies some styling to the "mymodule" class that you want to get rid of. There are 3 realistic possibilities:

• Override module's CSS (if module supports it) with a media override
• Override layout file to remove the class
• Use the suffix field to essentially change that class name (again using the example above you'd change "mymodule" to "mymodule-customized") and do whatever you want with it

None of the ways listed are wrong, but the first two put a bigger maintenance burden on the site owner as they now need to keep either another CSS file or layout PHP file updated whereas the suffix option lets them keep their work solely in the template's CSS file.

Thank you both for responding, it really does help. I guess for me there aren't enough styles to worry about usually and I can do .mymodule.myclass to override if need be.

But it also seems inconsistent that we feel the need to be able to completely override this class and it's the only place in Joomla! I see this behaviour. I wouldn't see a media override as a huge burden on the site owner particularly, but I guess it might not always be supported. In any case, it would have to be quite a big media override to mean that I choose this over using my existing method. Well, it looks like in J4 it's coming.

For the record, although you both make good points, I think anyone coming to Joomla! would see this as an error, and that perception is so damaging that I'd swallow the CSS changes. I declare myself the winner :)

Personally I think it's a step in the wrong direction, it's removing a rather powerful (if misunderstood) feature because "it's too confusing". But we all know what they say about opinions ?

Indeed powerful to add a class (with a space) or override the original class (without a space) Should be kept. Maybe adding a small info about it under the “Class” input will help newbies to use it.

Put a space behind each class even the first one to add classes -
To override the original class, no space.

Or something like that.

Are the ID input work the same way?

Are the ID input work the same way?

Good question, I don't know. I would expect them to after this conversation.

Just went to Joomla documentation - Didn’t find that important info\ — Should be in —> Beginner Tutorials > Getting Started with Modules

You mean the "Menu Tag ID"? That one is specific to the menu module and adds an ID to the "ul" in that module output. Without that parameter set, there will be no ID at all. So it's not a suffix, it's an optional ID you can give instead of none.

I assume the same with the title classes?

You can check easily yourself. Just add "test" and see what happens in the source code.

Just went to Joomla documentation - Didn’t find that important info\ — Should be in —> Beginner Tutorials > Getting Started with Modules

You can edit the documentation to add this if you want. But it looks to be changing in J4 so I'm not sure it's worth it at this point. There would be no downside to doing so. The worst outcome is a double space.