Styling Elements As Widgets

Try to think of a group of elements as a "widget". In Blogger template development, it's a term for gadgets, a kind of plugin for blogs to show some content, e.g. blog stats, quotes, link list.

index.html

<div class="wg-navbar">
  <h1 class="title"> Hello World </h1>
  <p class="description"> Lorem ipsum dolor sit amet ... </p>
</div>

css/skin-default.css

.wg-navbar {
  & { 
    /* widget-navbar style */ 
  }
  .title { 
    /* .title style, child of widget-navbar */ 
  }
  .description { 
    /* ... */ 
  }
}

By identifying them as a widget of specific purpose, you can make use of CSS nesting and have general class names for the children.

Another advantage is that by using a prefix on the class name, it's easier to manage when copying them to another project.