Style Evolution - Dynamic CSS Part 2

Please note that this assumes you have read Part One of the series.Also, I have taken to calling this Evolved CSS, as the word "dynamic" is a bit too close to the old days of DHTML (Dynamic HTML) for my liking. Let's jump right in shall we?

Files

Download this zip file if you would like to see a running example of this project and/or have a foundation for your experimentation.

Reduce Server Calls Without Sacrificing Ease of Maintenance and Organization

Web Developers follow many practices in their organization of style sheets. Some put everything in a single document, while others create separate style sheets for each of their major page types or templates. In addition, most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer's version) to make life easier.

And..?

Well, if you're in the practice of using multiple style sheets, your sites may be taking longer to render than they need to, no matter how compressed your CSS may be. This is due to the fact that the browser needs to communicate with the server to snag each individual document, and most browsers only allow a few connections at a time. As noted on the Yahoo UI Blog, a lot of performance issues are directly related to front-end engineering. That's actually a big win for those of us on the front-end as we don't have to shell out for better servers or faster pipes. We can simply improve our code to make life easier for our users.Example of HTTP Requests from FireBug Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you'll care about, so to break it down, here's the key point in regards to this write-up: "Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make." In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document.

The code

For this example, let's assume your site has the following set up:
  • reset.css - Resets all styles to eliminate browser inconsistencies
  • core.php - Includes the global layout rules (navigation, header, content area etc.) and text formatting
  • scheme.php - The colors and images used for your site, this could easily be a script that provides the end-user the ability to choose their own colors.
  • home.css - Home-page specific layout/formatting rules.
  • archive.css - Layout and formatting rules for your archive pages.
  • gallery.css - The rules used to display your photo gallery.
  • print.css - Defines the layout for the page when it is sent to a printer.
You may have noticed the combination of PHP and CSS for those file types - you can easily use either as Part One demonstrated, but keep in mind that you should use flat CSS files over PHP where you are able to reduce the time required to process and render the final style sheet.

Section-Specific vs. the Kitchen Sink

Evolved CSS works well with the practice of using a single global style sheet to define your general layout and styles and section-specific style sheets to serve up rules that are unique to different areas of your site, as you can pass parameters to your main style sheet in order to define which style sheets to include. The Browser will still cache it. Here's an example of how you could pass these parameters, in this case pulling in the styles for your gallery and a blue color scheme.

<link href="/css/style.php?include=gallery,blue-scheme" rel="stylesheet"
       type="text/css" media="screen" />
The file styles.php includes this code to take those parameters and pull in the appropriate style sheets:

/* -=-=-= Import Styles =-=-=- */
// Grab the parameters clean them up and add them to an array

$cssToInclude = split(',', makeSafe($_GET['include']));

/* -=-=-= Core Styles =-=-=- */
// Core will be included every time

include_once 'core.php';

/* -=-=-= Additional Styles =-=-=- */
// Check the array to determine which style sheets to include

if (in_array('home', $cssToInclude)) {
	include_once 'home.css';
}

if (in_array('gallery', $cssToInclude)) {
	include_once 'gallery.css';
}

if (in_array('archive', $cssToInclude)) {
	include_once 'archive.css';
}

That's all You Need to Start

Well, this is a pretty short example, but I think it gets the poitn across and sheds some light on the possibilities available to you when you harness the power of server-side scripting languages to serve your CSS.Note: This code is for example purposes only - it could be a lot cleaner, but at this point I am keeping it simple for explanation's sake. I'm including the function makeSafe() to clean up the parameters. You can see the code in styles.php, contained in the source file package, if you are curious about it.

A Word on Media Types

This practice can only be used style sheets of the same media type - do not merge your screen style sheets with your print styles or you will get all sorts of ugliness.

What about priority and inheritance?

That's a damn fine question! At this point, this structure works exactly the same as using multiple style sheets does. Most browsers will use the last rule defined, but you shouldn't rely on that. As a good developer you should know where your conflicts may be and resolve them intelligently. The !important declaration can be used where needed to resolve specific conflicts.

Conclusion

Well, that about wraps it up for today kids, thanks for reading! Please leave your comments, suggestions and/or questions as I would love to expand the discussion. Also, I would love to hear your thoughts on what I should address next.

Future Evolved CSS Topics

  • Let the server do the math - auto-generating widths for your grid
  • Using Evolved CSS to improve debugging
  • CSS Compression
Posted on