How to combine multiple nested CSS files into one?

[ad_1]

I have a WordPress site and I’ve organized my CSS files to be easy to maintain. I have code pertaining to a plugin in a file just for that plugin. For instance,

I have a `pi/` folder for all my plugin custom CSS. The code for the EmbedPress plugin is in `embedpress.css`, `tablepress.css` holds the custom CSS for the TablePress plugin, etc.

​

[My CSS folder\/file structure from PowerShell tree command])

So, I created a nested folder structure that I `@import` all files into the main **style.css** file in my child theme root.

I’ve seen some comments on other posts that you shouldn’t use `@import` statements, maybe replace with `@use` or eliminate overall.

## QUESTIONS:

1. How could my current CSS organization be slowing down my site / page load speed?
2. Does it “cost” less performance / speed-wise to combine all the same CSS rules into one large file, or is there literally no difference?

Thank you for any help.

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer