Browsers can load and store stylesheets separately, making your site run faster. OR
You can also use the same stylesheets on more than one website page. This can help you save time and ensure your website looks and feels the same.
Does that mean multiple <style></style> tags or does that mean multiple links to (external) stylesheets, as in the post from sibertius?
Also, the context is important. An individual might prefer multiple stylesheets or prefer one stylesheet but when a website is modified by multiple developers then the policies and procedures need to make development easier for all developers. Experienced developers are likely to have learned that it helps to keep pieces separately. There are many things like that that seem stupid for beginners.
Only if you are working alone, or if on a team, have one āoverlordā who ensures that the selectors are appropriate and in one place. Too many people can mean that things get mixed up, and becomes a maintenance nightmare.
Iām saying that finding and fixing conflicting selectors/styles is infinitely easier using one stylesheet. Iāve had nightmares trying to work backwards and fixing hijacked styles when they are in multiple files and/or then having to rework markup.
Fonts are the primary cause of pain, but Iāve had borders and floats and all kinds of treasures until I could get the developers on the same page in terms of handling style issues.
As have I. My favorite was a single if statement that, when printed on the green and white bar paper, ran almost eighteen feet printed. We hung it on a cubicle wall and went from top to bottom almost three full times. And we werenāt allowed to refactor itā¦
There are some I believe but Iām not overly familiar with them, unfortunately. But I also keep a closer eye on stuff like thatā¦
Personally I wouldnāt use more than one unless I had to. I would prefer to keep requests to a minimum.
Odd circumstances where I may: If there were styles that are particular to a specific page that would not be used anywhere else on the site, but the page still needed to reference the main, global sheet.
Another one is if you need to cater for people printing your page, you may want a sheet for that.
Otherwise I avoid multiple CSS.
Curiously, to me at least, a style sheet specifically tagged with āmedia=printā gets loaded immediately with the rest of the page. At least in FF and Chrome where I checked. I would have expected it to be loaded only when the user tries to print the page, making it one of the possibilities for multiple stylesheets.
the same way that media queries for, example, the wrong screen size are loaded. if the context changes, the browser can apply the style sheet and/or revert as necessary.
Yes I do realize the print style sheet is loaded, the question is why? Printing a page is enough of an āeventā to the browser that it would seem like the quick load of a specific style sheet would be insignificant in terms of performance, whereas loading it every time someone browses the site, just in case the user wants to print the page, could add up to some real cycles over time.
According to the documentation it doesnāt actually get loaded immediately if the media value evaluates to false. The css file becomes non render blocking and the file is loaded later on without impacting the page render time.
Therefore, I assume you could split the css files into their different media queries and only the current media file would be render blocking.
Ah, thanks. I hadnāt though of the difference between loading now/render blocking and loading later when time isnāt critical. I suspect thatās exactly what I saw in the network tab as the print css was further down the page than the rest of the css above.
Not really useful, but Firefox has a feature that allows you to specify alternative stylesheets. Kind of an old-school way of providing themes for a site. The feature still exists, but is only accessible from the menu bar which is hidden by default now. I donāt think any other browser supports (or ever did support) this either.