Оптимизация кода

Html-код контейнера с изображением и подписью

<div class="pull-left item-image">
   <img src="pic.jpg" alt="test" /> 
   <span class="caption">Образец рисунка</span>
</div>

Оптимизируем код css

.item-image {
   border: 1px solid #eaeaea; /* если не нужно - отключить */
   box-shadow: 2px 2px 8px #eaeaea; /* параметры теней */
   -webkit-box-shadow: 2px 2px 8px #eaeaea;
   -moz-box-shadow: 2px 2px 8px #eaeaea;
   height:auto;
   margin: 0 auto 2px;
   padding: 3px; /* если не нужно - отключить */
   text-align: center; /* выравнивание подписи */
   width: 80%; /* задаем ширину для рисунка по центру */
}
.item-image img {
   width:100%;
}
[class*="pull"].item-image{
   max-width: 30%; /* ограничение по ширине в узких колонках */
   width: 220px; /* переопределяем размер для рисунков слева и справа */
}
.pull-left.item-image {
   margin-right: 8px;
   float: left;
}
.pull-right.item-image {
   margin-left: 6px;
   float: right;
}
.pull-none.item-image {
  float: none;
}
span.caption {
   display: block;
   line-height: 1.1em;
   padding: 8px;
}

Таким образом, установив/изменив стили в одном месте, мы меняем оформление изображений с заданными классами на всем сайте.