Zen stylesheet organization

Last updated on
7 December 2017

Don't panic!

There are 25 CSS files in this sub-theme (28 CSS files in the D6 version), but its not as bad as it first seems:

  • The drupal7-reference.css (or drupal6-reference.css) is just a reference file and isn't used directly by your sub-theme. See below.
  • There are 7 CSS files (9 CSS files in D6) whose names end in "-rtl.css". Those are CSS files needed to style content written in Right-to-Left languages, such as Arabic and Hebrew. If your website doesn't use such languages, you can safely delete all of those CSS files.
  • If you aren't using this theme while doing wireframes of the functionality of your sub-theme, you can remove wireframes.css from your sub-theme's .info file and delete the file as well.

That leaves just 16 CSS files. (Okay, still quite a few, but better than 25.)

Instead of one monolithic stylesheet, your sub-theme's CSS files are organized into several smaller stylesheets that are grouped to allow cascading across common Drupal template files.

The order of the stylesheets is designed to allow CSS authors to use the lowest specificity possible to achieve the required styling.

Order And Purpose Of Default Stylesheets

First off, if you find you don't like this organization of stylesheets, you are free to change it; simply edit the stylesheet declarations in your sub-theme's .info file. This structure was crafted based on several years of experience theming Drupal websites.

This is the place where you should set the default styling for all HTML elements and standardize the styling across browsers. If you prefer a specific reset method, feel free to add it.
Zen's default layout is based on the Zen Columns layout method. The layout-fixed.css file is used by default and can be swapped with the layout-liquid.css file. These files are designed to be easily replaced. If you are more familiar with a different CSS layout method, such as Blueprint or 960.gs, you can replace these files with your choice of layout CSS file.
Layered backgrounds across scattered divs can be easier to manage if they are centralized in one location.
messages.css: (Zen 6.x-2.x only)
While most of the CSS rulesets in your sub-theme are guidelines without any actual properties, the tabs and messages stylesheets contain actual styling for Drupal tabs and Drupal status messages; two common Drupal elements that are often neglected by site designers. Zen provides some basic styling which you are free to use or to rip out and replace.
Page styling for the markup in the page.tpl.php template.
Block styling for the markup in the block.tpl.php template.
The styling for your site's menus can get quite bulky and its easier to see all the styles if they are grouped together rather then across the header/footer sections of pages.css and in blocks.css.
Views styling for the markup in various views templates. You'll notice this stylesheet isn't called "views.css" as that would override (remove) the Views module's stylesheet.
Node styling for the markup in the node.tpl.php template.
Comment styling for the markup in the comment-wrapper.tpl.php and comments.tpl.php templates.
Form styling for the markup in various Drupal forms.
Field styling for the markup produced by theme_field().
The print styles for all markup.
The Internet Explorer stylesheets are added via conditional comments. Many CSS authors find using IE "conditional stylesheets" much easier then writing rulesets with CSS hacks that are known to only apply to various versions of IE. An alternative method presented by Paul Irish can be found at http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

In these stylesheets, we have included all of the classes and IDs from this theme's tpl.php files. We have also included many of the useful Drupal core styles to make it easier for theme developers to see them.

Drupal Core's Stylesheets

Many of Zen's styles are overriding Drupal's core stylesheets, so if you remove a declaration from them, the styles may still not be what you want since Drupal's core stylesheets are still styling the element. See the drupal7-reference.css file for a complete list of all Drupal 7.x core styles.

Internet Explorer Hates You

All versions of IE limit you to 31 stylesheets total. What that means is that only the first 31 stylesheets will load, ignoring the others. So, in Drupal 6, you'll have missing styles in IE7 and later and a broken layout in IE6.

This is a known bug in IE: http://support.microsoft.com/kb/262161

Drupal 7 core has implemented a work-around for this IE bug. For D6 solutions to this problem, please read Zen's Troubleshooting guide.