Я не вижу никаких преимуществ для этой концепции, так как текущее определение CSS несколько объектно-ориентированный уже с его каскадированием, селекторами, подстановочными знаками и т. д.

они упоминают отделение контейнера от содержимого, что для меня именно то, что CSS уже делает.

презентация, связанная с вопросом, была дана Николь Салливан, инженер по производительности в Yahoo.

есть видео оригинальной презентации на сайте Yahoo Developer Network и репозиторий для проекта простые OOCSS селекторы на github.

слайд-шоу-это отличный набор стандартов и рекомендаций. Я использую их все время, ища шаблоны и повторения в своих проектах, а затем раскладываю их на компоненты.

навигация, панель, решетка, репитер, карта, ЕТК. Все это общие компоненты, которые я разрабатываю для каждого сайта.

У меня также есть отдельные файлы CSS для утилит, страниц и контента. Утилиты хранят такие вещи, как мой clearfix или нормализатор маржи, страница хранит общий макет сайта (верхний, нижний колонтитул, основной), и содержание представляет собой универсальный набор правил для заголовков, абзацев, ссылок, списков и т.д. сайта.

"объектно-ориентированный" здесь несколько неправильно, по крайней мере, в строгом смысле этого слова. Но рекомендации по дизайну, которые он представляет, являются разумными и полезными и в какой-то степени облегчают "сломанность" стандарта CSS.

проблемы, которые он указывает-хрупкие конструкции, большие файлы, низкая ремонтопригодность и так далее, являются последствиями стандарта, который слишком свободен, слишком ориентирован на Ad hoc и основан на оригинальных целях дизайна, которые больше не действительны. Он правильно отмечает, что успешный дизайн требует ясной головы и большой самодисциплины.

звучит как модное слово поговорите со мной. Как сказал Джон Раш, CSS-это уже что-то вроде OO.

в соответствующей заметке вы можете посмотреть на компас рамки стилей. См. также букварь. Это выглядит интересно, хотя у меня еще не было возможности использовать его в проекте.

Я любовь чтобы увидеть некоторую форму наследования в css. Полномасштабный oo? Это, вероятно, было бы излишним, но наследование уменьшило бы размер моих таблиц стилей экспоненциально.

преимущество способность расширить объекты и сдержать код сухой и читаемый. Те, кто против него, обычно либо а) ненавидят имя, либо б) никогда его не использовали. Скажем так...

пример

каждый сайт имеет различные типы навигации. Вы можете иметь навигацию в теле заголовка, в боковой панели. Может быть, у вас даже есть вкладки или хлебные крошки на Вашей странице? Возможно, вам даже понадобится панель инструментов для текстового редактора на странице. Вот здесь .абстракция сча бы вступать в игру.

.nav
{
    margin-bottom:              24px;

    margin-left:                0;

    padding-left:               0;

    list-style:                 none;
}

.nav--right
{
    float:                      right;
}

.nav--stack .nav__item
{
    float:                      none;
}

.nav__item
{
    float:                      left;
}

.nav__item--active .nav__link
{
    font-weight:                bold;
}

.nav__link
{
    display:                    block;

    color:                      inherit;

    text-decoration:            none;
}

.nav__link:hover
{
    text-decoration:            underline;
}

Это тот же код, который будет отображаться во всех моих элементах управления. Теперь все, что мне нужно сделать, это создать для него несколько скинов.

Боковая Панель Кожей

.side .nav__item
{
    border-bottom:              1px dotted rgba(0, 0, 0, 0.2);
}

.side .nav__link
{
    padding:                    12px 0;
}

вкладки кожи

.tabs
{
    border-bottom:              1px solid #aaa;
}

.tabs .nav__item
{
    margin-right:               8px;
}

.tabs .nav__item--active .nav__link
{
    margin-top:                 -2px;

    position:                   relative;

    border-bottom:              1px solid #fff;

    bottom:                     -1px;

    color:                      #000;
}

Главное Меню Кожи

.menu .nav__item--active .nav__link
{
    border-radius:              2px;

    color:                      #fff;

    background-color:           #007bc3;
}

.menu .nav__link
{
    padding:                    12px 8px;
}

Вместе

все я делаю, это пишу имя объекта и имя кожи для атрибута класса. Это включает свойства оба.

<ul class="side nav nav--stack">

      <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

 <li class="nav__item nav__item--active">

        <a class="nav__link" href="#">

          Item

        </a>

      </li>

не паникуйте, видя .nav_пункт и .nav_link. Большинство используют li и a, но я хотел сделать его независимым от тегов.

Как указал Тор Хауген, термин "объектно-ориентированный CSS"является неправильным.

"объектно-ориентированный CSS" - это действительно просто шаблон дизайна для того, как получить максимальную отдачу от вашего CSS и в основном тот же подход, который Джонатан Снукс называет SMACSS.

независимо от того, называете ли вы его OOCSS или SMACSS, ключом к подходу является создание общих элементов пользовательского интерфейса, таких как nav абстракция. Эти элементы UI затем могут быть расширены с помощью более конкретных функций добавление дополнительных классов к элементу и / или элементу контейнера. Или, в качестве альтернативы, вы можете добавить свои собственные правила CSS, используя ID элемента или семантические классы.

для реальных примеров OOCSS проверьте фреймворки, такие как Основы Каскад, тоже принимал и InuitCSS.

читайте далее :

• введение в объектно-ориентированный CSS (Простые OOCSS селекторы)
• OOCSS + Sass = лучший способ CSS