Question

Does including of unnecessary CSSs slow down a browser (Chromium, Mobile Safari)?

I mean,

function insert_style_sheet()
{
    include "style_sheet.tpl";
}

in every php file. The template file style_sheet.tpl is the following:

<link rel="StyleSheet" type="text/css" href="css/main.css">
<link rel="StyleSheet" type="text/css" href="css/controls.css">
<link rel="StyleSheet" type="text/css" href="css/whatever.css">

Answer 1

Yes, and you can try measuring the differences with a performance analyzer like YSlow. An extra stylesheet or two may have a negligible speed effect, depending on how big it is. Essentially, more stylesheets adds this to the pipeline:

• More CSS rules that the browser has to check each element against
• More HTTP round trips to grab the CSS file (reducing the number of HTTP calls is of great importance, look into combining your stylesheets)
• More bytes that have to be downloaded

As Paul Irish recently tweeted, “When you’re optimizing performance of your site/app, your priorities are 1. Network connections 2. DOM access 3. Javascript optimizations.”