function menu_css_class($css_class, $page){
    $css_class[] = "page-slug-" . $page->post_name;
    return $css_class;
}
add_filter("page_css_class", "menu_css_class", 10, 2);

In this case, blog titles needed to be of any length, but have their lengths truncated under certain circumstances. Furthermore, excerpts need to be able to be the default length (50 words), but shorter (10 words) under those same certain circumstances.

Fortunately for me, the excerpt was easily fixed using a plugin called the excerpt reloaded.

http://guff.szub.net/2005/02/26/the-excerpt-reloaded/

Next, for the title length requirements, you will need to modifiy a core file: wp-includes/post-template.php.

[php]
function the_title($before = ‘’, $after = ‘’, $echo = true, $length = false) { $title = get_the_title(); if ( $length && is_numeric($length) ) { $title = substr( $title, 0, $length ); } if ( strlen($title) > 0 ) { $title = apply_filters(‘the_title’, $before . $title . $after, $before, $after); if ( $echo ) echo $title; else return $title; }
}
[/php]

Finally, when in The Loop, call the_title() like this:

[php]< ?php the_title('', '', true, '40') ?>[/php]

Now, the title will be a mere 40 characters long, and the excerpt (using the_excerpt_reloaded()) can be any desired length.

The design of the site is awesome, and they eat their own cooking. (Plus, they use WordPress!) They employ css tricks I have seldom seen used before, and consistently use semantic tags (<abbr>, <q>).

The best trick of all: the sibling selector. Why? Because it allows for truly semantic output with the leanest markup possible. Before, I might have marked up a simple content block like this:

<div class="content"><br />

   <h1>Title</h1><br />

   <img src="url" alt="pic related to story">

   <div class="block"><br />

      <p class="intro">This is an introduction sentance or paragraph.  It is supposed to represent a blurb about the article below.</p><br />

      <div class="mainbody"><br />

         <p>content</p><br />

         <p>content</p><br />

         <p>content</p><br />

         <p>content</p><br />

      </div><br />

      <p class="footer">Footer.  Date or links, or whatever.</p><br />

   </div><br />

</div>

div.content { }

div.content h1 { font-size:1.8em; }

div.content div.block { border:1px solid black; }

div.block p.intro { font-weight: bold; }

div.block img { float:right; }

div.block div.mainbody { clear: both; }

div.mainbody p { color: #006; }

p.footer { font-size: 0.7em; color: #888; }

<div class="content" ><br />

   <h1>Title</h1><br />

   <img src="url" alt="That image again"/><br />

   <p>This is an introduction sentance or paragraph.  It is supposed to represent a blurb about the article below.</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p class="footer">Footer.  Date or links, or whatever.</p><br />

</div>

div.content { }

div.content h1 { font-size:1.8em; }

div.content p { color: #006; }

div.content h1+p { color: #000; font-weight: bold; clear:both;}

div.content h1+img { float:right; }

div.content img { float:left } /* Just for fun */

div.content p.footer { font-size: 0.7em; color: #888; }


	
That’s all there is to it.  Now, the line between content and design is darkened.
	
One thing: the class hook remains on the footer element.  This is because adjacent-sibling selectors do not work in reverse.  The selector applies only to the element after the +, and there is no selector that applies to a previous adjacent-sibling element.
	
Sources


Eric Myer wrote about them.

The W3C recommends them.

John Gallant and Holly Bergevin say IE7 supports them.