Drupal (7) themers often run into the same issues over and over:

• Core and starter theme CSS can be hefty and counterproductive
• The theming layer treats most things as blocks, but not all
• Front pages tend not to have static content in a typical sense
• Drupal markup doesn't always have great selectors for making idiomatic CSS

Tao Base Theme

The Tao Theme, which you may be familiar with as the basis for the Rubik Administration theme, lets you as a themer start without the encumbrance of base CSS from most core and contrib sources. This allows you to style your site with whichever CSS structure you see fit, without doing all the legwork of overriding those files (either in the .info file or in the CSS proper).

A successful Tao subtheme lets you get started with a more-or-less clean slate for CSS. But you can take it a few steps further to really make things sweet.

Blockify module

The Blockify module takes all the things in the core theme files, like the logo, page title, breadcrumb, tabs, etc., and turns them into blocks. This allows you to place the blocks where you wish, apply page/user/role conditions with the core block UI (or do more with context and other contrib modules), and overall gain control over elements of the site that you may otherwise have to play with in the theme files.

The first reason this module is awesome is that it lets you keep your .tpl.php files super clean. For instance, with all the blockified elements removed, your page.tpl.php file might look like this:

Seriously, that's all your page template might contain.

The second reason blockification is a really good idea has to do with CSS. If all your page content is within a block within a region, wrapped in a page, the resulting markup can be targeted in a consistent way. All blocks could ostensibly take styles. All regions could have a base style. Individual blocks can be used as 'modules' in some sort of OOCSS or BEM style of CSS architecture. Everything works in a consistent way.

Block Classes

Using the Block class module (along with Features and Features extra), you can apply classes to blocks and export them between environments. This, in conjunction with the ways to add CSS classes to Views, allows you to target most page regions without resorting to IDs or weird chains of selectors in your CSS.

Blank Pages

Often, the front page of a site is just a display of other content on the site. While the main portion of the page's content can be made into a page view, site builders also frequently create empty content and hide the node bits for the front page. While this little bit of database loading may only load when the cache needs to be refreshed, having a blank node behind the scenes can often feel rather hacky.

If you'd like a real blank page, you can set an easy menu callback in your code:

• Implements hookmenu(). */ function blankpagemenu() { $items['blank'] = array( 'title' => 'Home', 'description' => 'A blank page to hold front page blocks', 'page callback' => 'blankpageblankpage', 'access arguments' => array('access content'), 'type' => MENU_CALLBACK, ); return $items; }

/**

• Menu callback function. */ function blankpageblank_page() { return ' '; } ?>

Alternatively, if you think you'll have multiple blank pages on your site, you can use the Empty Page module to accomplish much the same thing.

One CSS File

I personally like to have a single CSS file. Sometimes this file gets quite large, but at least I know where the site's styles are coming from. I don't have to dig through menu.css, links.css, styles.css, site-style.css, responsive-menus.css, and any number of other files, just to find the places where menu link colors reside. Previous developers' ideas of how CSS should be structured, and whether or not they were consistent in applying that structure, don't affect where the styles truly reside.

Typically, my CSS file works in a way that other people don't necessarily like.

1. Base elements
2. Structure
3. Classes

Base elements are selectors for the main HTML tags themselves. Every paragraph on the site is going to have a basic appearance. Every link at every state will have basic colors set. If I wish to override later for specific areas, that can be done in the sections below. This section may contain other selectors in certain circumstances. For instance, if I'm applying styles to input[type='submit'] and button, I may add a .button class for use on non-standard elements (like links).

The structure section contains styles based on the nested structure of the markup. Since it's broken down into regions and blocks universally, the nesting is consistent. The more nesting you see in the CSS file, the more specific the style must be. Other front-end devs avoid nesting like this, but I think it's useful.

Classes are reusable bits that are used all over the place. Every pager on the site is bound to look the same. Helper classes like '.hide' and '.away' reside here. I continue to use nesting in this section, so each nested part acts like a module.

tl;dr

With a slight learning curve and some initial overhead, you can use Tao base theme and a bunch of contrib modules to build Drupal 7 sites in a way that mirrors current CSS best practices.

Looking to have a site built with this common-sense style? Contact the Drupal experts.