Multiple CSS files in header?

Question

I have a PHP script that has two CSS files in it's header. One of the CSS files only have about 5 short lines in it.

Is is safe to move that one into the larger CSS file? What's the point of having two separate CSS files when one is only a few lines?

"Is is safe to move that one into the larger CSS file?" — Depends on where else it is used. — Quentin
– Quentin, Commented Jan 9, 2013 at 11:18
"What's the point of having two separate CSS files when one is only a few lines?" — Separation of concerns. Different CSS for different pages. Etc. We can only speculate why the system you are working on is set up that way. — Quentin
– Quentin, Commented Jan 9, 2013 at 11:19
exactly.. if both css files are required in all your files then merging them will save bandwidth. as browser has to request only one file. :) — Mithun Satheesh
– Mithun Satheesh, Commented Jan 9, 2013 at 11:19
@mithunsatheesh true, but saving that one HTTP request is often pointless micro-optimization. Proper organization of your workbench is important, especially in an unstructured language like CSS, and having separate files are one part of it. (If you're serious about saving requests, setting up a deployment mechanism that automatically merges CSS and JSS might be worth thinking about) — Pekka
– Pekka, Commented Jan 9, 2013 at 11:20
@Pekka웃: i agree brother.. i just pointed out incase it matters (incase he is working on a mobile website) !! where bandwidth matters. — Mithun Satheesh
– Mithun Satheesh, Commented Jan 9, 2013 at 11:23

Chris Visser · Accepted Answer · 2013-01-09 11:20:49Z

1

Yes their is a point in it. I have for example a design.css that handles all of the colors, a layout.css pure for positioning and sizes and I have a interaction.css which handles the animations etc..

There is no problem in combining the CSS file as long as it doesnt affect readability.. Just keep in mind that the structure must remain:

file1.css file2.css

results in on file containing the below code in the same order:

/* content of file1.css */
/* content of file2.css */

answered Jan 9, 2013 at 11:20

Chris Visser

1,64513 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dziad Borowy · Accepted Answer · 2013-01-09 11:17:38Z

0

No point at all (in this case). You should move the few lines into another. If you have 2 separate files - there will be 2 requests to the server. You'll probably not see the difference as these are miliseconds, but it would be a "best practice" in this case.

answered Jan 9, 2013 at 11:17

Dziad Borowy

12.6k4 gold badges44 silver badges54 bronze badges

Comments

Paul Collingwood · Accepted Answer · 2013-01-09 11:17:59Z

0

In essence it helps browsers only load content relevant to the page, speeding up page load times.

There are services that can show how much of your downloaded CSS was applied to a given page.

answered Jan 9, 2013 at 11:17

Paul Collingwood

9,1013 gold badges27 silver badges38 bronze badges

Comments

Gaz Winter · Accepted Answer · 2013-01-09 11:19:01Z

0

There is no reason why you shouldnt move it into the same file.

You can have as few or as many CSS files as you need.

The advantage is only really when you have a huge number of styles and the CSS file gets large and unreadable. Then it makes sense to break them down. Or when you want to split them for different pages etc.

Its just an extra request to the server which seems pointless for only 5 lines.

answered Jan 9, 2013 at 11:19

Gaz Winter

2,9442 gold badges27 silver badges48 bronze badges

Comments

Cynthia · Accepted Answer · 2013-01-09 11:20:20Z

0

Check to make sure that your PHP script does not reference the CSS file that has just a few lines in it. If it does not, then you're in the clear to merge the two. If it DOES reference it, then consider calling the shorter CSS file inside the larger CSS file like so:

@import url('/css/smaller-file.css');

If you add that to your larger CSS file, then you should be able to just have the larger CSS file in your PHP header.

Hope this helps!

answered Jan 9, 2013 at 11:20

Cynthia

5,44313 gold badges49 silver badges71 bronze badges

Comments

Denys Séguret · Accepted Answer · 2013-01-09 17:18:32Z

0

Of course there is a point, just like there is a point in having many files of any languages to organize the content.

As having many requests is a big burden on performances, the usual solution (and mine) is to use a build script to build the version in production by concatenating all the CSS files of the directory into one. The precise way to do that depends on your building

Note that it's similar with what is done with JS files which are concatenated and minified.

answered Jan 9, 2013 at 17:18

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Collectives™ on Stack Overflow

Multiple CSS files in header?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related