Home/ Questions/Q 54785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T17:16:30+00:00

Usually when I build a site, I put all the CSS into one file,

  • 0

Usually when I build a site, I put all the CSS into one file, and all the properties that relate to a set of elements are defined at once. Like this:

#myElement {     color: #fff;     background-color: #000;     padding: 10px;     border: 1px solid #ccc;     font-size: 14pt; }  .myClass {     font-size: 12pt;     padding: 5px;     color: #ee3; }

I’ve been considering splitting up my definitions into a number of different files (colours.css, layout.css, fonts.css …) as I have seen recommended. Something like this:

/* colours.css */ #myElement {     color: #fff;     background-color: #000;     border-color: #ccc; } .myClass {     color: #ee3; }  /* layout.css */ #myElement {     padding: 10px;     border: 1px solid; } .myClass {     padding: 5px; }  /* fonts.css */ #myElement {     font-size: 14pt; } .myClass {     font-size: 12pt; }

To reduce HTTP requests, I’d be combining the files and stripping whitespace prior to rollout, so that’s not an issue, but my question is: does having all those selectors repeated over and over cause any performance issues in browsers?

Alternatively, are there any tools which avoid this (potential) issue by merging definitions from different files? ie: take the input given in my second example (3 different files), and combine them into one file, like the first example.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The browser will have to find all the definitions and then add them up and override the different properties based on the latest definition. So there will be a slight overhead.

    That being said it would be rather minimal and not very noticeable even on hardware 5 years old. The browsers are quite efficient at it these days.

    • 0