XF 2.2 I have 2300+ lines in my extra.less, is it too much?

[securedme]

Would it make a huge difference in rendering the page?

How many lines do you have?

 

[Mr Lucky]

I have about a 1000, the site is very fast so I doubt 2300 would be too onerous. If it is all needed then it’s needed, but every now and again I check for anything redundant.

 

[Gemma]

Somewhere north of 20,000 last count

I've moved a lot of my edits to individual templates though and added an "include" line in the extra.less template for easier management.

For example, if you have made a large amount of edits to conversations, create a template with the edits called "extra_conversations.less" then in the extra.less template reference that template {{ include('extra_conversations.less') }}



I now have about 35 separate templates

 

[apathy]

Would it make a huge difference in rendering the page?

theoretically it could yes, bytes are bytes and every bit of CSS is going to increase the pagesize and therefore pagespeed.
i only use extra.less when i'm currently working on a skin, when it's finished i sit down and migrate all my customizations to their original relevant templates. there's no need to load member profile CSS on the board index for example, and no need to load avatar stuff on the help page.

even out-of-the-box, xenforo get's nagged for "too much CSS" on pagespeed: https://pagespeed.web.dev/analysis/https-xenforo-com-community/j7aeopa3jv?form_factor=mobile

 

[fiebrelectora]

Somewhere north of 20,000 at last count

However, I moved many of my edits to individual templates and added an "include" line in the extra.less template for easier management.

For example, if you've made a lot of edits to conversations, create a template with the edits called " extra_conversations.less " and then in the extra.less template, reference that template {{ include('extra_conversations.less ') }}

View attachment 293565

Now I have about 35 separate templates.

What experience do you have with this system?

Does it improve the loading speed of the pages or does it only serve to improve CSS administration?

Thx!!

 

[Paul B]

It just makes it easier to manage.

 

[TPerry]

I also use include lines for simpler maintenance.
Keep my prefixes in one, banners in another and so on. The general ones I will keep in EXTRA.less. I have been contemplating using TMS so that my banners/prefixes and such get applied across the board but only have to maintain them in the TMS entry.

 

[Kirby]

I try to keep extra.less more or less empty and instead modify existing less templates (like node_list.less for node icons, etc.)

Why would I do that if keeping everything in extra.less (or sub-templates that are included in extra.less) is a lot easier?

Efficiency!

extra.less is included in every page, so the browser has download the whole CSS in there even if a huge amount isn't used for the current page.

But the download size is only a (rather small) part of extra.less inefficiency.
Way more important is that the browser also has to parse all the CSS - and this can significantly affect client performance / CPU / power consumption / battery runtime.

Lighthouse doesn't complain about unused CSS just for fun

 

[securedme]

I try to keep extra.less more or less empty and instead modify existing less templates (like node_list.less for node icons, etc.)

Why would I do that if keeping everything in extra.less (or sub-templates that are included in extra.less) is a lot easier?

Efficiency!

extra.less is included in every page, so the browser has download the whole CSS in there even if a huge amount isn't used for the current page.

But the download size is only a (rather small) part of extra.less inefficiency.
Way more important is that the browser also has to parse all the CSS - and this can significantly affect client performance / CPU / power consumption / battery runtime.

Lighthouse doesn't complain about unused CSS just for fun

Is the difference in inefficiency noticable for a user?

I think it involves a lot of work to do template modifications and especially maintenance is much more difficult if the changes in CSS are dispersed over many parts of various templates.

 

[mjda]

I try to keep extra.less more or less empty and instead modify existing less templates (like node_list.less for node icons, etc.)

Why would I do that if keeping everything in extra.less (or sub-templates that are included in extra.less) is a lot easier?

Efficiency!

extra.less is included in every page, so the browser has download the whole CSS in there even if a huge amount isn't used for the current page.

But the download size is only a (rather small) part of extra.less inefficiency.
Way more important is that the browser also has to parse all the CSS - and this can significantly affect client performance / CPU / power consumption / battery runtime.

Lighthouse doesn't complain about unused CSS just for fun

Yep, this is what I do too. I don't have a lot of lines in my extra.less but I do have a pretty good number of template modifications, which I personally prefer over direct template edits.

 

[btmgreg]

Somewhere north of 20,000 last count

I've moved a lot of my edits to individual templates though and added an "include" line in the extra.less template for easier management.

For example, if you have made a large amount of edits to conversations, create a template with the edits called "extra_conversations.less" then in the extra.less template reference that template {{ include('extra_conversations.less') }}

View attachment 293565

I now have about 35 separate templates

Do you foresee this plan changing with the new updates incoming to how CSS is handled?

 

[Opus X]

It just makes it easier to manage.

does it slow the site down any?
they guy i purchased my site from does this but he said he did it more for his convenience than speed.
is it better to keep it in one big one or to use different ones for keeping up with special use code?

 

[Gemma]

Do you foresee this plan changing with the new updates incoming to how CSS is handled?

To be honest, I've not given XF2.3 much thought yet. I've installed it locally to test it out but I'm not even sure if or when I'll be upgrading - I'll wait until some themes are available and test them out, then weigh up how many of my current addons need updated and the costs. If I'm going to lose too much of my current features then I'll stay with what I've got for a while.

But yeah, I imagine there will be changes but most of my CSS works on my local site from what I've tested.