OOP-like CSS naming

example.scss

// css/search-form.scss

.search-form {
  > .field {

  }
}

// css/search-form/iconic-button.scss

.search-form > .iconic-button {
  > .icon {

  }
}

// css/search-form/-prefixed.scss

.search-form.-prefixed {
  > .prefix {

  }

  > .field {

  }
}

// css/search-form/-prefixed/iconic-button.scss

.search-form.-prefixed > .iconic-button {
  > .icon {

  }
}

// css/search-form/-sm.scss

.search-form.-sm {
  > .field {

  }
}

// css/search-form/-sm/iconic-button.scss

.search-form.-prefixed > .iconic-button {
  > .icon {

  }
}

example.slim

.search-form
  .field
  .iconic-button.-primary
    .icon

.search-form.-prefixed
  .prefix
  .field
  .iconic-button.-primary
    .icon

.search-form.-sm
  .field
  .iconic-button.-primary
    .icon

Навеяно подходом RSCSS (сайт, презентация)

Плюсы

• Элементы внутри компонентов можно называть как угодно, не задумываясь;
• Нет каскадности, т.к. элементы стилизуются через > селектор;
• Каждый компонент - в своем файле;
• Стили для вложенных компонентов очень похожи на наследование в ООП (subclass < class < superclass);
• Верстка не взрывается, как в случае с БЭМ;
• Верстка интуитивна - достаточно зайти в файл стилей компонента, чтобы вспомнить, как его верстать;

Нюансы

Конфликты со стилями подключаемых библиотек

Когда возникает: Подключаемая js-библиотека использует классы такие же, как классы элементов.
Что происходит: Стили js-библиотеки применяются ко всем элементам с такими же классами.
Как решить: В проекте явно обнулить стили элементов, и уточнить во вложенных стилях js-библиотеки.