CMS Development Tracking

Improved Download Speed

To improve the download speed Exponent now compresses and combines all CSS files and creates just one file to be downloaded. This improves download speed both by transmitting less information and also by keeping the http requests to an absolute minimum, as suggested by Yahoo's "Best Practices for Speeding Up Your Web Site".

CSS File Compression

Compression is not really the correct word. What we do is: minify. "minify" was a Google "Summer of Code" project that takes as input CSS and/or javascript files and outputs a minimal version of them. "minify" strips out whitespaces, linebreaks, unnecessary punctuation, and comments and outputs a one line version of the file with the smallest possible file size.

An advantage to this "minify" process is that it allows us to be verbose and comment our CSS and javascript files, which makes them easier to maintain. We don't have to worry that our comments and indents are adding to the size of the page download. All information unnecessary at runtime will be stripped and will not be part of the download. Go ahead and comment your stylesheets to your heart's content. One month from now you will not remember why the <ul class="em"> has a red background, unless you put in /* This list is used for emergency information and the boss wants all emergency information to have a red background */

Combined Stylesheet Files

We now collect all the stylesheet files and pass them to the new PHP class called minify. The files are both stripped of unnecessary information and combined as one file in the output: /exponent/tmp/css/exp-styles-min.css. This combined file is the complete CSS needed for the theme and will create only one http request thus speeding page download.

A second advantage then to this "minify" process is that we can be flexible with the file structure. We don't have to have just one very long and unmanageable style.css file to keep the http requests down. We can have many different files while developing. We can match our CSS files to our views, making it simpler to find the styles that affect a specific module and view. And in the end, no matter how many CSS files our theme has, there will only be one http request for CSS during page download.

Flexible and Manageable Stylesheets

Stylesheets are intended to be flexible. Their "cascade-ability" allows for styles to be defined and redefined as needed. The style for a given entity is applied as a combination of the definitions with the last value given for any attribute being the value used.

Typically there is one file with the basic styles for a site (which becomes larger and larger, and more and more confusing as styles are tested and changed), and maybe another one or two for specific features of the site, a drop-down menu, or a popup image gallery. Exponent now makes it easier to keep styles manageable by allowing files to be used which are specific for a module and module view. Let me explain this new hierarchy and how Exponent loads the stylesheets to be combined.

Files Cascade Hierarchy

Stylesheets are now in a file hierarchy as follows:

   /exponent
      /themes
         /common
            /css
               /required
         /<mytheme>
            /css
               /required

This hierarchical file structure provides a default order of inclusion for CSS files to allow for proper cascading of styles.

File Loading Order

The order of style definitions is the most important thing about cascading style sheets. Using the file hierarchy Exponent will load stylesheets in order, allowing for styles to be redefined by a designer in the <mytheme> directories. Here is how it works.

Exponent will first load the required stylesheets located in /exponent/themes/common/css/required. Any stylesheets included in this directory are assumed required by the system in order to display correctly.

Upon finding a file in the above directory, Exponent will immediately look inside /exponent/themes/<mytheme>/css/required/ for a file of the same name. For example, if admin.css exists in /exponent/themes/common/css/required/, Exponent will look inside /exponent/themes/<mytheme>/css/required/ for admin.css. If it finds the file, Exponent will include this file directly after the one from the common area. This allows CSS rules defined in /exponent/themes/<mytheme>/css/required/admin.css to override CSS rules defined in /themes/common/css/required/admin.css.

This is done for all files in the common CSS directory, and in the end Exponent will place any theme specific files. For more details about configuring and debugging your cascading stylesheets read the blog post "Applying Styles to Themes in Exponent 0.97."

... and There is More

There is a lot more in the works to make Exponent faster, more flexible, and more robust. Check back soon. We'll be telling you about creating your forms in module views, and chaining different modules, and much more.

Related CMS news: