Registered User Join Date May 2014Posts 719I'm making this a separate post so we don't keep threadjacking this thread here.
Code-tard is just discovering the advantages of external stylesheets, so I thought it might be useful to folks if I explained the advantages. I'm also going to explain my conclusions and reasoning for sitebuilding, since I know a lot of my heavy handed authoritative statements confuse people.
If nothing else someone might find my rambling useful.
I'm putting this in HTML because I'm going to end up touching on that as well, and to be frank CSS is only as good as the markup it's applied to... and generally speaking, this first post is going to be about the STYLE tag, STYLE attribute, and LINK attribute. THOSE ARE HTML, even if you are providing CSS with them!
You are going to find me using terms like "generally speaking" and "rule of thumb" -- this is because while the below may be good practice, you have to allow for exceptions; at the same time because there are exceptions that doesn't mean you should ignore good practices on everything else... and when I DO mean the rule is in concrete, I'll bloody well say so.
--------------------------
When it comes to the application of CSS, the advantages of an external stylesheet are simple:
1) It's separation of presentation from content. Keeping what things are SEPARATE from what they look like. What things look like as a rule of thumb has no business in the markup. As I often say, if you choose your tags based on your default appearance, you're choosing the wrong tags for the wrong reason.
This separation also means that you can edit things side-by-side. Even at the earliest development stages having your markup and your style separate in separate editor windows makes development faster and easier -- and it saves you the time of trying to extract it later; which a lot of people who use the style attribute CLAIM they are going to do, but never actually do it.
2) Multiple presentations -- by including differnent files using the MEDIA attribute, you can target different devices. This is why using a stylesheet LINK without the MEDIA attribute is stupid, and using the "all" value is even dumber. There are all sorts of targets for media, and most often the one you want is SCREEN, PROJECTION and TV -- Screen is your normal devices you think of when you design, some kiosks and browsers in full-screen operation ignore screen using projection, or will use a mix of the two; and sadly, there are still some devices that report themselves as TV, and if you don't say TV they'll override your settings with their own. (The version of Opera on the Wii is a great example, as is the now semi-defunct MSN-TV).
Naturally this is the point where some jacktard will say "who cares about those" -- when it's basically including an extra 15 characters to support them, are you really such a lazy foxtrot you can't be bothered? Whiskey tango foxtrot!
Ask yourself this, does your for screen layout and design elements make ANY sense to be sent to print? How about Aural? Media targets exist to customize appearance for targets AND to prevent values that are just screwy from being sent to the wrong devices.
Now ask this -- how exactly do you do that with the STYLE attribute. How do you put a media attribute on another attribute? So much for STYLE as an attribute.
These first two reasons also combine that you can easily have multiple appearances off the same markup; meaning SKINS -- reskin an entire site without even touching the markup? Oorah!
3) Caching. Even if it's just a single page, what if people visit it more than once? You really want return visitors re-downloading the same data over and over again for no reason? This more than any other reason is why the STYLE tag is pointless.
The laugh is things like Google pagespeed are suggesting putting some style back in the markup -- the only situation that would pay ANY benefits in speed or efficiency is if your traffic is all bounce -- a situation I thought we were supposed to be avoiding -- much less that if you're going to have an external sheet anyways, what difference does it make if it's in that or the HTML apart from the HTML not being cached. That's just stupid advice on the part of Google Pagespeed.
4) pre-caching -- if you put the CSS of sub-pages in the same monolithic file for each media target, you are effectively pre-loading the appearance of those pages -- so those sub-pages load AND render faster. Now, the peanut gallery will chime in with "doesn't that make the first-load take longer" -- really if you have enough CSS for all your pages that doing this results in any noticeable difference, you don't know how you use CSS properly.
Generally speaking in all but the rarest of cases, UNCOMPRESSED there is no excuse for even the largest of site templates -- like those of a forums -- to break 48k (and a third that gzipped) other than developer ineptitude, a failure to grasp how to use selectors or HTML, or just plain code bloat garbage like frameworks.
This is another area where people screw up -- first by trying to use tools to "remove unused CSS" that often removes CSS used by subpages just because it's not used on the main page. Then they run around like chickens with their heads cut off that the subpages are screwed up.
Likewise they blindly trust tools like Google Pagespeed when it
No comments:
Post a Comment