Not planned Conditional statements in .less templates to reduce redundant css

[Stuart Wright]

I use extra.less to add quite a lot of custom css in one convenient place. 450 lines worth.
However, since much of that css only applies to specific pages, there is quite a lot of css being included in pages for which it is not relevant and Google's Lighthouse suggests removing redundant css to increase page speed.

For example, I have put custom styling on the forum list. One page. But that css is being included on every page.
I would like to wrap conditionals round the css so that it is only included when the current page or template matches.
I understand that this is not currently possible.
Could it be added to Xenforo?
Thanks

 

[Xon]

Rather than extra.less I've taken to putting non-global css into the relevant CSS file that is being overridden at the start or very end with the eye to merge any out of data templates. This tends to reduce the amount of clutter which needs to be loaded but isn't used.

 

[Kirby]

I understand that this is not currently possible.

I'd say it is (in some way).

extra.less is convenient, but it is not efficient - especially if you add CSS to overwrite/undo rules defined elsewhere.
The most efficient way would be to change the specific less templates that apply, eg. in this case it would be node_list.less - that's how the system was designed.
You could to that by either manually modifying the template - or by using a template modification.
If you use template modofications, you still have all your modifications "in one place".

While it would be quite easy to make it possible to use conditions in extra.less, that would most likely make rendering CSS (I refer to the process of converting templates to actual CSS on the server) slower and wouldn't solve the problem of "overwriting" existing rules.

 

[Mike]

In terms of the core suggestion, this is realistically not going to happen. Any sort of conditionals in a CSS file that don't depend on very specific environmental elements won't happen because it essentially breaks cacheability.

As mentioned, extra.less is really more about convenience than anything. If you really only want CSS loaded in specific places, you can create a custom template and then call that as needed. This is how the core and add-ons generally function. (If there's an existing CSS template that you want to depend on, you can also either directly modify that template or use a template modification as well; creating a new template is needed if there isn't an existing CSS template that you can extend.)

 

[Stuart Wright]

Thanks for the replies. I'll learn how to implement the more efficient solution.
Is there a resource you can point me to that I can use to learn, please? I currently don't know where to start.
Cheers.

 

[kelle67]

Rather than extra.less I've taken to putting non-global css into the relevant CSS file that is being overridden at the start or very end with the eye to merge any out of data templates. This tends to reduce the amount of clutter which needs to be loaded but isn't used.

Can you please explain this in more detail with an example?

 

[Stuart Wright]

I'm just editing the original .less templates. More hassle when upgrading, but hey.

 

[Paul B]

It's not really any extra work - in most cases templates can just be merged.

As Mike said though, you can also use template modifications, or create your own custom .less templates and include them on the pages you want using: <xf:css src="template_name.less" />.

 

[kelle67]

I'm just editing the original .less templates. More hassle when upgrading, but hey.

Yes I know, I do that a lot of time. But the Ugrade is sometimes a small problem.

@Brogan I just trying a template modification it works fine.
Is that the better way?

 

[Paul B]

It's personal preference really.

Template modifications mean you never have to worry about merging templates.

On the flip side, after each upgrade you will need to check the template modification is being applied, depending on what is being inserted and the criteria used to do the replacement,

 

[nocte]

IMHO the easiest way to add some styles is a template modification for the extra.less template:

Template: extra.less

Search type: Regular expression

Find: #$#

Replace: Your styles..

That way the styles you save are automatically appended to the end of the extra.less template. You can use the same technique in multiple addons.

 

[Paul B]

IMHO the easiest way to add some styles is a template modification for the extra.less template:

That defeats the point of the thread though.

The thread author doesn't want the CSS loaded on every page view, hence the suggestion to modify the less templates directly, use template modifications, or call custom less templates in the core less templates.

 

[BassMan]

As Mike said though, you can also use template modifications, or create your own custom .less templates and include them on the pages you want using: <xf:css src="template_name.less" />.

Template modifications mean you never have to worry about merging templates.

On the flip side, after each upgrade you will need to check the template modification is being applied, depending on what is being inserted and the criteria used to do the replacement,

@Stuart Wright

This is how I like it and do it. With template modifications (TM). Just check it after the XF upgrade.


Example:

I want to change the node icons. The core template that affects this is node_list.less.

Then I create a new template called extra_node_list.less (I always add prefix extra and the name of the core template, it's easier for me to find it after).

Create a TM for template node_list.less and set it as shown below:



So, in the Find field the characters are /^.*$/s.

As you can see I include that newly created template to this TM. That way I will never have to edit the code in this TM because it is also easier to do it in the template itself. And you have a regular expression search type that helps with XF upgrades because it will always add your extra template at the top of the template like this:




Now you just add your custom code to extra_node_list.less template, for instance:





It's also a lot easier to find the template (for me). Just type extra to the search field and you'll get a list of all your extra templates:


-------------

For me, it works (although I'm still in a process of moving all the code out from extra.less template to a more specific one as shown above; yeah, I was lazy). You just need to find the right core template and create your extra template and TM once.

I hope that helps.

 

[kelle67]

Thank you @BassMan very well explained.
I will bookmark that.

 

[Stuart Wright]

@Stuart Wright

This is how I like it and do it. With template modifications (TM). Just check it after the XF upgrade.


Example:

I want to change the node icons. The core template that affects this is node_list.less.

Then I create a new template called extra_node_list.less (I always add prefix extra and the name of the core template, it's easier for me to find it after).

Create a TM for template node_list.less and set it as shown below:

View attachment 250292

So, in the Find field the characters are /^.*$/s.

As you can see I include that newly created template to this TM. That way I will never have to edit the code in this TM because it is also easier to do it in the template itself. And you have a regular expression search type that helps with XF upgrades because it will always add your extra template at the top of the template like this:

View attachment 250293


Now you just add your custom code to extra_node_list.less template, for instance:


View attachment 250294


It's also a lot easier to find the template (for me). Just type extra to the search field and you'll get a list of all your extra templates:

View attachment 250295
-------------

For me, it works (although I'm still in a process of moving all the code out from extra.less template to a more specific one as shown above; yeah, I was lazy). You just need to find the right core template and create your extra template and TM once.

I hope that helps.

Thank you, very useful. Would it not be preferable to add the template modifications at the end, though, rather than the beginning, so that you can override any CSS in the template?

 

[BassMan]

Would it not be preferable to add the template modifications at the end, though, rather than the beginning, so that you can override any CSS in the template?

Actually, you can do that too. Just switch the lines in the Replace field like this:

 

[Stuart Wright]

Actually, you can do that too. Just switch the lines in the Replace field like this:

View attachment 250296

Thanks I'm going to look in to doing it this way.