Patterns and Naming Conventions
In your theme, you are free to name your CSS files whatever you want. Many themes tend to create a directory called “css” in which they place a few stylesheets. It’s very common to create a
layout.css for page layout styles and style.css for the rest. Some themes, like Zen, take it much further with almost 30 stylesheets. How you decide to organize your CSS is completely up to you. There are no restrictions on how many stylesheets a theme can have. Most front-end developers have their own way of working, and Drupal is happy to oblige.
Core and Module CSS Files
Most modules that provide CSS will typically include a file in the root of the module directory called
module-name.css. Some of the modules have a few CSS files, and the better modules create a separate file for any CSS used to style the administrative user interface. Modules are not restricted to any number or specific organization of CSS files, but developers are generally urged to be conservative and style elements as little as possible.
It’s also worth mentioning that Drupal’s System module, located in
modules/system, contains quite a few CSS files that seem to all be dumped there because there is no better place to put them. Table 16–3 provides a quick description of each, so you have an idea of what their purpose is and can decide whether or not to keep them in your theme.
|CSS File||Purpose||Loads on…|
||Contains general styles for many generic HTML and Drupal elements.||Every page.|
||Contains default styling for menu tree lists, tabs, and node links.||Every page.|
||Contains default styling for error, warning, and status messages.||Every page.|
||Contains styles needed on administrative pages throughout Drupal.||Admin pages.|
||Contains styles for installation, maintenance, and update tasks.||Maintenance pages.|
Bi-Directional Text Support
One of the things Drupal is known for is its superb language support. This includes bi-directional text support. While most languages display text from left-to-right (LTR) on screen, certain languages, such as Arabic and Hebrew, display text from right-to-left (RTL) on screen. Browsers handle much of the styling differences needed by reading the dir attribute defined in the
<html> tag and using User Agent CSS files, but many times CSS floats, text alignment, and padding need to be accounted for in CSS, especially when you are running a site with multiple languages.
Drupal handles RTL stylesheets in an automated way based on CSS file naming conventions. If you have a stylesheet named
style.css, which contains the CSS for the LTR version of the site, you can simply create another file called
style-rtl.css to contain the necessary tweaks to fix the display for the RTL version. Drupal will automatically load it when needed, directly after the original file so that the same selectors can be used and RTL styles will override the LTR styles, taking advantage of the natural CSS cascade. When writing CSS for a site that will support both LTR and RTL displays, it is customary to write the CSS for the LTR version first, while keeping track of what will need to change (per property) with a comment. This is one of the coding standards Drupal has adopted for core and contributed CSS files. Listing 16–36 shows an example.