Наследование и прототипы при вёрстке

Есть, допустим, несколько похожих элементов на странице. В CSS назначается класс-прототип, общий для них всех. Там описываются свойства по умолчанию для таких элементов: допустим, для разных кнопок. Фон, основные размеры и цвета, интерлиньяж и проч. Очевидно, что кнопки будут всё-таки разные: для различающихся кнопок описываем только стили, которые отличаются от прототипа: или перекрывают его свойства, или добавляют новые. Потом для кнопки достаточно написать сразу два класса:

class="bouton bouton-2-gros"

К кнопке применятся и стили прототипа, и стили особого класса. Другая кнопка будет иметь следующий второй класс:

class="bouton bouton-2-petit"

Она будет отличаться от первой только размерами. Чем это удобно?

Например, заказчик говорит: «А давайте синий цвет на кнопках заменим красным!»

Мы идём в описание класса .bouton, потому что именно там у нас описан цвет всех кнопок вне зависимости от размера, и меняем blue на red.

У всех кнопок цвет меняется, потому что он наследуется, а не описывается в классах для каждого конкретного типа кнопок.

В качестве примера привожу CSS-код с прототипом из одного своего рабочего проекта:

.bouton {
    display:block;
    color:#BC151B !important;
    font-size:8pt;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
    text-decoration:none;
    font-family:Arial, Helvetica, Sans-Serif;
    height:18px;
    border:0;
    cursor:pointer;
    padding:0;
    }
a.bouton {
    line-height:18px;
    }
.bouton:hover {
    color:#4E4C4C !important;
    }
.bouton-1-principal, .bouton-2-principal {
    width:62px;
    background:URL(images/bouton-1-principal.jpg) no-repeat 0 0;
    margin-bottom:3px;
    }
.bouton-2-principal {
    background:URL(images/bouton-2-principal.jpg) no-repeat 0 0;
    }
.bouton-2-petit {
    width:28px;
    background:URL(images/bouton-2-petit.jpg) no-repeat 0 0;
    }
.bouton-2-moyen {
    width:45px;
    background:URL(images/bouton-2-moyen.jpg) no-repeat 0 0;
    }
.bouton-2-grand {
    width:80px;
    background:URL(images/bouton-2-grand.jpg) no-repeat 0 0;
    }
.bouton-2-gros {
    width:100px;
    background:URL(images/bouton-2-gros.jpg) no-repeat 0 0;
    }