-1

So I have an issue on how I should implement a few webpages. Since having more < link > would slow things down because more HTTP request = slower, I decided to put the desktop's, tablet's, and mobile's stylesheet into one single css file using @media rule. However, I have more than one page where every page has the same header and footer but different content section so I need to customize each content's css. My issue and question is whether to put all the content's css into the same single file so there is one css file or split it so there's a common css file plus another css for each page. Example structure of the differences:

Option 1 - One single css file:
  - home.html
      - common.css
  - page-one.html
      - common.css
  - gallery.html
      - common.css

=== or ===

Option 2 - Split css file:
  - home.html
      - common.css
      - home.css
  - page-one.html
      - common.css
      - p1.css
  - gallery.html
      - common.css
      - gallery.css

Reason I can't decide which method is I'm not sure how css files are parsed. I assume web browsers go through the whole css file and looks for the tag (i.e: #myHeader) in the html from bottom to top then applies when it tags matches. Kind of like this:

while(!End Of *css* File){
    while(!EO *html* F){
        if(cssTag == htmlTag)
            applyCss()
    }
}

So, if in this case, I'd assume css tags that aren't even in the current html page would slow things down since it has to go through the whole html page to apply style or not before going to next style. Option 2 removes this issue but poses the issue of having an extra HTTP request each page. Now, my example has only 3 pages but I actually have 8-10 pages. With that many pages, the time spent looking to apply styles on the current page would be greater (Option1) but is it greater than an HTTP request (Option2)?

Improve this question
3
  • Did you consider Option 3: common.css + <style> block on pages (where necessary) ? Commented Jul 5, 2016 at 2:34
  • Well, (custom).css are like at least 15 lines that can reach 100+ lines, which can get messy. And I like to keep html and css separate Commented Jul 5, 2016 at 2:40
  • why not 1 common css that applied to all the pages and the individual css that applies to specific pages? Commented Jul 5, 2016 at 2:46

2 Answers 2

Reset to default
1

The answer to your question depends on how complex your site is. If your site only has a few pages and is quite simple using one css file wouldn't be a problem.

However, I recommend using multiple css files instead or large websites because its better and keeps each page separated.

If you're wondering about how long it takes for the html & css to load, its exactly what Hugo Silva mentioned. How good your hardware is and what browser that you are using, including your internet connection speed.

Your html and css files all together just aren't probably even 1mb.

If you're really that concerned, then create a preloader that runs until every file,image,video or whatever script gets fully loaded.

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

Comments

1

I don't think you are going to get a straight answer out of this question as it would depend on browser, system, hardware, connection speed, contents of your files, etc... but for a 8-10 page site, or the amount of CSS you seem to be working with, I doubt you would be able to notice any difference in performance either way. I would go for the single file, for the sake of convenience.

Improve this answer

1 Comment

Without even looking at your site, I can guarantee this is the least of your worries (albeit perhaps a good thought, misguided). Do whichever works best for you. As @hugo-silva mentions, a complete answer would depend on a lot more nuanced issues including your ability to set and maintain headers, caching strategy, size of each file, etc. I would also investigate how css files are actually parsed, as it's not a secret and it's not quite how you speculate.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.