Всё понятно и правила есть: если блок по своей структуре включает в себя другой блок (а это очень частый кейз), то с точки зрения CSS это просто:

.b-input {
    .b-drop-down {
         /* Общие корректировки */
     }
}

Т.е. блоки не знаю про содержимое других блоков, но у каждого блока есть интерфейс для общения. Кстати в самом же Яндексе так и делают :)

Ну у яндекса хуевый и дизайн и интерфейс который явно эталоном не служит)


а вообще я понял, а про интерфейс общения это ты javascript имеешь ввиду? или что?

А ещё есть библиотека nib, которая реализует поддержку всех основных свойств.

Как дизайн связан с архитектурным решением? Да и как по мне - он очень неплохой.

Нет общий интерфейс, в шаблонах и CSS он тоже есть, например свойство rootFont (ну, т.е. переменная препроцессора), задающей эталонный размер шрифта, относительного которого пляшут модификаторы size_xxs ... size_xxl

погугли "дизайн"

а как сделать поддержку Stylus в phpstorm???? как быть то?? на что он больше из популярных процессоров похож?

Увы пока поддержки нет. Но есть поддержка SAAS/SCSS - он наиболее близок к Stylus. Если ты юзаешь Python/Ruby стайл, то ставь поддержку SAAS, а если пишешь как на CSS, то ставь SCSS, я так и делаю.

Я погуглил и всё равно не понял, как то как что-то выглядит/работает связано с тем как это реализовано.
Давай опустимся до предметной области: одну и туже по виду и функциональности кнопку можно сделать n количеством способов.

Как-то так:

// toolbar/toolbar__menu.css
.toolbar__menu {
     width: 10px;
     // ...
}

// about/toolbar/toolbar__menu.css
.about-toolbar__menu {
     //...
}
.toolbar__menu_about {
     width: 20px;
     // ...
}

// news/toolbar/toolbar__menu.css
.toolbar__menu_news {
     width: 30px;
     // ...
}

// about/toolbar/toolbar__menu.html
div.toolbar__menu toolbar__menu_about

// news/toolbar/toolbar__news.html
div.toolbar__menu toolbar__menu_news

Если на сайте есть темы, то эффективность такого подхода оправдана более чем

так в стайлусе переменные же

ololo = red;

а в остальных

ololo : red;

ошибки не выдается но шторм это не подцепляет(( например не отображается цвет сбоку и.т.п. можно ли как-то это решить решал ли это кто то уже?

Я на это забил, лучше чем ничего. JetBrains писали: "возможно мы добавим поддержку в следующих версиях", так что ждём) Ну или путь самурая: напиши плагин сам и прославься :)