CODEWITHSUNDEEP
css
Mohammed Ibrahim
Mohammed Ibrahim

Reputation: 533

Is it good if I split my CSS file into multiple files for each page?

I'm Building a website, and It has a lot of pages approximately like 30 pages, and I linked these pages with one CSS file (the main css files) not to mention the other files such as bootstrap.min.css and other plugins that requires their own css files.

My point is that in all of these I'm using like the same css files, but in some pages I don't need all of the properties and styles in main.css file, so I'm thinking that I split that css file into multiple files, and create file called (global.css) and type in the properties that I'll need in all pages, and make another css file for each individual page.

My question is:-

Is it going to be helpful for the website speed if I split that main css into multiple css files and include only the necessary things for each page?

Upvotes: 2

Views: 3553

Answers (2)

Jethro Hazelhurst
Jethro Hazelhurst

Reputation: 3285

Ideally you want to abstracts your CSS files into many different SCSS files and then compiles them into one minified master file. One file for the header styling, one for links, one for typography. I was afraid of SCSS but now love it... Nothing changes in production, you are still running off CSS bit in development you are just making your life that little bit more organised.

Upvotes: 1

Rahul
Rahul

Reputation: 4364

NO,

you better dont want to do that if your code is small like less that 50kb or even 100kb

also if you provide seperate css for each page browser has to download each css file when user visit that page that will cost you one additional request for every single page this will slow down your page and affect your performace

instead I would suggest when your code goes live compress your code or minified it so youll get the more smaller version of your code

I also suggest to leverage browser caching (using .htaccess if you are using linux server)

above are the things which comes under front end performance improvement

Upvotes: 1

Related Questions