CSS-модули

Действительно, такая изоляция может работать, но только для атомарных компонентов: когда мы уверены, что внутри ничего не появится (того, что мы не задумывали).

Во всех остальных случаях необходимо обеспечить, чтобы селекторы элементов одного блока не мачились на вложенный, потому что сам по себе селектор .cool-module .button не обеспечивает этого (будет мачится на все .button внутри, даже если это уже кнопка из другого, вложенного, блока)

БЭМ — методология развешивания костылей

но адепты БЭМ, мне кажется, не подумают даже хотя бы попробовать

Я «адепт БЭМ» и, тем не менее написал обзор CSS-модулей :)

БЭМ — появился не на пустом месте, а для решения конкретных задач. Если есть инструменты, которые могут решить эти задачи иначе: надо обязательно на них смотреть (как минимум, чтобы свой собственный взгляд в этом вопросе расширять).

CSS-модули

Спасибо, обновил ссылку на доклад

CSS-модули

Если вложить один компонент в другой:

<div class="mega-widget">
  <button class="button">mega-widget</button>
  <div class="my-another-mega-widget">
    <button class="button">my-another-mega-widget</button>
  </div>
</div>

Уникальные имена классов для каждого элемента избавляют от таких казусов. В БЭМ это решается неймингом, а в CCS-модулях — автоматически, за счет локального скоупа.

CSS-модули

Я как раз хотел противопоставить в каком-то смысле БЭМ и CSS-модули: есть одна и та же задача — решать ее можно по-разному.

Как верно отметил Iskin, плюс CSS-модулей в том, что «не надо ни о чем думать».

CSS-модули

Кажется, и так и так — сложнее, чем локальный скоуп для каждого компонента по дефолту.

CSS-модули

Проблема в том, что завтра это превратится в

.my-mega-widget {
  & > .button {
    & > .text {
      & > .icon {
        ...
      }
    }
  }
}

А послезавтра потребуется добавить обертку для кнопки и селектор непосредственного потомка перестанет работать.

CSS-модули

«Жесткие» компоненты с максимальным приоритетом собственных стилей — это круто, когда пишется нечто, что будет использоваться на разных сайтах

На любом сайте, который живет и развивается, компонентый подход оправдан.

Завтра приходит менеджер и просит переставить вот эту штуку сюда, а этот блок вложить вот в этот — не круто говорить в таких случаях «Я так не задумывал! Мне нужно неделю, чтобы все переверстать».

БЭМ — методология развешивания костылей

В Яндексе компонентый подход приняли задолго до того, как это стало популярно и все к этому пришли. Виталий Харисов первый раз рассказывал про БЭМ, кажется, еще в лохматом 2007 году.

CSS-модули

Что случится если внутри my-mega-widget появится my-another-mega-widget внутри которого будет button?

На button уже будут мачится два селектора: .my-mega-widget .button и .my-another-mega-widget .button, а это не то, чего ожидаешь от композиции компонентов.

CSS-модули

Имеется ввиду, наверное:

.my-mega-widget {
  &.disabled {
    // ...
  }
}

Или disabled — это вложенный элемент, а не модификатор для самого компонента?

H.264 декодер на JavaScript

В тему к операционкам на джаваскрипте — runtimejs.org. Любопытно. Проект новый.

jQuery-плагин для организации компонентов на странице

Хороший подход. По сути, это веб-компоненты, верно?

jQuery-плагин для организации компонентов на странице

Может стоит глянуть в сторону YM-модулей, вроде есть поддержка асинхронности.

jQuery-плагин для организации компонентов на странице

А не хочется собрать весь js виджетов в один бандл и загрузить на страницу целиком?

jQuery-плагин для организации компонентов на странице

Бэкбон это все-таки про одностраничные приложения, а это скорее reactjs, только очень простой — не для веб-приложений, которые живут годами, а для простых сайтов, например, лендингов

jQuery-плагин для организации компонентов на странице

убирать всё из глобальной области видимости

Предлагаете отказываться от jQuery как зависимости и поддержать нормальную модульность?

Изначальная идея была в том, чтобы сделать штуку для, грубо говоря, простого верстальщика, который привык работать с jQuery и на простом сайте он уже подключен.

jQuery-плагин для организации компонентов на странице

Да, можно и так действительно.

jQuery-плагин для организации компонентов на странице

Спасибо. Да, действительно, это все интересные задачки.

jQuery-плагин для организации компонентов на странице

Если я правильно вас понял, то логику отправки нового значения на сервер, после изменения значения счетчика, можно либо инкапсулировать в блоке:

$.define('counter', {
  ...
  methods: {
    inc: function() {
      this.count += this.params.step;
      this.updateOnServer();
    },
    updateOnServer: function() {
      $.ajax(...)
    }
  }
})

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