Topics in the world of web development and other technologies we find interesting.

Do HTML Embedded CSS Styles have a place?

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 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.

Posted by Mark at 11:45
blog comments powered by Disqus


Recent Comments

Powered by Disqus Error loading MacroEngine script (file: uBlogsyListBlogRoll.cshtml)