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

Stuart Wright

Well-known member
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
 
Upvote 4
This suggestion has been closed. Votes are no longer accepted.

Xon

Well-known member
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

Well-known member
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

XenForo developer
Staff member
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

Well-known member
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

Active member
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?
 

Brogan

XenForo moderator
Staff member
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" />.
 

Brogan

XenForo moderator
Staff member
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

Well-known member
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.
 

Brogan

XenForo moderator
Staff member
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

Well-known member
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:

Screenshot 2021-04-15 at 9.58.47.png

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:

Screenshot 2021-04-15 at 10.02.27.png


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


Screenshot 2021-04-15 at 10.11.43.png


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:

Screenshot 2021-04-15 at 10.12.44.png
-------------

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.
 
Last edited:

Stuart Wright

Well-known member
@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?
 
Top