I have long subscribed to the argument that the design (CSS)
should be separate from the content (HTML). The theory makes a lot
of sense. It allows for the design of the site to be changed and
tweaked without needing to go into every single page and adjust the
code like was common years ago. Websites like csszengarden.com illustrate this theory very
well.
The one nagging problem however, is that most sites invariably
end up needing some customized CSS styles applied to just one
specific piece of content in order to meet the requirements of the
client. You know, the pesky splash text that only appears on the
home page for example. Or perhaps it is just one customer
testimonial that was just a bit too long so you apply a tiny bit of
negative letter spacing to make it fit. You end up with CSS style
definitions like: #homepageBannerText or
#smith.customer Testimonial. Are we really still
separating content from style at this point? I would say no.
It gets really bad when you start creating sections for each
page within the main stylesheet. I have seen sites that have ended
up with over 20,000 lines in the main style.css as a result of
this. I know everyone has different opinions on how to organize,
but personally, a 20,000 line css file drives me nuts!
One of my recent projects entailed a website where the design
was already done and we were responsible for taking the Photoshop
comps and producing a website to match. The website featured a
scrap-booking theme. This also meant lots of variation from one
page to the next. It would require lots of z-index layering and
special positioning of transparent images to get the desired
overlaps and effects. What it boiled down to was nearly every page
would need per-page CSS definitions, and lots of them.
I decided I would look for a new approach. Many would suggest a
main style.css for all the site-wide css attributes and then one
additional css file for each page that needed custom style
definitions. While the organization of this appeals to me, I wasn't
happy about the fact that this would also require another http
connection increasing the load-time for each page. Especially on
this particular site which was already very graphics intensive with
lots of big images on each page.
I finally settled on the approach of a very similar method.
Except that instead of putting the page specific css in a separate
file, I just defined it in a style block at the top of that page.
Much of the advice online says that this should be avoided, citing
the separation of the content and style as the reason. My
experience with this site showed that this technique actually
worked out very well. Any style that applied to the entire website
or at least to multiple pages was still placed in the main
style.css as usual. It was neat, organized, fairly trim, and it was
then cached by the browser for each consecutive page load. I still
can alter any of the site-wide styles with ease if I ever need to.
Every single page is no longer forced to download the CSS styles
for every other page on the website, something that has always
bugged me about the single CSS file method. After all, we don't
have the browser download the content and images for every other
page do we?
But because the per-page definitions were embedded at the top of
the HTML, I also have not created an additional HTTP request. What
I was surprised to learn was that this technique also made the CSS
and HTML both much cleaner. I no longer needed to have site-unique
ID's on everything that needed custom styling. I could simply
override the global values on a specific element, say
.stickyNote at the top of my page in my per-page
css block. My custom values would apply to only that page just like
I needed, without affecting any of the other global rules for other
pages.
As far as separation of content and style goes, I feel I have
not lost anything. The only rules that are in the HTML page are
inherently tied to the content anyway. Even if they had been
defined in the main style.css, they would need tweaking anytime the
content changes. By putting them in the top of the page it actually
makes this easier, while keeping my main stylesheet clean from all
this clutter.