CSS организация классов

[filehosting]

Здравствуйте. Помогите решить проблему. Есть много страниц, во избежания конфликта имен классов нужно организовать стили.
Как вы действуете в данной ситуации? Разбиваете стили на логические блоки или, скажем, добавляете class/id в тег body и потом указываете перед классом: .home .links/#home .links? Может быть добавляете префикс перед классом: home-links? Недавано работал над сайтом. Разметка состояла из типичной: header/content (left, right)/footer
Что то вроде

Пишу c-left и c-right, т.к. классы left и right уже определены.
Допустим есть страница home и article. Для обеих нужно использовать класс link
Как лучше написать: cr-home-link / #home cr-link / cr-h-link?
cr- нужно писать для того, чтобы каждый блок (header, cr-left, cr-right, footer) имел свою область видимости.
Может лучше вообще создать файл с общими стилями и файл, отдельно для каждой страницы сайта?
П.с: не люблю наследование, т.к. в данном примере вышло бы вообще .home .c-right .link, слишком длинная запись.

[Naive]

Может лучше вообще создать файл с общими стилями и файл, отдельно для каждой страницы сайта?

Верная мысль, но только на этапе разработки. Хотя я разделяю файлы по логическим блокам: например файл с новостями содержит стили для анонсов, самих новостей, архива и проч.

Может быть добавляете префикс перед классом

Что-то вроде этого... создаю классы с префиксами по следующему типу:
%назначение%[-%название_блока%]-%название_элемента%[-%состояние%]
Назначение:
g: глобальные стили (ссылки, кнопки, инпуты, отступы);
m: разметка (не глобальная, т.е. сюда не входит шапка, подвал, сайдбары, колонки, все это маркеруется айдишниками);
b: логический блок.
Название_блока:
news/articles/catalog_item etc.
Название_элемента:
— link/button etc (для глобальных);
— title/descr/text/img/tabs etc (для блоков);
Состояние:
Если один и тот же блок существует в разных состояниях, например позиция товара может быть в списке каталога, в корзине, на странице сравнения, на странице оформления заказа, в карточке товара.
Ну и супер-глобальная разметка: #header, #footer, #left-sidebar etc.
Пример:

<div class="b-news-item b-news-item-anonce">
  <div class="b-news-title b-news-title-anonce">
     text_node
  </div>
  <div class="b-news-descr b-news-descr-anonce">
    text_node
  </div>
</div>