Combine CSS - to one file?

jakubz

Posted: 5 years ago

#15875 Quote

Total Posts: 184

Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:

Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

If i create file "styles2.css" and overwrite code and write:
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

This should work? or maybe you need this css also in other places / code? Do you try this?

PS Maybe you can tell me, where plugins have link to css? i check few and can't find place where you place link to css.

Maybe someone from you can help? our gogle insight  is weak, because we have too many files "blocking". After changes we should have 1-3 css…

Boyko

Posted: 5 years ago

#15878 Quote

Total Posts: 1570

jakubz wrote:

Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:

Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

If i create file "styles2.css" and overwrite code and write:
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

This should work? or maybe you need this css also in other places / code? Do you try this?

PS Maybe you can tell me, where plugins have link to css? i check few and can't find place where you place link to css.

Maybe someone from you can help? our gogle insight  is weak, because we have too many files "blocking". After changes we should have 1-3 css…

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).

Regards,
Nop-Templates.com Team

jakubz

Posted: 5 years ago

#15884 Quote

Total Posts: 184

Boyko wrote:

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).

Hi! well we have only 35 points on mobile... so i need to try. Of course we can reduce products on page, and then it's looks better. We have higher sell when we show 48 products on page :/ I was thinking about "something" blocking, and in first loading page "show only 12/24 products", and "load later" (like your infinity scroll)… and in second load show 48 products, when all other information are download… But it's hard to do i think ;)

I decide to combine some plugins (which show on the same page). Ribbons / filters, and resign from combine ROPC, quick tabs, store lockator etc.

Still don't know what to do with this 480px / 720px css…

But thanks for your answer.

jakubz

Posted: 5 years ago

#15891 Quote

Total Posts: 184

Boyko wrote:

Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:

Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

If i create file "styles2.css" and overwrite code and write:
Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).

Well i do this, and remove from all css: air styles, and variant-2 which i don't use. My on mobile increase from: 36 points, to 56 points (and still can combine 2-3 css files).

But i must move it back, because have some problems:

I change in Themes > Element > Views > Shared > Head.cshtml and set only:

tml.AppendCssFileParts("~/Plugins/SevenSpikes.Core/Styles/perfect-scrollbar.min.css");

    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles-all.css");
    }

but from some reason it's still "download" "style.css" file from somewhere? I clear cache, buts nothing change. (when i have both downloaded… page css is broken. and gogle insight don't show better result… I try it on local and it's works fine... but on prodution

Can you help me? Is any other place where i should change css path? maybe it's a local problem...? Maybe you know.

jakubz

Posted: 5 years ago

#15893 Quote

Total Posts: 184

Ok. It's maybe something in cache... i change styles name, and it stop download it, and works:)

Still lots to do, but... 50 points reached;)

jakubz

Posted: 5 years ago

#15911 Quote

Total Posts: 184

Boyko wrote:

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).

Hi! i remove, from element shared head… /Themes/Element/Content/CSS/styles.css but when i go on firefox i still see this link. I try ctrl + F5 :/ Google insight don't show me this link in result. But on firefox ctrl + F5 nothing change :/ i rename thi sfile so it's not downloaded again… but i'm little worry there is some mechanism to add this? Maybe you know? I change razor file \Themes\Element\Views\Shared\head… and don't find in other places styles.css:/

Maybe you can ask collegue is maybe another place to check?

Combine CSS - to one file?

Products

Resources

Support

About Us

Secure payment with

Combine CSS - to one file?

Follow us

Products

Resources

Support

About Us

Secure payment with