XF 2.1 Is it a good practice to add codes to Master style's extra.less?

[gogo]

For all codes that are to be shared by all styles created.

Or is it better to copy them to extra.less of all styles instead?

 

[kick]

This is an undesirable practice. You can create by modifying templates or create as a child style. And in 1 basically make edits

 

[Paul B]

Never use the master style - you shouldn't even have it enabled.

Add any custom CSS to the parent style of all child styles if it's the same for all.

 

[gogo]

extra.less of (Default style) contains: A B C
extra.less of (Child style) contains: D E

So in the end, extra.less of (Child style) will actually be like having A B C D E, and in that order?

This doesn't seem to be working for me. Anyway I'll check again later.

 

[Paul B]

If you customise extra.less in a child style, then it won't inherit the parent style template if the parent is ever modified again.

You will need to add all of the custom code in that case, or you can get a little creative and call a custom template in the child style extra.less and add the extra custom bits.

 

[gogo]

Thanks Brogan. That clarifies my false assumption.

I'll study the second part of your comments.

 

[Paul B]

I'll study the second part of your comments.

Let's assume you have 5 styles - one parent and 4 children, like so:

Parent

Child 1​

Child 2​

Child 3​

Child 4​

All 4 child styles share some of the common CSS from the parent, but also have their own custom CSS.

So you create a custom template in the parent called mycustomcss.css.

Then you call (include) that in the extra.less template of the child styles and add your own custom css below.

 

[gogo]

What if I want everything in extra.less (Parent) be included in Child styles?

How do I create a custom template in parent extra.less?

And what's the syntax for having it included in child styles?

 

[Paul B]

Child styles automatically inherit the parent templates - there is no need to create a custom template and include it in extra.less.

 

[gogo]

I'm confused now.

You said once the Child styles got its own codes in extra.less, then the codes in extra.less of Parent style won't pass to the Child...

And so I'll need to make the codes in extra.less as examplecsss.css that's to be included in Child's extra.less.

That's what I understand by your previous comments.

 

[Paul B]

As long as you're not going to edit the parent style template all the time, just go ahead and add the common code there and the custom code to each child style.

The child styles will still inherit the parent code but if the parent is ever changed, the child style templates won't automatically update as they have been modified.

They will be marked as outdated and you will need to merge or re-edit them.

As long as you're aware of that limitation then you can just keep it simple.