BEM'a не должно существовать


Здравствуйте.

BEM'а не должно существовать. Есть огромное количество причин не использовать эту методологию, но из-за её простоты использования и непонимания работы CSS и HTML, методология широко распространилась среди фронтендеров всего мира, в большинстве случаев среди разработчиков СНГ. Используется BEM сейчас как на больших русскоязычных проектах (Yandex, Habr), так и в некоторых фреймворках (react-md). В этой статье пойдёт подробный разбор плюсов и минусов этого подхода к разработке. Все примеры вёрстки будут взяты с официального сайта BEM.



Аббревиатура BEM — блок/элемент/модификатор. Любой макет или дизайн можно визуально разбить на блоки, к примеру — sidebar сайта. В каждом блоке могут содержаться один или несколько элементов. У элементов могут быть модификаторы состояния (active, disabled), дополнительные классы для изменения границ, ширины, цвета фона и т.д.

Идея разбития макета на блоки не новая, что нам предлагает BEM — удлинять имена классов, всегда делать элементы зависимыми от названия блока и задавать любой класс глобально. Помогает это буквально нигде и приводит к печальным последствиями в вёрстке проектов. Ниже описаны по пунктам проблемы в использовании BEM'a:

Нечитабельный html


Это вёрстка с официального сайта BEM. Удлинённые и php-подобные названия CSS классов делает любую вёрстку абсолютно нечитабельной вперемежку с атрибутами:

<ul class="article-rewind article-rewind_type_static article-rewind_lang_ru">
    <li class="article-rewind__next">
        <div class="article-rewind__next-text">Читать далее</div>
        <a class="article-rewind__next-link" href="">Основные понятия</a>
   </li>
</ul>

Ниже предоставлен образец вёрстки без наследования в имени класса названия блока, модификаторы привязываются к главному классу через наследование в SCSS, а не текстовое название класса:

<ul class="article-rewind type-static lang-ru">
    <li class="next">
        <div class="text">Читать далее</div>
        <a class="link" href="">Основные понятия</a>
   </li>
</ul>

.article-rewind {
  margin:      0;
  padding:     0;
  list-style:  none;
  &.type-static {
    position:  relative;
    display:   flex;
  }
  &.lang-en {}
  &.lang-ru {}
  &.lang-uk {}
  & > .next {
    position:      relative;
    flex-grow:     1;
    align-self:    center;
    margin-right:  88px;
    text-align:    right;
    .text {
      font-size:   16px;
      position:    absolute;
      right:       0;
      margin-top: -32px;
    }
    .link {
      font-size:   40px;
      line-height: 46px;
    }
  }
}


Сложности с наследованиями модификаторов


Любой класс в BEM — глобальный, и модификаторы — не исключение. Там, где CSS позволяет основному классу, например, button наследовать несколько классов active, disabled, error, вы будете задавать всё это глобально, наследуя в имени родительские имена блоков и элементов. Такой подход — игнорирование возможностей CSS как вложенность элементов в класс и удлинение имён на ровном месте:

    <h1 class="article__heading_level_1 article__heading_level_1_active"></h1>

Пример наследования модификаторов через SCSS, а не через слова в имени класса:

    <h1 class="heading active"></h1>

.article {
  h1.heading {
    font-size:   50px;
    line-height: 64px;
    float:       left;
    &.active {
      color:     #ccc;
    }
  }
}

Все классы — псевдо-глобальные


По сути, в глобальных классах нет ничего плохого. Проблема в том, что в названии класса сохраняется имя блока или элемента и использовать его вне блока уже нельзя и глобальность становится бесполезной. Плюс ко всему в браузере висят глобальные классы, к примеру promo-section_color_white который всё что делает — меняет цвет фона на белый, причём применить это можно только к блоку .promo-section. Для других блоков с белым фоном делайте новый класс с хардкодом в названии. Элементы не могут быть использованы везде в проекте, хотя и применять классы технически возможно везде:

  <div class="promo-section promo-section_color_white"></div>

Вместо привязки к блоку через текст в html, можно сделать классы по-настоящему глобальным, переиспользовать на других секциях и абсолютно ничего не потерять:

  <div class="promo-section background-white"></div>

.promo-section {
  position: relative;
  padding:  0 0 70px;
}
.background-white {
  background-color: white;
}

Запрещение использования семантики


Дословная цитата из документации:
В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id
В местах, где можно с помощью mixin'a или цикла в препроцессоре воспользоваться наследованием через html-тег вы не можете этого делать:

  <h1 class="article__heading article__heading_level_1"></h1>
  <h2 class="article__heading article__heading_level_2"></h2>
  <h3 class="article__heading article__heading_level_2"></h3>

Здесь стили можно было задать через h1,h2 и так далее, но теперь вместо ссылки на тэги мы глобально имеем заданный класс «article__heading_level_1».

  <h1 class="heading"></h1>
  <h2 class="heading"></h2>
  <h3 class="heading"></h3>

@for $index from 1 through 6 {
  h#{$index}.heading {
    font-size: (42px / $index);
  }
}

/* mixin output */
h1.heading {font-size: 42px;}
h2.heading {font-size: 21px;}
h3.heading {font-size: 14px;}
h4.heading {font-size: 10.5px;}
h5.heading {font-size: 8.4px;}
h6.heading {font-size: 7px;}

Подразумевает вёрстку только блоками


В каждом большом темплейте есть мелкие элементы, как кнопки, дропдауны, тайтлы, субтайтлы, секции и т.д. Но в БЭМе у вас их нету, так как любой элемент без блока использовать тоже запрещено.
Элемент — всегда часть блока и не должен использоваться отдельно от него.
Хотите дропдаун не только в хэдере? На сайте BEM'a дропдаун в header'e свёрстан как попап, лежащим в корне body. По сути, этот пункт является запрещением создания полноценного темплейта, а не чего-нибудь сложнее лэндинга.

Плюсы


Их нет. БЭМ уничтожает понятие темплейта, запрещает использование функций CSS, подталкивает разработчика к хардкоду. Буду рад похвале методологии в комментариях, будет пища для размышлений.

Оригинальная статья:
hackernoon.com/bem-should-not-exist-6414005765d6
Поделиться публикацией

Похожие публикации

Комментарии 679

    +6
    Подобные разгромные статьи, касающиеся любой методологии нужно начинать, не с
    BEM'а не должно существовать
    а с чего-то что-то типа:
    Имея за плечами более чем двадцатилетний опыт разработки…
      +24
      Не думаю, что тут особо важен опыт разработки. Ибо опыт опыту рознь. Да и 20 лет опыта разработки в вебе? Где же столько взять. Да и в добавок 20 лет, так или иначе будет некий фанатизм, обречённость, принятие, не будет рационального. А вот свежий взгляд тут и говорит о проблемах. После использования webpack + less|sass|stylus, на BEM смотреть вообще не могу.
        +8

        Препроцессоры наоборот помогают использовать БЭМ. Можно же писать примерно так:


        .header {
          &__logo {}
          &__title {}
          &__userbar {}
        }

        И препроцессор сам вам сконкатенирует названия классов, избавляя от необходимости повторять название блока:


        .header {}
          .header__logo {}
          .header__title {}
          .header__userbar {}
          +7
          Да, но как быть с этим?
          <ul class="article-rewind article-rewind_type_static article-rewind_lang_ru">
              <li class="article-rewind__next">
                  <div class="article-rewind__next-text">Читать далее</div>
                  <a class="article-rewind__next-link" href="">Основные понятия</a>
             </li>
          </ul>
          

          Как то однажды я сделал так:
          const _ = "app_tourney__popup__";
          const w = _ + "w";
          const l = _ + "l";
          const r = _ + "r";
          const b = _ + "b";
          const c = _ + "c";
          const bg = _ + "bg";
          
          export default class TourneyPopupView extends React.Component {
              render() {
                  const { position } = this.props;
          
                  return (
                      <span className={b} ref={e => (this.b = e)}>
                          {this.props.children}
                          <span className={c}>
                              <span className={(position == "right" ? r : l) + " " + w}>
                                  <span className={position == "right" ? l : r}>
                                      <span className={bg}>{this.props.title}</span>
                                  </span>
                              </span>
                          </span>
                      </span>
                  );
              }
          }
          

            0
            а не проще ли использовать css-modules и делать просто импорты классов?
              0
              проще
                +3
                Ну вот не лежит у меня душа к css-modules. Что-то внутри меня прямо так и говорит: «Не используй css-modules!»
                  0
                  Вы наверно ещё и ESNext-ненавистник?
                    0

                    А почему? Как по мне — очень удобно. Ты создаешь компоненту, рядом кладешь CSS. И тебе не надо заморачиваться по поводу именования. Допустим есть компонента Article и Comment. И них есть автор. В двух CSS-ках компонент совершенно спокойно можно использовать класс .author не боясь, что что-то где-то пересечется

                      0
                      Оно потом в зависимости от фреймворка либо к классам хэши припишет, либо на атрибуты с хешами завяжется. В девтулс потом всё это смотреть — в глазах рябит.
                        0

                        Ну в моей практике CSS modules просто превращает классы в уникальные хэши. При этом вид конечного класса можно настроить, чтобы красиво отображалось (имя файла добавить, изначальное имя класса и т.п.). И проблем при дебагинге нет

                        0
                        Может сейчас уже удобно, но когда пробовал очень неудобно было делать стилизацию компонентов низкого уровня зависящей от компонентов высокого. Типа цвет фона кнопки должен быть такой же как цвет бордера текущей панели.
                    0

                    В Альфа-Банке сделали так: https://www.npmjs.com/package/cn-decorator


                    Илил да, можно перейти на css-modules.

                      0
                      Что-то Альфа-банк придумал дичь какую-то, как мне кажется. И зачем для реакта еще что-то придумывать, если есть Styled components, прекрасная либа.
                      0

                      Генерировать эти классы/атрибуты автоматом. Например, из такого шаблона:


                      <ul id="my-article-rewind" _type="static" _lang="ru">
                          <li id="next">
                              <div id="next-text">Читать далее</div>
                              <a id="next-link" href="">Основные понятия</a>
                         </li>
                      </ul>
                        0
                        Я тоже склоняюсь к такому решению.
                          0
                          с таким решением нельзя миксовать en.bem.info/methodology/css/#mixes
                            0
                            Миксы — сомнительная практика. Я их не применяю.
                          0

                          Что-бы не было "этого", нужно знать сам BEM, нельзя делать двойную вложенность.
                          т.е. не article-rewind__next-text, а article-rewind__text

                            0

                            Да нет, тут всё правильно. Название должно обладать семантической точностью. text — слишком общее, текстов может быть много разных в блоке. И если в next и prev должны быть разные стили текста, то и называться они должны соответственно next-text и prev-text. А вот если одинаковые, то уже и там и там должно быть item-text.

                            0

                            В article-rewind__next-text всё правильно написано. Это элемент next-text блока article-rewind.

                              0

                              Прошу прощения, нельзя с утра комментарии писать, читал и писал article-rewind__next-text, а думал про article-rewind__next__text

                            0

                            Это что у вас за элементы элементов? По бэму не может быть такого. Стоит перечитать. И ещё используйте пакет classnames для конкатинации стилей.

                              –1
                              БЭМ — не священное писание. Иногда требуется стилизовывать и элементы элементов.
                                +1

                                Вы или не на тот коммент отвечаете или просто ёрничаете не найдя что ответить)

                            0

                            На реакте я запилил такое:
                            (показываю только использование, без реализации)


                            const { block, element } = bem('ArticleRewind');
                            
                            function ArticleRewind (props) {
                              return (
                                <ul {...block({ [props.type]: true, [props.lang]: true )}>
                                  <li {...element('next')}>
                                    <div {...element('nextText')}></div>
                                    <div {...element('nextLink')}></div>
                                  </li>
                                </ul>
                              );
                            }

                            При вызове


                            <ArticleRewind type="static" lang="ru" />

                            На выходе будет:


                              <ul class="ArticleRewind ArticleRewind_static ArticleRewind_ru">
                                  <li class="ArticleRewind__next">
                                    <div class="ArticleRewind__nextText"></div>
                                    <div class="ArticleRewind__nextLink"></div>
                                  </li>
                                </ul>
                              –1
                              Как-то много писанины. Лучше вынести всю её в HOC.
                                0

                                Как будет выглядеть, не опишите? Мне как-то не очень нравится идея с дополнительным HOC для каждого компонента.

                                  0
                                  Идея простая, ХОК получает VDOM дерево, пробегается по нему, находит id атрибуты и генерирует по ним россыпь классов.
                                    0
                                    HOC не может получить VDOM-дерева, как и любой другой компонент. Для модификации VDOM нужно не HOC делать, а декоратор который в готовом классе методы заменяет.
                                      0
                                      ХОК и есть такой декоратор.
                                        0
                                        Don’t Mutate the Original Component. Use Composition. — https://reactjs.org/docs/higher-order-components.html

                                        Вот этому совету последовать не получится.

                                          0
                                          С чего бы? Отрендерили вложенный компонент, обработали полученный от него вдом.
                                            +1
                                            Как получить вдом от вложенного компонента? Притвориться реактом и вызвать у него метод render напрямую?
                                              –1
                                              Ваш любимый JSX как думаете что возвращает?
                                                –1
                                                Повторяю вопрос: как вы собрались добираться до jsx, который инкапсулирован в методе render вложенного компонента?
                                                  –1
                                                  А давайте вы выключите дурачка. Оборачиваете функцию/класс компонента и именно его VDOM процессите. Лезть глубже совершенно ни к чему, там свои хоки отработают.
                                                    –1
                                                    А давайте вы перестанете нести тарабарщину и приведете хотя бы примерный код?
                                                      0
                                                      Мне оно зачем? Я не пользуюсь Реактом и вам не рекомендую.
                                              0

                                              Подозреваю, что иерархический рендеринг с генерацией контекста для css классов должен взять на себя фреймворк.
                                              Если это так, то ему вполне достаточно знать связи между соседними css классами в иерархии, при условии, что имена этих классов являются уникальными. Чтобы обеспечить уникальность можно в их имена добавить номер уровня в иерархии.

                                0

                                Формально у вас вроде БЭМ, но по существу издевательство. Я бы предложил:


                                <ul class="article__rewind rewind rewind_static rewind_lang_ru">
                                    <li class="rewind__next">
                                        <div class="rewind__text">Читать далее</div>
                                        <a class="rewind__link" href="">Основные понятия</a>
                                   </li>
                                </ul>

                                Теги вложены на много уровней, а элементы блока идут "в один уровень". Это фишка БЭМа, которая все упрощает. В то же время блок является элементом другого блока за счет применения нескольких классов (миксования).

                                  0
                                  Ну а что тут не так? Вы же не одним пальцем набираете. Все же, больше времени уходит не на напечатывание имен классов, а на продумывание стилей.
                                  +6
                                  Препроцессор можно заставить генерировать код по БЭМ, но ради какой практической выгоды?
                                    0

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

                                      +1
                                      Ссылочку на реальный бенчмарк, где в условиях чистого эксперимента сравнивается пресловутая «нагрузка» при использовании каскадных и не-каскадных селекторов вы представить можете?
                                        –2

                                        Мне достаточно знать как браузер парсит html

                                          +1
                                          Это называется premature optimization
                                            0
                                            Этого никому не может быть достаточно для обоснованного вывода, потому что влияющих факторов — множество. Нет практического сравнения двух изолированных случаев — нет факта, есть одни домыслы.
                                              0

                                              Сами то проверяли? На проекте в 500 строк css кода действительно нет, но там пофиг как писать.

                                                0
                                                Естественно, я сам не проверял, как и вы.
                                                Но вот какая штука — browser-ы писались и пишутся исходя из каскадности стилей. Потому реальных оснований считать, что селекторы с километровыми именами без каскадности работают лучше — нет. А в пользу вашего утверждения даже косвенных аргументов нет.
                                                  0
                                                  Каскад действительно работает медленнее классов без вложенности, яндексоиды публиковали тесты.
                                                  Но реально заметную на глаз разницу это давало только на очень больших страницах — десятки тысяч узлов. В реальной жизни такие почти не встречаются.
                                                  Но некоторая разница всё-таки есть, это факт.
                                                    0
                                                    Почти любой JS файл окажет на порядок большее влияние, чем каскады CSS 10-ти уровневой вложенности.
                                                      +1
                                                      Это очень абстрактное утверждение. В зависимости от условий узкие места могут меняться. В принципе я согласен, что на практике CSS не является узким местом почти никогда. Но потенциально может им быть.

                                                      Там смысл был в том, что каскады влияли на скорость reflow.
                                                      И если вдруг ваше веб-приложение так устроено, что reflow случается часто (а способов его вызвать довольно много) — это могло вылиться в ощутимые подлагивания.
                                                        0
                                                        Обычно проблему большого числа перерисовок решают уменьшением их числа, а не уменьшением времени, занимаемым самой перерисовкой. Хотя я полностью согласен с тем, что исключения существуют, но их всё же исчезающе малый процент.
                                              +1
                                              Какой конкретно браузер какой конкретной версии? Или все браузеры с 90-х годов парсят идентично?
                                        0
                                        поддерживаю на 100%
                                          0
                                          А теперь условный сайт на БЭМ'е попадает в руки к новому разработчику. Сайт большой, десятки css и html файлов и т.д. И встает перед ним задача — поменять background у элемента. Открывает он сайт, копирует класс нужного элемента, ctrl+shift+f '.header__title' (только в реальности это будет article__heading_level_1_active). А нет такого. В лучшем случае помогут map'ы, но с ними тоже проблем хватает.
                                            +1
                                            Зачем копировать? Он видит имя блока «header», идет и открывает файл _header.scss в котором достаточно быстро находит искомый селектор.
                                              +2
                                              идет и открывает файл _header.scss в котором достаточно быстро находит искомый селектор

                                              Если это сферический проект в вакууме, то да, все так и будет. Реальность же несколько отличается — проект растет и меняется, разработчики сменяют друг друга, а их уровень может быть самым разным.
                                              +1

                                              JFYI класс article__heading_level_1_active не по БЭМ.

                                                0
                                                Виталий, а почему? Это же вроде так:

                                                article - блок
                                                heading - элемент
                                                level_1_active - модификатор


                                                Или потому, что смешаны модификаторы level_1 и active?
                                                  0
                                                  Да.
                                              0
                                              гененрировать класс с помощью препроцессора не плохая ли практика?
                                                –1

                                                Препроцессор как раз и нужен для автоматизации рутины, разве не для этого его придумали?

                                                  –1
                                                  еще для автоматизации рутины придумали компьютер
                                                    0

                                                    Так в чём вы видите недостатки генерации классов препроцессором?

                                                      0
                                                      Только в читабельности и поиске.
                                                      Хотя я не совсем понимаю, какие вообще есть преимущества такого исользования.
                                                        0
                                                        Преимуществ несколько, но все их собирательно можно обозначить как «общие множители полезно выносить за скобку»
                                                0
                                                Есть проблема, если я хочу найти место, где класс был определен, то с таким подходом нельзя просто искать по имени класса. Например я хочу найти scss, где определен .header__title, искать его по "__title", а потом потом по ".header" или наоборот.
                                                  +2

                                                  По .header, конечно. Чаще всего будет единственный файл с таким блоком.

                                                  +1
                                                  Препроцессоры наоборот помогают использовать БЭМ. Можно же писать примерно так:

                                                  Вопрос в том — зачем?

                                                    0
                                                    На тупой вопрос тупой ответ: это удобно.
                                                      +1

                                                      Так наоборот же — очень неудобно.
                                                      Вот и вопрос — ради чего жертвовать удобством?

                                                        0
                                                        Почти так же удобно как простым каскадом, но получаете плюсы БЭМ.
                                                          0
                                                          Почти так же удобно как простым каскадом, но получаете плюсы БЭМ.

                                                          Так мы как раз и начали с того, чтобы выяснить плюсы. То есть минусы очевидны — лишняя писанина, что делает использование БЭМа неудобным.
                                                          А что их плюсов? Вроде как снимается проблема изоляции стилей, но если использовать современные фреймворки/shadow dom, которые эту изоляцию в адекватном виде предоставляют, то это становится ненужным, разве не так?

                                                            0
                                                            но если использовать современные фреймворки/shadow do

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

                                                              0
                                                              И БЭМ, и современные фреймворки/shadow dom можно считать в этом контексте решением одной родовой проблемы CSS. Можно сказать и «если используем БЭМ, то возможности изоляции стилей современных фреймворков/shadow dom становятся ненужными». Это, например, расширяет список рассматриваемых фреймворков. Ну и об адекватности представления у разных людей разные мнения. Некоторыми например считают абсолютно неадекватным подход CSS-in-JS.
                                                                0

                                                                Плюсы от бема описаны на bem.info и это не про изоляцию стилей. Это и упрощение поддержки/рефакторинга и правила позиционирования, и правило применения одинаковых свойств большому количеству элементов. Просто откройте и почитайте bem.info про цсс, там не много

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

                                                                  Это все про обычный цсс, а не про бэм. Зачем нцжен цсс понятно, мы же тут конкретно бэм обсуждаем, какие задачи бэм решает.

                                                                    +1

                                                                    Нет, это как раз про бэм. Вы не разобрались просто.


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


                                                                    БЭМ это про самодокументируемость, поддерживаемость, внешнюю геометрию и позиционирование, про стилизацию групп блоков, упрощение рефакторинга кода, и другое.


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


                                                                    Без бем все разроботчики договариваются о своём неком стиле кодирования, при этом на каждой новой работе_без_бэма правила разные — это удлинняет процесс адаптации новых сотрудников.

                                                                      –2
                                                                      Нет, это как раз про бэм.

                                                                      Погодите, еще раз. В цсс все это есть, что к этому добавляет бэм, если оно уже есть, без бэма?

                                                                        +2
                                                                        что именно есть в цсс?
                                                                          +1
                                                                          В цсс все это есть

                                                                          А можете привести конкретный пример того, как описанное выше в комментарии достигается с помощью «обычного» CSS, без всякого БЭМа и т.д. Сейчас складывается впечатление, что вы потралливаете. Причём второй комментарий подряд)

                                                                            –2
                                                                            А можете привести конкретный пример того

                                                                            Ну давайте тогда с конкретным примером, по поводу чего надо привести пример, чтобы не было ненастоящих ирландцев ;)


                                                                            Типа: "вот так оно в БЭМ: ..., это решает задачу Х за счет Y, как в данном случае решить Х без БЭМа?".

                                                                              0
                                                                              Типа: "вот так оно в БЭМ: ..., это решает задачу Х за счет Y, как в данном случае решить Х без БЭМа?".

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

                                                                                0

                                                                                Если бы кто-то в комментах написал — вы могли бы привести ссылку на коммент. Но не привели. Потому что никто не написал :?)

                                                                            0
                                                                            БЭМ не добавляет ничего к CSS, БЭМ наоборот накладывает запрет на использование всех возможностей CSS, в этом его суть.
                                                                          0
                                                                          Блин. Цсс это технология или язык если угодно, бэм — методология наподобии архитектурного паттерна. Какие задачи решают паттерны?
                                                                            0

                                                                            Задачи унификации и коммуникации. Как в этих задачах помогает БЭМ?

                                                                              0
                                                                              Собственно унифицирует подход к написанию CSS и упрощает коммуникации путем введения терминов, а так же правил именования.
                                                                                0

                                                                                Ну вот беру я условный ангуляр, там есть те же по смыслу термины, при этом их семантика еще и форсируется на уровне самого фреймворка (например, изоляция стилей гарантирует, что внутри "блока" можно управлять только стилями "элементов" и внутренними стилями самого блока, без плясок с именованием и самоограничений).
                                                                                Зачем БЭМ? Он в данном случае будем выступать как ненужная дублирующая концепция, разве нет?

                                                                                  +1
                                                                                  БЭМ прежде всего для «голой» вёрстки, без ангуляров и реактов. Хотя может применяться и с ними, если игнорировать возможности фреймворков по стилизации, полностью или частично. С таким же успехом можно спросить зачем в ангуляре сделали изоляцию стилей, если уже есть БЭМ? Грубо, это конкурирующие подходы к стилизации, со своими плюсами и минусами, и надо смотреть по конкретным проблемам и задачам. Вводить ангуляр только для изоляции стилей без использования остальных его возможностей — явно не самое удачное решение будет (если вообще єто будет возможно, если он не вынудит нас использовать и другие его фичи типа биндингов и директив), если проблема у нас только со стилями.
                                                                                    0
                                                                                    С таким же успехом можно спросить зачем в ангуляре сделали изоляцию стилей, если уже есть БЭМ?

                                                                                    Потому что в ангуляре изоляция работает на уровне фреймворка без дополнительный усилий со стороны программиста. Просто работает.


                                                                                    БЭМ прежде всего для «голой» вёрстки, без ангуляров и реактов.

                                                                                    Ну то есть при использовании полноценных фреймворков БЭМ не нужен. Это просто костыль. Так?

                                                                                      +2
                                                                                      Нет, она требует дополнительных усилий. При обычной организации стилей изоляции нет (если не использовать БЭМ :) и ко). ФРеймворк требует прилагать особые усилия, чтобы была изоляция.

                                                                                      Не путайте «не нужен» и «появляется альтернатива». Грубо, без ангуляра у вас две альтернативы: спаггети и БЭМ, а с ангуляром три: спагетти, БЭМ и средства ангуляра.
                                                                                        0
                                                                                        Нет, она требует дополнительных усилий.

                                                                                        Эм, нет. Фреймворк все делает сам.


                                                                                        спаггети и БЭМ, а с ангуляром три: спагетти, БЭМ и средства ангуляра.

                                                                                        Но зачем использовать БЭМ, если есть некостыльные методы, которые делают то же самое, но лучше и без дополнительных телодвижений?

                                                                                          0
                                                                                          Сам он не делает, нужно соблюдать правила фреймворка чтобы изолировать стили. Например подключать их в JS-коде компонента а не обычным тегом link. Или вообще писать их нестандартным способом, какой-нибудь CSS-in-JS со своей спецификой типа обязательных кавычек вокруг имён CSS-свойств со знаком -.

                                                                                          Изоляция стилей во фреймворках — тоже костыль для обхода недостатков CSS, просто другой подход к проблеме изоляции стилей.
                                                                                            –1
                                                                                            Сам он не делает, нужно соблюдать правила фреймворка чтобы изолировать стили.

                                                                                            Но это не требует каких-то дополнительных усилий, вот в чем суть. Использование БЭМ — требует.

                                                                                              0
                                                                                              Чтобы соблюдать какие-то правила написания CSS кроме стандартных всегда нужно прилагать дополнительные усилия. А прилагать их для соблюдения правил БЭМ или фреймворка — вопрос выбора. Например, выбирать между усилиями по написанию длинных имён классов или по экранированию имён свойств и сеелеторов, да настройке окружения для этого.
                                                                                                0
                                                                                                Чтобы соблюдать какие-то правила написания CSS кроме стандартных всегда нужно прилагать дополнительные усилия. А прилагать их для соблюдения правил БЭМ или фреймворка — вопрос выбора.

                                                                                                Конечно нет, ведь есть еще вопрос количества усилий. В случае фреймворка — они практически нулевые, примерно на том уровне, когда их и вовсе нет. В случае БЭМ — они выше на порядок.


                                                                                                С-но, ведь тот же ангуляр при изоляции стилей, по сути, делает ровно то же самое, что в делается в БЭМе, только автоматически. В БЭМе это надо делать руками.

                                                                                                  0
                                                                                                  Он не делает этого автоматически, чтобы он сделал нужно как-то указывать какой компонент с каким CSS файлом связан. Ну никак иначе фреймворк не догадается какой файл стилей с каким компонентом связан. Это я исхожу из предположения, что в ангуляр таки можно как-то вообще связать CSS файл и компоненты, а то может быть что новый язык стилей нужно будет учить
                                                                                                    0
                                                                                                    Ну никак иначе фреймворк не догадается какой файл стилей с каким компонентом связан.

                                                                                                    Зависит от архитектуры. В MAM архитектуре, сборщик вполне понимает, что эта группа файлов относится к одному модулю. Другое дело, что проблема конфликтов имён куда лучше решается семантическими неймспейсами, чем изоляцией.

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

                                                                                                      Естественно, мысли фреймворк не читает. Вы говорите, ему, какие стили как изолированы, и он автоматически обеспечивает эту изоляцию. Именно про автоматическое обеспечение изоляции речь и идет. В случае БЭМ вы это делаете руками.

                                                                                                      0
                                                                                                      В случае БЭМ — они выше на порядок.

                                                                                                      Если фреймворк по настоящему умеет в БЭМ, то наоборот ниже на порядок, так как не надо прокидывать классы — они генерятся автоматически исходя из дерева компонент и их семантики. При этом не усложняя кастомизацию и понимание отрендеренного дома, в отличие от различных форм изоляции.

                                                                                                        0
                                                                                                        Если фреймворк по настоящему умеет в БЭМ, то наоборот ниже на порядок

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

                                                                                                          0
                                                                                                          Ангуляр не делает БЭМ, он делает изоляцию. А потом программист с этой изоляцией героически борется. Ненужно, выходит.
                                                                                                            0
                                                                                                            Ангуляр не делает БЭМ, он делает изоляцию.

                                                                                                            Семантически, он делает ровно то же самое, что и бэм.


                                                                                                            А потом программист с этой изоляцией героически борется.

                                                                                                            Зачем?

                                                                                                              –1
                                                                                                              Семантически, он делает ровно то же самое, что и бэм.

                                                                                                              БЭМ даёт каждой сущности уникальное имя, по которому понятно что она из себя представляет и кому принадлежит.


                                                                                                              Изоляция позволяет разным сущностям давать одинаковые имена, если они объявляются в разных местах, а потом без конца путаться между этими именами.


                                                                                                              Где вы тут увидели "ровно то же самое"? Особенно семантически.


                                                                                                              Зачем?

                                                                                                              Кастомизация компонента под контекст использования, например.

                                                                                                                0
                                                                                                                БЭМ даёт каждой сущности уникальное имя, по которому понятно что она из себя представляет и кому принадлежит.

                                                                                                                И изоляция так же реализована.


                                                                                                                Где вы тут увидели "ровно то же самое"? Особенно семантически.

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


                                                                                                                Кастомизация компонента под контекст использования

                                                                                                                Эту возможность должен предоставлять сам компонент.

                                                                                                                  0
                                                                                                                  И изоляция так же реализована.

                                                                                                                  Ага, только эти нагенеренные имена понятны исключительно машине, но не человеку. И дают контекст лишь первого уровня. Примеры разных уровней на человеческом языке / в машиночитаемом бэм-виде (pin — сторонняя библиотека, ya_mail — конечное приложение) / "изолированном" виде :


                                                                                                                  1. Кнопка / pin_button / wsri_button
                                                                                                                  2. Кнопка очистки инпута / pin_input_clear / wqrl_clear
                                                                                                                  3. Кнопка очистки поискового поля / pin_search_clear / wqrl_clear где-то внутри wprl_search
                                                                                                                  4. Кнопка очистки поиска по списку пользователей / ya_mail_users_filter_clear / wqrl_clear где-то внутри wprl_search где-то внутри vprl_users
                                                                                                                  5. Кнопка очистки поиска по списку пользователей в выпадающем меню выбора адресата / ya_mail_recepient_popup_filter_clear / wqrl_clear где-то внутри wprl_search где-то внутри vprl_users где-то внутри vqri_recepient

                                                                                                                  Эту возможность должен предоставлять сам компонент.

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

                                                                                                                    0
                                                                                                                    Ага, только эти нагенеренные имена понятны исключительно машине, но не человеку.

                                                                                                                    А зачем их человеку понимать? В том-то и дело, что при наличии изоляции вам вообще не нужно смотреть на эти имена. Они не несут никакой информации, которую вы могли бы использовать. И не важно, нагенерены они рандомно или не рандомно.
                                                                                                                    Именно в этом смысл изоляции.
                                                                                                                    Было бы удобно, чтобы инспектор вообще их не выводил, и в этом плане как раз нагенеренные имена удобнее, т.к. сразу понятно что их надо игнорировать и они никакой информации не несут и ни на что не влияют. С другой стороны, если вы видите какое-то осознанное именование — в этом уже нельзя быть уверенным, что усложняет разбор стилей. То есть с рандомными идентификаторами стили смотреть проще.

                                                                                                                      0
                                                                                                                      Чтобы понимать что где откуда зачем и почему в незнакомом вам приложении. Вы предпочитаете не замечать проблему — ваше право.
                                                                                                                        0
                                                                                                                        Чтобы понимать что где откуда зачем и почему в незнакомом вам приложении.

                                                                                                                        Именно так, даже в незнакомом. Изоляция гарантирует что у вас сразу есть вся необходимая информация для понимания. Вам не надо чего-то искать, разбирать имя класса и т.п. вещи.

                                                                                                                          0



                                                                                                                          Какой компонент править, чтобы добавить стили в h1 а для каунетра уровнем выше?
                                                                                                                          Сколько вы потратили времени на выяснение?
                                                                                                                          Как думаете, как это время зависит от размера и сложности приложения (константно/логарифмически/линейно/экспоненциально)?

                                                                                                                            +1
                                                                                                                            Какой компонент править, чтобы добавить стили в h1 а для каунетра уровнем выше?

                                                                                                                            Не совсем понял вопрос, стили можно добавить большим количеством способов, мы вароде говорили о том, чтобы определить каким именно добавлен, но для этого надо видеть селектор, очевидно. Дефолтно, если надо стиль для h1 — это элемент внутри counter, если для counter — это либо my-appz, если селектор на ngcontent, либо :host в самом counter, если селектор на nghost.


                                                                                                                            Сколько вы потратили времени на выяснение?

                                                                                                                            Секунд 5.


                                                                                                                            Как думаете, как это время зависит от размера и сложности приложения (константно/логарифмически/линейно/экспоненциально)?

                                                                                                                            Практически — константа, т.к. от сложности и размера приложения тут мало что вообще зависит, зависит от определенных особенной структуры дома. С-но, вы вполне намеренно вместо типичного кейза сделали более сложный. По сути, сложнее чем в вашем примере, ситуации быть не может (теоретически — можно построить, конечно, но в реальности очень сомнительно, что такой код будет встречаться чаще, чем на уровне стат. погрешности), т.к. counter прокидывается через 2 проекции.

                                                                                                                              –1

                                                                                                                              Ну вот если вы попробуете написать переиспользуемый код, то куча проекций у вас будут идти вперемешку и владелец элемента будет находиться где-то вверху по дому, и его придётся выискивать глазами по чудесным именам атрибутов. И если ангуляр достаточно дубовый, в нём переиспользуемые компоненты наворотить сложно, то в реакте подобная динамика очень даже распространена.


                                                                                                                              Мне же будет достаточно пройтись по атрибутам самого элемента и всё.


                                                                                                                                +1
                                                                                                                                Ну вот если вы попробуете написать переиспользуемый код, то куча проекций у вас будут идти вперемешку

                                                                                                                                Нет, не будет, я же стараюсь писать хороший код. Но даже если будет:


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

                                                                                                                                ctrl+f в инспекторе и поиск первого вхождения атрибута.


                                                                                                                                Мне же будет достаточно пройтись по атрибутам самого элемента и всё.

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

                                                                                                    0

                                                                                                    Если технология не приспособлена для автоматизации, то с ней сразу надо прощаться. БЭМ такая потому что CSS такой. Правила тоже можно описать. Как бы я плохо не относился к БЭМ её всё таки можно формализовать.

                                                                                                      0
                                                                                                      Но это не требует каких-то дополнительных усилий, вот в чем суть.

                                                                                                      Обратная сторона такого подхода в том, что может появиться 100500 стилевых файлов разных компонентов с одинаковыми классами .foo, .bar, .baz, различающимися только хешем. Опять же, внутри отдельного стилевого файла могут появиться ненужные каскады. В итоге усилия придётся прикладывать не на этапе написания, а на этапе разгребания этого bloatware.

                                                                                                        0
                                                                                                        Обратная сторона такого подхода в том, что может появиться 100500 стилевых файлов разных компонентов с одинаковыми классами .foo, .bar, .baz, различающимися только хешем.

                                                                                                        Ну так и ладно, чем это может помешать? Я же эти стили все равно не увижу.


                                                                                                        а на этапе разгребания этого bloatware.

                                                                                                        На каком таком этапе? Вы же работаете с исходниками, а сгенеренных стилей не видите.

                                                                                                          0

                                                                                                          А если нужно пофиксить какой-нибудь стиль? Открываем инспектор, а там .foo--q1w2, .foo--a3s4, .foo--z5x6. Дальше приходится искать конкретный стиль методом тыка. Опять же, не видно границ компонентов.

                                                                                                            0
                                                                                                            А если нужно пофиксить какой-нибудь стиль? Открываем инспектор, а там .foo--q1w2, .foo--a3s4, .foo--z5x6. Дальше приходится искать конкретный стиль методом тыка.

                                                                                                            Не понял. Если вы смотрите в исходники — там нет никаких .foo--q1w2, .foo--a3s4, .foo--z5x6, если вы открыли инспектор — то нужный стиль уже перед вами, ничего искать не надо.

                                                                                                              0
                                                                                                              если вы открыли инспектор — то нужный стиль уже перед вами, ничего искать не надо

                                                                                                              Надо: правку придётся делать в исходнике.

                                                                                                                0
                                                                                                                Можно научить Devtools сохранять изменения в исходники: developers.google.com/web/tools/chrome-devtools/workspaces

                                                                                                                Сам так не делаю (привык к редактору), но кому-то может быть и зайдёт.
                                                                                                                  0

                                                                                                                  Не думаю, что это сработает с SCSS и CSS Modules.

                                                                                                                    0
                                                                                                                    Я думаю, это сработает с чем угодно при условии наличия корректных sourcemap
                                                                                                                  0

                                                                                                                  Ну вы же всегда знаете, где она, т.к. видите нужный элемент.

                                                                                                                    0

                                                                                                                    Так я не знаю, какой это конкретно элемент. Название класса на нём неоднозначное.

                                                                                                                      +1
                                                                                                                      Название класса на нём неоднозначное.

                                                                                                                      А зачем вам название класса? Просто игнорируйте это название. При изоляции любой стиль применяется к одному единственному компоненту, то есть к тому, который вы сейчас смотрите в инспекторе. Стили других компонентов к нему применяться не могут. Это и есть смысл изоляции — ситуация, при которой есть какие-то неоднозначности с тем, как и к чему применяется стиль, становится в принципе невозможной. То есть если у вас есть button_3232 и button_5454, то не может быть элемента на котором будет сразу оба этих стиля и не может быть двух разных компонентов, в каждом из которых применяется один и тот же стиль.
                                                                                                                      Вы всегда сразу знаете что, как и куда — даже не глядя на селекторы стиля.
                                                                                                                      Здесь, видимо, проблема в ментальной модели — вы пытаетесь анализировать получившийся css как обычный css, что неверно. изоляция дает гарантии, при учете которых анализ существенно упрощается.

                                                                                                                        0

                                                                                                                        Получается, единственный выход — правильно настраивать source maps, чтобы редактировать стили исключительно из браузера? А если баг замечен на продакшене, и мне, как программисту, нужно детектировать, в каком компоненте это произошло?

                                                                                                                          0
                                                                                                                          Получается, единственный выход — правильно настраивать source maps

                                                                                                                          Зачем? Еще раз — вы сразу знаете, к чему относится стиль, т.к. он не может относиться к чему либо кроме как к компоненту, который вы выбрали.
                                                                                                                          Вам не нужны ни сорус мапы, ни названия, ни какая-либо еще фигня.


                                                                                                                          нужно детектировать, в каком компоненте это произошло?

                                                                                                                          В каком компоненте произошла ошибка вам как раз известно сразу — вы же видите где верстка поехала. А вот в каком стиле ошибка — вы не знаете. Вы тыкаете в элементы компонента и смотрите, в каком из стилей что-то сломано.

                                                                                                                            0
                                                                                                                            В каком компоненте произошла ошибка вам как раз известно сразу — вы же видите где верстка поехала.

                                                                                                                            Нет. В проекте может быть много похожих компонентов. Часть из них может разделять одни и те же стили, часть нет.

                                                                                                                              0
                                                                                                                              Нет. В проекте может быть много похожих компонентов

                                                                                                                              Ну как нет? Вы знаете место в котором верстка поехала, т.к. вы его по факту видите. Ну, страницу открыли и видите, что на ней что-то не так. С-но, нужный вам компонент — это тот, что отображает данное место. Он вам сходу известен.


                                                                                                                              Часть из них может разделять одни и те же стили, часть нет.

                                                                                                                              Изолированные стили не разделяются в принципе, так что не может. Иначе они не изолированные. В этом-то и суть. Если у вас стиль button_3434 то он используется только в одном единственном компоненте, при этом никаких других button_n в этом компоненте быть не может.
                                                                                                                              Как я и сказал, у вас неверная модель, вы смотрите на получившийся цсс как на обычный цсс. А он не обычный, он обладает некоторыми дополнительными свойствами.

                                                                                                                                0
                                                                                                                                Изолированные стили не разделяются в принципе, так что не может.

                                                                                                                                В некоторых реализациях можно разделять, например, в CSS Modules. При этом они остаются изолированными на уровне стилевого модуля, т.е. css-файла.


                                                                                                                                Тем не менее, если все стили изначально считать неразделяемыми, то вероятность их дублирования копипастом ещё более возрастает. В результате у нас могут возникнуть button_3434, button_4343, button_3443, button_4334. И реализации их могут быть очень похожими, но в чём-то отличаться. Искать же, какую именно тут использовали кнопку, — то ещё удовольствие.

                                                                                                                                  0
                                                                                                                                  В некоторых реализациях можно разделять, например, в CSS Modules. При этом они остаются изолированными на уровне стилевого модуля, т.е. css-файла.

                                                                                                                                  А это ничего не меняет. Вы знаете, для какого компонента стиль, и далее вы из этого компонента однозначно попадаете в соответствующий css-модуль. Наоборот, тут даже плюс — т.к. вы легко можете посмотреть, какие компоненты еще используют этот модуль и, с-но, где что может (или не может) сломаться, если вы данный стиль поменяете.


                                                                                                                                  В результате у нас могут возникнуть button_3434, button_4343, button_3443, button_4334.

                                                                                                                                  Ну и пусть возникают.


                                                                                                                                  Искать же, какую именно тут использовали кнопку, — то ещё удовольствие.

                                                                                                                                  В каком смысле, что искать? Вы же видите эту кнопку перед собой. Вот у вас кнопка, стиль которой надо оправить, жмакнули по ней и в инспекторе увидели, что это button_foo. Надо поправить стиль соседней кнопки — жмакнули по ней, и увидели, что это button_bar. Что вы ищете вообще? Опишите как-то flow работы для конкретного кейза, где у вас проблемы. Потому что я даже теоретически не могу представить, на каком этапе они могут возникнуть. Что вы конкретно делаете, что у вас возникает неопределенность, где какой стиль?

                                                                                                                                  0
                                                                                                                                  > Вы знаете место в котором верстка поехала, т.к. вы его по факту видите. Ну, страницу открыли и видите, что на ней что-то не так. С-но, нужный вам компонент — это тот, что отображает данное место. Он вам сходу известен.

                                                                                                                                  Не факт. Какой-то div без классов и айдишника не несёт информации какому компоненту он принадлежит. Но вот назначили баг что кнопка какая-то полезла в проекте который только что команда приняла от заказчика, потому что старую команду он разогнал из-за того что документацию не писали :)
                                                                                                                                    +1
                                                                                                                                    Не факт. Какой-то div без классов и айдишника не несёт информации какому компоненту он принадлежит.

                                                                                                                                    А почему у вас div без класса и идшника вместо тега с именем компонента?

                                                                                                                                      0
                                                                                                                                      Потому что инспектор ничего не знает про реакты и ангуляры.
                                                                                                                                        0
                                                                                                                                        Потому что инспектор ничего не знает про реакты и ангуляры.

                                                                                                                                        Он то конечно не знает, но это уже проблема вашего фреймворка в том, что он хост-элементы затер. К цсс и изоляции это отношения уже не имеет.

                                                                                                                                          0
                                                                                                                                          Имеет. Если фреймворк теряет имеющуюся в коде семантику для изоляции, то эта изоляция не бесплатна для DX
                                                                                                                                            0
                                                                                                                                            Имеет.

                                                                                                                                            Каким образом-то? Еще раз — это проблема того, как фреймворк хост-элементы генерит. При чем тут цсс?

                                                                                                                                              0
                                                                                                                                              причём тут генерит? я на корневой элемент компонента класс повесил, а он превратился во что-то непонятное
                                                                                                                                                –1

                                                                                                                                                Класс ни во что непонятное не превращается, он каким был, таким и остается, его не трогает никто.

                                                                                                                                        0
                                                                                                                                        А почему у вас div без класса и идшника вместо тега с именем компонента?

                                                                                                                                        А зачем мне айдишник на каждом элементе? Фреймворки как-то без этого справляются. Класса тоже может не быть, если на этот элемент я не собирался вешать свои стили, а это просто обёртка. Кроме того, по классу всё равно нельзя однозначно определить компонент.

                                                                                                                                          +1
                                                                                                                                          А зачем мне айдишник на каждом элементе?

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

                                                                                                                              0
                                                                                                                              У вас все компоненты состоят ровно из одного элемента? Ну-ну.
                                                                                                                                +1
                                                                                                                                У вас все компоненты состоят ровно из одного элемента?

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

                                                                                                                                  0
                                                                                                                                  Так что если вы видите конкретный элемент, то вы точно знаете, какому компоненту он принадлежит.

                                                                                                                                  Почему вы решили, что я это знаю? В проекте могут быть сотни компонентов. Притом, как я уже сказал, похожих. Какой-нибудь разработчик будет делать некоторый компонент "такой же как вон там, но немножко другой", скопипастит его код и стили, немного видоизменит — и готово. Изоляция стилей это позволяет, притом позволяет и не заморачиваться с именами классов. А у компонента может быть десяток состояний. Я их должен заранее все знать, чтобы гарантированно определить компонент? Или вы предлагаете полезть в исходники и начать смотреть компоненты от уровня страницы вниз?

                                                                                                                                    0
                                                                                                                                    Почему вы решили, что я это знаю?

                                                                                                                                    Его название написано. Если читать умеете — то знаете, верно?


                                                                                                                                    Притом, как я уже сказал, похожих.

                                                                                                                                    Да не важно, похожих или нет, имя компонента перед вами, конец истории.

                                                                                                                                      0
                                                                                                                                      имя компонента перед вами

                                                                                                                                      Покажите, где.

                                                                                                                                        +1

                                                                                                                                        Ну вон выше vintage скриншот кинул, wrappez, my-appz, counter — имена компонетов. В типичном случае вам надо просто по вложенности компонентов пройти вверх до первого "кастомного" компонента (что обычно эквивалентно "посмотреть на несколько строк вверх"), он и будет тот, что нужен. В более сложном (с проекциями) надо пройти выше, до компонента с номером меньшим, чем в ng-content элемента.

                                                                                                        +1
                                                                                                        А я бы назвал костылем приписывание километрового хэша к имени класса или атрибуту, которым фреймворки и реализуют изоляцию. Костыль работает, но это костыль.
                                                                              0
                                                                              Да и 20 лет опыта разработки в вебе? Где же столько взять.

                                                                              А что, в 1998 году интернета не было?

                                                                                +6
                                                                                В 1998 году не было WebGL, HTML5, CSS3 и прочих. Ну и подход к формированию страниц тоже другой был.
                                                                                  +23
                                                                                  В 1998 году не было WebGL, HTML5, CSS3 и прочих.

                                                                                  Зато украшать сайты с помощью &ltmarquee&gt было не западло. А сейчас никакого удовольствия от дизайна :(
                                                                                    +5
                                                                                    Верстайте письма для email рассылок! Это же прямо как окунуться лет на 20 назад. Табличная верстка, нарезка картинок, указание всех стилей в каждом теге, и вечная оптимизация под разные клиенты… Вот это я понимаю — романтика!
                                                                                      0
                                                                                      ностольжа))
                                                                                        0
                                                                                        А еще фреймы, куда же без них!
                                                                                        И ничуть не хуже совремЁнного дивнючество работало — на тогдашнем железе и диалапах… )))
                                                                                      0

                                                                                      Можно подумать, это мешало получать опыт разработки.

                                                                                        0

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

                                                                                          +2
                                                                                          И что, что не было? А web был. Html был, js был и css был.
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                              0
                                                                                              HTML5, CSS3 и сейчас нет.
                                                                                              Воспринимается как фильм ужасов, когда у тебя для 90% аудитории код доставляется в стандарте ES2017 (ES8).
                                                                                                0
                                                                                                Кто из браузеров реализовал ES5 полностью хотя бы в последних версиях? Кажется даже бабель не может c ES5 до конца разрулиться.
                                                                                                  +1
                                                                                                  Интереса ради, что не реализовано в хроме или ff, например?
                                                                                                    0
                                                                                                    Оптимизация хвостовой рекурсии.
                                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                          –6
                                                                                          Я не про то, что важен опыт в 20 лет, а про то, что автору необходимо обозначить свой бэкграунд.
                                                                                            +21
                                                                                            … выход книги «Сто авторов против Эйнштейна». Под этим названием были собраны мнения ста ученых, которые опровергали и ругали и теории, и самого Эйнштейна. Говорят, что когда он узнал об этой книге, он спросил: «Почему сто? Если бы я ошибался, хватило бы и одного»
                                                                                              +1
                                                                                              Сперва добейся?
                                                                                                +1
                                                                                                «А я книжку прочла!»?
                                                                                                Я же не запрещаю автору что-то критиковать, а просто обозначить на основании какого опыта он это делает. И не для того чтобы топать ногами и негодовать «молодо-зелено», а чтобы адекватно интерпретировать поданный материал. И еще раз — это относится только к критике технологий, методологий, языков и пр.
                                                                                                  +4
                                                                                                  А статью прочитать силенок не хватает что ли? В статье — конкретные аргументы против. Есть, что возразить, — вперед; есть, что добавить, — ждем с нетерпением дополнений и возражений, а не бесполезных ad hominem.
                                                                                                    +2
                                                                                                    В рамках данной статьи, приведенные «конкретные аргументы против» рассматриваются только в контексте создания кода с нуля. Остается непонятным, как предложения из статьи повлияют на процесс модификации проекта под изменяющиеся требования, на удобство реюза блоков из старого проекта в новом, на время, требуемое одному разработчику на поддержку кода, написанного другим разработчиком. Именно в этом контексте хотелось бы узнать, какой у автора бэкграунд, чтобы хотя бы косвенно оценить, с какими проблемами он уже мог сталкиваться в процессе разработки, а с какими скорее всего еще не сталкивался.
                                                                                                +4

                                                                                                А вы верите авторам статей только на основании бекграунда (i.e. авторитет) или всё-таки на основании доказательств в самой статье?

                                                                                                +2
                                                                                                А вот свежий взгляд тут и говорит о проблемах

                                                                                                «свежий взгляд» в вебе это на самом деле новая инкарнация «фатального недостатка» — проблемы одной технологии лечатся созданием новой, со своими проблемами.
                                                                                                  0

                                                                                                  Да, 20 лет в вебе. Такое бывает. Как и обречённость: «Щас школьники сайты клепают. Что я до сих пор в веб-разработке делаю?»

                                                                                                    +2
                                                                                                    Собственно когда они их не клепали? )
                                                                                                      +1
                                                                                                      Я в 98 году клепал, у меня midi музыка была на страницы была и фреймы (не iframe`ы) :)
                                                                                                    +1

                                                                                                    Препроцессоры, цссмодули наоборот поощрают бем. Ведь бэм включает в себя правила касающиеся вёрстки, а не только правила именования. Например взять хотя-бы правило по которому блоки не должны влиять на своё позиционирование — это очень многого стоит, и помогает избежать хаоса в крупных проектах через годик.
                                                                                                    Или например модификаторы — это тоже лютый мастхев, и позволяет производить избавление от говнокода.


                                                                                                    Когда верстаешь один то конечно ты можешь это делать как хочешь, а когда вас 10 разработчиков и ты там главный то тебе нужно чтобы каждый разработчик верстал правильно и не допускал говнокода. Правила бэма позволяют это сделать.
                                                                                                    Бэм это когда 9 женщин за 1 месяц раждают здорового

                                                                                                      0
                                                                                                      Да и 20 лет опыта разработки в вебе? Где же столько взять

                                                                                                      Об том, что можно быть фрилансером, я узнал от одного веб-мастера.

                                                                                                      Где-то в конце 20-го века он уже вовсю работал из России на иностранных заказчиков.
                                                                                                      Делал им сайты.
                                                                                                      –4
                                                                                                      Не поможет. Даже, имея 20-ти летний опыт разработки… Если этот опыт основывался на шаблонах, придуманных кем то не очень вменяемым — то все 20 лет псу под хвост.
                                                                                                      Есть спецификация, есть описание обработки кода в барузерах — всё, этих текстов должно быть достаточно.

                                                                                                      Автор статьи правильно негодует по поводу БЭМ-а, этот маразм вообще не должен был появиться, но сам даже близко не подошел к использованию спецификации «как надо».
                                                                                                      В первом же примере, он для наглядонсти, сокращает код:
                                                                                                      <ul class="article-rewind type-static lang-ru">
                                                                                                          <li class="next">
                                                                                                              <div class="text">Читать далее</div>
                                                                                                              <a class="link" href="">Основные понятия</a>
                                                                                                         </li>
                                                                                                      </ul>
                                                                                                      


                                                                                                      Но, что ему мешает сделать так: (ведь перед ul уже есть какой то старший тег, допустим div id=«i_1_», этот ul не в воздухе первым на странице повис)

                                                                                                      <ul>
                                                                                                          <li>
                                                                                                              <div>Читать далее</div>
                                                                                                              <a href="">Основные понятия</a>
                                                                                                         </li>
                                                                                                      </ul>
                                                                                                      /*в css */
                                                                                                      #i_1_ ul {}
                                                                                                      #i_1_ ul>li {}
                                                                                                      #i_1_ ul>li>div {}
                                                                                                      #i_1_ ul>li>a {}
                                                                                                      /*при необходимости*/ 
                                                                                                      #i_1_ ul>li:nth-child(n) {}
                                                                                                      #i_1_ ul>li:nth-child(n):first-line {}


                                                                                                      Зачем тащить в html код кучу бесполезного, нагружающего парсер самого браузера (и особенно парсеры ПС) бредотекста с классами, лишними тегами и прочей чепухой?

                                                                                                      Повторюсь — есть спецификация, она работает, зачем выдумывать какие то НАД-спецификации и кучу мусорного текста. Если кто-то будет спорить, что классы нужны для наглядности кода в больших проектах — то, как раз, автор тут вам всё и показал, что, наоборот, куча бредотекста не добавляет читабельности коду, а лишь ухудшает её.
                                                                                                        +11

                                                                                                        Есть несколько вопросов:
                                                                                                        Над какими проектами с каким количеством людей вы работали?
                                                                                                        Использовался ли в этих проектах предложенный вами подход(#i1 ul>li>div {}) ?
                                                                                                        Встретились ли вам какие-нибудь минусы ?

                                                                                                          +1
                                                                                                          Частично согласен с вашими словами. Иногда сам тип вложенного тега говорит за себя и к нему можно не приписывать class/id. Наверное наиболее частый тег без класса у меня это img. Оно и понятно :)
                                                                                                          Но большая вложенность из безымянных тегов тоже не очень удобна. В этом случае удобнее присвоить класс нужным тегам и обратиться к ним напрямую.
                                                                                                            0

                                                                                                            Это порядка не добавляет в проекте

                                                                                                            0

                                                                                                            А длинный вложенный каскад не нагружает парсер браузера?


                                                                                                            #i_1_ ul>li>div {}

                                                                                                            Ему придётся найти все элементы div, у которых родитель li, у которого родитель ul, у которого один из предков #i_1_.

                                                                                                              +2
                                                                                                              Парсер не нагружает, парсер работает один раз и все подобные вещи индексирует. А вот увлекательные сайдэффекты связанные с неожиданным весом селекторов, жесткой привязкой порядка вложения тегов друг в друга и невалидной версткой (в li нельзя блочные элементы) — наличествуют.
                                                                                                              0
                                                                                                              По вашему выходит лучше жестко завязаться на структуру html в css через такие специфичные селекторы и потом при каком либо изменении верстки править все сразу.
                                                                                                                0
                                                                                                                В моей практике верстка диктуется стилями. Так что пока стили менять не понадобилось — структура html не изменится.

                                                                                                                И обосновывается это просто. Что серверу, что клиентскому фреймворку одинаково просто сформировать html любой структуры. А вот дизайн не на любую структуру «налезает» одинаково хорошо. Поэтому всем проще структуру html подогнать под запросы css.
                                                                                                                  +1

                                                                                                                  Мне кажется наоборот все. Создаем разметку и потом лепим ней стили. При добавлении элемента разметки выстраиваем стили по новой(обновляем). Разве не так?

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

                                                                                                                И с языком аналогично


                                                                                                                <html lang="ru">
                                                                                                                ...
                                                                                                                <ul>
                                                                                                                  –2
                                                                                                                  БЭМ ничуть не противоречит спецификации, не нарушает правил, не вводит новый синтаксис, не требует изменений в движках браузеров. Только то использует, что браузеры обеспечивают из коробки.
                                                                                                                    +1
                                                                                                                    Слушайте, но на развернутое утверждение в статье нельзя просто взять и ответить «нет, не нарушает», без всяких аргументов. Это ж бесполезно. Одобрят только те, кто с вами изначально согласен.
                                                                                                                    Попробовали бы разработчики использовать то, что браузеры не поддерживают, конечно. Но собственно спецификация html задает тегам семантику. h1 — это тег заголовка. Бэмчики кладут на спецификацию и создают свой значит класс «desktop-header__title», для них он имеет значение, а сам тег html (h1) -нет. Не удивительно, что зачастую везде используется только div. Даже функционал ссылок симулируется с помощью div и javascript, ну что это такое? Работает? Работать может и не такое, но вы не видите здесь нарушения спецификации? И как же это не называть новым синтаксисом? Не оценивать с позиции читабельности со старым синтаксисом? До требования изменений в движках браузеров докатиться — эт надо очень сильно упороться, но наделать бэм тож надо умудриться.
                                                                                                                      +2
                                                                                                                      Но собственно спецификация html задает тегам семантику. h1 — это тег заголовка. Бэмчики кладут на спецификацию и создают свой значит класс «desktop-header__title», для них он имеет значение, а сам тег html (h1) -нет.
                                                                                                                      Семантика и стилизация это почти ортогональные вещи.
                                                                                                                      Даже функционал ссылок симулируется с помощью div и javascript, ну что это такое?
                                                                                                                      Тут вообще ловкая подмена понятий. Эмуляция ссылок через div+js — это одна из самых плохих практик, она всячески порицается, и к БЭМ-у имеет отношение… правильно, никакое.
                                                                                                                        +1
                                                                                                                        А заворачивать дивы в ссылки — хорошая практика? К сожалению, эмуляция ссылок через js там, где это вообще непонятно зачем имеет отношение к Яндексу, Вадим Макеев их на этом ловил, причем несколько раз. Это во-первых. Тот же Макеев ругал Яндекс за увлечение дивами и игнорирование многообразия тегов. Я вот перед тем, как предыдущий пост писать, сам сбегал на Яндекс Дзен. Элементов не много, но тега h1 нет в помине. Вы скажете, это не имеет отношение к БЭМу и тому, что они ориентируются практически только на классы, по минимуму используя правила типа ul>li? Теоретически, оно может и ортогонально, но вот на практике видите как выходит. Семантика летит на три буквы.
                                                                                                                          0

                                                                                                                          Вероятно, поисковая оптимизация Яндексу не интересна.


                                                                                                                          А вот в Альфе позаботились: https://github.com/alfa-laboratory/arui-feather/blob/master/src/heading/heading.jsx

                                                                                                                            0
                                                                                                                            В любом случаи, seo это другая тема.
                                                                                                                            Оно никак не влияет на обсуждаемые вопросы
                                                                                                                            БЭМ ничуть не противоречит спецификации, не нарушает правил, не вводит новый синтаксис

                                                                                                                            Я выше писал, что противоречит, нарушает, вводит.
                                                                                                                            И уж тем более необходимость считаться с seo никак не влияет на мое предложение аргументировать свои мысли, а не бросаться безапелляционными утверждениями. А то сами с собой поговорили, сами с собой согласились, поцокали над другими неумными, у них там каша в голове.
                                                                                                                            С утверждением что css и html в принципе разные формы я согласен конечно. Ну, вот я когда-то юзал всякие fieldset, legend, label, чтобы мои формы были семантичными и чтоб в них не было противных дивов. Уверен, БЭМщик этим заниматься не будет. Вы скажете, ну, БЭМ не запрещает, он вообще параллельно. Хорошо. Предложите свою объяснение, почему люди, использующие БЭМ переходят на сплошные дивы, только не игнорируйте общую практику. Она ж это самое, критерий истины. Я например в бэмовской верстке такое очень часто замечал. Методология БЭМа имхо к тому подталкивает. Не согласны — предложите другое объяснение моему наблюдению. Что, сам Яндекс плохой пример? Так они же эту методологию и разрабатывают. Где-то есть флагман, в котором все по-другому?