Here is 3 css file (one is only for IE)
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
If i keep divide scree.css into these css in my website
Now it will be 6 css ( one is only for IE)
<link rel="stylesheet" href="css/blueprint/reset.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/grid.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/typography.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/forms.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
If i go for method two for a website even after production . Does it really slowdown the website page loading speed? if yes then how much? How much these 3 extra style sheet will affect site performance?
Combining them into a single stylesheet reduces the number of HTTP requests a browser needs to make to load a page. However, after the first time a stylesheet is requested, assuming you’ve configured your cache directives correctly, the browser should have it cached and thus subsequent page loads won’t see much of a difference.
Use a tool like Google’s PageSpeed plugin or Yahoo’s YSlow to figure out what’s actually causing performance issues once you have most of the site in place, and optimize the things that matter. Don’t worry about it before then.