MSCC vs LESS(SCSS) ?
 

Что лучше?
Мультилеерный модульный подход или препроцессоры?

Лучше BEM + Stylus

Золотые слова:)

шутканул нет)? бем же вроде требует тоже компилятора, не?

С тремином БЭМ связана тонна не понимания и даже в самом Яндексе многие путаются:)

А если кратко: БЭМ - паттерн "Блок Элемент Модификатор", главным принципом которого является, что любой UI компонент это блок, его составляющие кишки это его элементы, а его состояния - это его модификаторы. UI блок полностью инкапсулирован, т.е. он имеет свой независимый CSS (паттерн АНБ - "Абсолютно Независимые Блоки"), свою JS реализацию и свой шаблон и и лежит в отдельной папочке. Там ещё есть соглашения об именования и т.д. Паттерн хорош тем, что он эксплуатирует ООП в построении UI блоков (как раз, ты Максимус всё спрашивал, как используют наследования в UI) и ввиду чего такую структуру очень легко поддерживать и модифицировать.

Помимо прочего, Яндекс имеет свой фреймворк для реализации паттерна:
1) i-bem - JS фреймворк для реализации паттерна;
2) bem.html - клиентский шаблонизатор;
3) bemhtml - серверный шаблонизатор;
4) bem-tools - набор утилит для работы.

Использование этих фреймворков не обязательно, и я например использую свою реализацию, т.к. мне не нравится эта.

После всего выше сказанного, итог: никаких компиляторов нет, это просто паттерн и да - это очень удобно) ну а Stylus - это просто царь препроцессоров CSS.

ЗЫ: http://ru.bem.info/method/definitions/

Смотрел ли ты лекцию MSCC против БЭМ?

Да. И более того, эти практики можно совмещать.

погоди, на беме же 1 слой, не?даже если создать второй слой то блоки с него не смогут влиять на блоки с первого слоя так как написано что бэм это МЕГАЧОТКАЯ инкапсуляция, а в MCSS блоки одного слоя могут влиять на блоки другого слоя

Ну у меня так: есть слой ресетов и слой страницы. Со слоём ресетов понятно, тупо сброс дефолтных параметров на нужные мне. А вот слой страницы как раз может влиять на блоки (с точки зрения CSS), разумеется в мерах разумного, например, на слое страницы говорится что если блок А вложен в блок Б, то добавляются отступы и т.д.

Сами блоки могут знать лишь про блоки, которые вложены в их структуру изначально (например блок b-select является дочерним к b-input, а также включать в себе блок b-drop-down), но слой страницы - это не блок, это просто общий контейнер который может вносить корректировки (но не в коем случае эти корректировки не должны работать с элементами или модификаторами блока), инкапсуляция блоков при этом сохраняется.

И что на что влияет не очевидно так как нет общих правил для этих связей и нет места где их можно указать и понятно только тебе и хранится у тебя в голове как я понял)?

п.с. пасоны, я кончил

Всё понятно и правила есть: если блок по своей структуре включает в себя другой блок (а это очень частый кейз), то с точки зрения 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 писали: "возможно мы добавим поддержку в следующих версиях", так что ждём) Ну или путь самурая: напиши плагин сам и прославься :)