multiple CSS sheets or cram into a single sheet, Multiple html pages single sheet or one for each Options

[jimbondy]

Hello.
I'm kind of new to HTML, CSS, and js and wondering what is the most efficient way to go. I will have about 8 pages on the website which I'm creating. My 'home' sheet is completed in both HTML & CSS but there is a fair amount of CSS code. I was thinking that it would be a lot cleaner, (& less confusing), to create a different CSS page for each HTML page. There are similarities among the 8 pages but plenty of alterations throughout, so I would copy everything from the 'home' page to each and make the necessary changes.
I don't see this as a problem to do

1) is this good practice or considered a faux pas?
2)Will it create an issue when I upload to GitHub?
3) Do you have an alternate recommendation?

If I put it all on one CSS page with a smattering of comments throughout pointing to the 8 pages, it will be a mess and quite unreadable, not to mention clunky for the server.

I very much appreciate any help you can give me.
JimmyB

[pandy]

It's a matter of taste, anything goes. Since you say a lot of things are common and that your style sheet is growing big, you could put the common stuff in one style sheet (that you link to from every page) and then make separate style sheets for the individual styling.

You could also just have sections in the main style sheet for those page specific styles. For readability, I mean. Maybe you don't know that you can target a specific page by putting an id in the BODY tag?

Say one of your pages is dogs.html and another is cats.html. Then you could use id="dogs" in the body tag for dogs.html and id="cats" in the body tag of cats.html (it doesn't really matter what you call them). Then you can use what's called contextual selectors. You can say a contextual selector combines two selectors and the second one must be contained in the first one to match.

For instance...

CODE

p em   { font-weight: bold }

... matches every EM that is contained in a P, but no others.

So to target your cat and dog pages you can go like this.

CODE

#dogs h2    { color: red }
#cats h2    { color: blue }

On your dog page every second level heading will be red and on your cat page they will be blue.

[jimbondy]

Sounds great Pandy. Thanks for you reply.
Yeah, I know about class and id and use it a lot.
So I do like your advice regarding using multiple sheets for unique and general styling.
Can I refer to 2 different style sheets in one HTML file IE:
<link rel="stylesheet" type="text/css" href="cWebsiteAuthor.css" />
<link rel="stylesheet" type="text/css" href="cContactUs.css" />
Wouldn't that slow down the server because it has to search both files to find what it is looking for?
...or am I being too fussy?

[Christian J]

My 'home' sheet is completed in both HTML & CSS

Just a word about terminology: what you describe above sounds more like a web page. The term "sheet" is used for CSS files (="stylesheets") only...

[Christian J]

It's a matter of taste, anything goes. Since you say a lot of things are common and that your style sheet is growing big, you could put the common stuff in one style sheet (that you link to from every page) and then make separate style sheets for the individual styling.

I too normally use an external CSS file for all the basic/common styling.

For individual page styling, it depends on the amount of CSS code. If it's just a little, I use an embedded stylesheet (a STYLE element in the HTML page's HEAD section). If it's a lot I put in an external file.

See also Linking Style Sheets to HTML: https://htmlhelp.com/reference/css/style-html.html (some of it is a bit outdated now, such as the section on MEDIA attribute values).

[Christian J]

Can I refer to 2 different style sheets in one HTML file IE:
<link rel="stylesheet" type="text/css" href="cWebsiteAuthor.css" />
<link rel="stylesheet" type="text/css" href="cContactUs.css" />

That should work fine. You can also embed a stylesheet from inside another stylesheet, using @import (see link in the previous post).

Different CSS values further down in the "cascade" will generally override any higher up, with the following exceptions: https://htmlhelp.com/reference/css/structure.html#cascade

Wouldn't that slow down the server because it has to search both files to find what it is looking for?

That shouldn't be a problem for a decent web host, but the browsers may have limits on how many web requests they can handle at once. For example, if a page contains dozens of external files (CSS, images, javascripts) it may slow down things.

[pandy]

Can I refer to 2 different style sheets in one HTML file IE:
<link rel="stylesheet" type="text/css" href="cWebsiteAuthor.css" />
<link rel="stylesheet" type="text/css" href="cContactUs.css" />

Yes. You can have as many as you want.

Wouldn't that slow down the server because it has to search both files to find what it is looking for?
...or am I being too fussy?

I expect it has *some* impact, but it will be infinitesimal compared to the impact of the images you probably also have on your site. They also require a request to the server for each image and the size of even a small image will be much larger than that of a style sheet. You won't notice any slowdown because of some style sheets.

[Jason Knight]

Something to realize is that by using a single monolithic stylesheet per media target, you can pre-cache the appearance of subpages resulting in everything past the first load being faster and creating less server overhead.

When working with multiple CSS source files, a cute trick is to just combine them to a single file on the command line. You could make up a fairy tale extension like "cssModule" then:

DOS/Win Shell:
copy *.screen.cssModule > screen.css

*nix:
cat *.screen.cssModule >> screen.css

Though honestly if you have "so much" CSS that you need to resort to that, you probably have too much CSS for what you're trying to do, especially for just one page. Realistically per media target there is no reason for 99% of all websites or applications to have more than 48k of CSS per target, apart from "the three i's of web development" -- ignorance, incompetence, and ineptitude.

And I don't mean ignorant as an insult. We can fix ignorant. It's those other two you have to worry about. (see the mental hairballs that are bootcrap and failwind)

Now, I said "media targets". What is that you ask? basically it's saying media="screen" or media="print" on your stylesheet LINK tags. If you see a stylesheet LINK or STYLE tag lacking media="something" altogether or setting media="all", you're looking at even more of that pesky 3i of web development.

See my medium article about media targets:
https://medium.com/codex/media-the-html-att...se-30766bf14beb

(assuming you have free reads left or are a member)

Also back-reading the other replies, you guys do know that as of about 12 years ago we can stop saying type="text/css" when it's rel="stylesheet", right? Just like how HTML 5 also did away with type="text/javaScript" on SCRIPT tags?

[Christian J]

Also back-reading the other replies, you guys do know that as of about 12 years ago we can stop saying type="text/css" when it's rel="stylesheet", right? Just like how HTML 5 also did away with type="text/javaScript" on SCRIPT tags?

Must confess I still haven't updated the clipbook in my text editor. In my defense, it doesn't hurt anything and doesn't increase file size that much. Or maybe I'm just being snobbish, back in the days of HTML4 a missing TYPE attribute was the hallmark of poor WYSIWYG HTML editors, so I still associate its absence with WYSIWYG tag soup...

[pandy]

In addition to what Christian says I think it was stupid to remove those things. So I don't for that reason.

[Jason Knight]

Must confess I still haven't updated the clipbook in my text editor.

I hear you on that. I'm going through and updating my own reference notes. So many things we used to hack around, have to say in the markup, or blindly throw JavaScript at that today is natively supported or just not necessary.

Or maybe I'm just being snobbish, back in the days of HTML4 a missing TYPE attribute was the hallmark of poor WYSIWYG HTML editors, so I still associate its absence with WYSIWYG tag soup...

I never minded lacking those attributes where they didn't actually do anything (and no, they didn't do anything) and felt pointlessly redundant. Might also stem from my rabid distaste for mime-types in general.

For me the big telltale of bad WYSIWYG/editors/tools was the lack of a media target on stylesheet <link> or <style> tags, or the mere presence of style="" in all but the rarest of corner cases. Even wrote an article on medium about that a few months ago.

https://medium.com/codex/media-the-html-att...se-30766bf14beb

Today's equivalent being mental midgetry like:

class="text-center text-xl font-500-blue"

Which is pretty much a monument to the HTML 3.2 mindset and does nothing but recreate

<center><font size="3" color="#000077">

Which is one of the many reasons why gibberish garbage like bootcrap and failwind do nothing more than drag development practices backwards two and a half decades. As I've been saying for over a decade, "For people who know nothing about websites, BY people who know nothing about websites" is a really shoddy plan.

[pandy]

The attributes were there mainly for future compatibility. And there still is a future, I hope.

[Jason Knight]

And there still is a future, I hope.

Scary how right now that seems to all basically come down to one man's ego.

Though that's why I find Sci-fi more spiritually uplifting than ... hmm. Not sure the rules here on broaching said topic. At least Sci-fi usually says there is a future. That's more than you can say for a lot of other things.

[pandy]

Bash the little prick as much as you want. I won't stop you. I live relatively close to the scene (Sweden), so the threat also feels close. Obviously he's losing. I'm most afraid that he'll chose to go out with a bang.

[jimbondy]

My 'home' sheet is completed in both HTML & CSS

Just a word about terminology: what you describe above sounds more like a web page. The term "sheet" is used for CSS files (="stylesheets") only...

Oh yeah...of course. (I'm an Excel guy)

[jimbondy]

It's a matter of taste, anything goes. Since you say a lot of things are common and that your style sheet is growing big, you could put the common stuff in one style sheet (that you link to from every page) and then make separate style sheets for the individual styling.

I too normally use an external CSS file for all the basic/common styling.

For individual page styling, it depends on the amount of CSS code. If it's just a little, I use an embedded stylesheet (a STYLE element in the HTML page's HEAD section). If it's a lot I put in an external file.

See also Linking Style Sheets to HTML: https://htmlhelp.com/reference/css/style-html.html (some of it is a bit outdated now, such as the section on MEDIA attribute values).

Well I've got about 200 lines of code in my style sheet. I thought it would be cleaner.

[jimbondy]

Can I refer to 2 different style sheets in one HTML file IE:
<link rel="stylesheet" type="text/css" href="cWebsiteAuthor.css" />
<link rel="stylesheet" type="text/css" href="cContactUs.css" />

That should work fine. You can also embed a stylesheet from inside another stylesheet, using @import (see link in the previous post).

Different CSS values further down in the "cascade" will generally override any higher up, with the following exceptions: https://htmlhelp.com/reference/css/structure.html#cascade

Yeah I could do that, as long as I place the embedded sheet with all of the common code near the first line and amend the changes further down the line. But I have 8 pages. Wouldn't it just be easier to copy the main CSS sheet and alter it for each additional HTML page...or is that just crappy coding?

Wouldn't that slow down the server because it has to search both files to find what it is looking for?

That shouldn't be a problem for a decent web host, but the browsers may have limits on how many web requests they can handle at once. For example, if a page contains dozens of external files (CSS, images, javascripts) it may slow down things.

Ok thanks Christain

[jimbondy]

Can I refer to 2 different style sheets in one HTML file IE:
<link rel="stylesheet" type="text/css" href="cWebsiteAuthor.css" />
<link rel="stylesheet" type="text/css" href="cContactUs.css" />

Yes. You can have as many as you want.

Wouldn't that slow down the server because it has to search both files to find what it is looking for?
...or am I being too fussy?

I expect it has *some* impact, but it will be infinitesimal compared to the impact of the images you probably also have on your site. They also require a request to the server for each image and the size of even a small image will be much larger than that of a style sheet. You won't notice any slowdown because of some style sheets.

Thanks Pandy

[jimbondy]

Something to realize is that by using a single monolithic stylesheet per media target, you can pre-cache the appearance of subpages resulting in everything past the first load being faster and creating less server overhead.

When working with multiple CSS source files, a cute trick is to just combine them to a single file on the command line. You could make up a fairy tale extension like "cssModule" then:

DOS/Win Shell:
copy *.screen.cssModule > screen.css

*nix:
cat *.screen.cssModule >> screen.css

Though honestly if you have "so much" CSS that you need to resort to that, you probably have too much CSS for what you're trying to do, especially for just one page. Realistically per media target there is no reason for 99% of all websites or applications to have more than 48k of CSS per target, apart from "the three i's of web development" -- ignorance, incompetence, and ineptitude.

And I don't mean ignorant as an insult. We can fix ignorant. It's those other two you have to worry about. (see the mental hairballs that are bootcrap and failwind)

Now, I said "media targets". What is that you ask? basically it's saying media="screen" or media="print" on your stylesheet LINK tags. If you see a stylesheet LINK or STYLE tag lacking media="something" altogether or setting media="all", you're looking at even more of that pesky 3i of web development.

See my medium article about media targets:
https://medium.com/codex/media-the-html-att...se-30766bf14beb

(assuming you have free reads left or are a member)

Also back-reading the other replies, you guys do know that as of about 12 years ago we can stop saying type="text/css" when it's rel="stylesheet", right? Just like how HTML 5 also did away with type="text/javaScript" on SCRIPT tags?

Thanks Jason

[Jason Knight]

Oh, another thing to consider is the number of separate files on a page. Combining your CSS to a single file per media target, your scripts (when possible) to a single file, presentational images and icons to as few files as possible like font driven icons or the incorrectly named "CSS Sprites" all speed up a page load irregardless of transfer speeds in most cases.

Every file request undergoes a process called "handshaking" where there's a back and forth between the browser and server to determine if the server has the file, if the cached copy has expired or not, asking to send the file based on that, and so forth. "real world" thanks to browsers being able to simultaneously send up to eight separate requests side-by-side the first eight files are considered "free" and after that, it's anywhere from 200ms to 1 full second for each additional file.

There are techniques like "HTTP 2 push" that can speed this up, though it requires a measure of micromanagement to work, and in my own testing I've actually found it to be more placebo than fact. It eliminates handshaking overhead but also takes a dump on parallelism of those first eight files in the process.

Basically let's say you have a page with 7 stylesheets, 10 separate scripts, and 20 media (images/video/audio). A general time estimate for just the handshaking is anywhere from 6 to 30 seconds for a cache-empty first-load without "push" or other trickery.

If you combined down those seven stylesheets to one, and ten scripts to one, and using fonts for icons cut the number of images in half, you're looking at stripping five to 25 seconds off that load time!

Combine that with caching for subpages where you move anything and everything you possibly can out of the markup like a good little doobie? Aka no "presentational" classes nonsense from derpy frameworks, applying your presentational images from the CSS, using addEventListener from the script instead of onclick="" in the markup, and so forth? Boom. Vanilla normal page-load driven sites that are so fast people go "where's the code that makes this an SPA"

The look on their faces when you tell them it isn't... but again that lovely scenario where people throw more code than needed at a problem instead of just fixing bad code. If folks would stop using 100k of markup to do 10k's, job, 500k of CSS to do 48k or less' job, and 2 megabytes of JavaScript on pages that might not even warrant the presence of client-side scripting to even work... maybe they wouldn't be throwing concepts like client-side rendering, bloated garbage frameworks, and 25 year out of date coding practices at every blasted problem.