Вообще статья явный наброс на вентилятор, но отвечу на некоторые замечания на правах соавтора БЭМ (вместе с veged).
Если сверстать страничку таблицами, как это было во времена IE6, то улучшения от перехода на БЭМ с такой верстки определенно будут.
«Плохая аналогия как банан в лифте». Вёрстка таблицами и использование правил именования БЭМ в HTML/CSS — ортогональны друг другу и ни как не пересекаются.
Есть хорошие готовые практики, которые давно решают все задачи сопровождаемости.
Приведите их, мне правда очень интересно узнать практики которые прям «давно» и «решают».
Если бы БЭМ был так прекрасен, как описывают авторы, не было бы срача.
Если у чего-то нет хэйтеров — это что-то абсолютно никому не нужно.
БЭМ — это жесткий и очень топорный свод правил, который не несет никакой практической пользы
Практическая польза от правил в БЭМ примерно такая же, как от полиморфизма, инкапсуляции и наследования в ООП. Правила задают систему, система позволяет быстрее разбираться в чужом и своём коде.
Не создают они (каскады) проблем при сложной верстке.
Рекомендую почитать историю создания БЭМ (https://ru.bem.info/method/history/). Если вам каскад в вёрстке не создаёт проблем и не хочется ограничивать область видимости и область применимости селектора — я вам очень завидую, у вас впереди ещё много открытий чудных.
Единственное, мне больше нравится «западная» модификация БЭМа, где модификаторы имеют сокращенный синтаксис.
В «официальном» БЭМ тоже есть сокращённый синтаксис модификаторов:
А разделители между блоком, элементом и модификатором могут быть любые. Например, .block%element&modifier — соответствует БЭМ нотации.
У меня от БЭМ сильное чувство, что ребята как-то недопоняли CSS, не осилели LESS и в итоге налепили велосипедов.
Спецификации HTML4 и CSS2.1 были мной прочитаны раза 4 за всё время работы от начала и до конца. Думаю, что это сильно больше, чем их прочитало 99% веб-разработчиков.
Советую почитать описание методологии, мы его недавно переписали, на наш взгляд стало понятнее:
https://ru.bem.info/method/definitions/
Если есть вопросы — приходите на форум, обсудим/ответим/поможем:
https://ru.bem.info/forum/
Такая утилита для преобразования css была написана в Яндексе в 2010:
https://github.com/gfranco/jeanny/
Мы использовали её на странице результатов поиска:
https://blog.yandex.ru/post/23106/
Потом отказались, поскольку в JS классы иногда зашиваются в строки и склеиваются, все случаи обработать невозможно и вёрстка иногда ломается после минимизации.
Но если у вас статика без CSS-классов в JS — можно использовать, минификация будет работать.
Плюс зависимости и то, что попадает в финальный рантайм можно настраивать гибко, контролируя размер файлов проекта. А не подключать себе весь CSS и весь JS компонент.
Ну и наш подход в том, чтобы предложить решение для частых задач, возникающих при разработке фронтенда: генерация HTML (как на сервере, так и на клиенте), оптимизация финального рантайма, способ писать компоненты на всех возможных технологиях, хелперы для написания js, инфраструктура для сборки документации и запуска тестов. А не тупой копипаст HTML к себе в проект и попаболь при обновлении библиотеки. Понимаете разницу в подходе?
Не могу не отметить, что borschik был написан не только когда ещё gulp и grant даже в проекте не было, но и когда ещё вообще фронтендеры и не думали, что им надо что-то собирать. Ну и нет там ничего такого сложного, чтобы с ним надо было как-то долго специально разбираться. Узкая тулза для конкретных случаев.
Стили написанные для .menu .item будут применяться и к .list .item. Это side effect. В случае применения БЭМ-нотации этого можно избежать, стили компонент не пересекаются.
Мне использование БЭМ позволяет всё разложить по компонентам и иметь реализацию каждого компонента в одном месте:
https://github.com/vithar/bem.info/tree/master/common.blocks
Ну и что тут трудночитаемого?
https://github.com/vithar/bem.info/blob/master/common.blocks/nav/nav.css
.article-author__site { font-style: italic; }
Про link_size_small:
То, как именованы конкретные переменные — не проблема методологии, а проблема конкретного именующего.
«Плохая аналогия как банан в лифте». Вёрстка таблицами и использование правил именования БЭМ в HTML/CSS — ортогональны друг другу и ни как не пересекаются.
Приведите их, мне правда очень интересно узнать практики которые прям «давно» и «решают».
Если у чего-то нет хэйтеров — это что-то абсолютно никому не нужно.
Практическая польза от правил в БЭМ примерно такая же, как от полиморфизма, инкапсуляции и наследования в ООП. Правила задают систему, система позволяет быстрее разбираться в чужом и своём коде.
Рекомендую почитать историю создания БЭМ (https://ru.bem.info/method/history/). Если вам каскад в вёрстке не создаёт проблем и не хочется ограничивать область видимости и область применимости селектора — я вам очень завидую, у вас впереди ещё много открытий чудных.
В «официальном» БЭМ тоже есть сокращённый синтаксис модификаторов:
https://ru.bem.info/method/naming-convention/#%D0%98%D0%BC%D1%8F-%D0%BC%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D0%B0
А разделители между блоком, элементом и модификатором могут быть любые. Например, .block%element&modifier — соответствует БЭМ нотации.
Спецификации HTML4 и CSS2.1 были мной прочитаны раза 4 за всё время работы от начала и до конца. Думаю, что это сильно больше, чем их прочитало 99% веб-разработчиков.
Советую почитать описание методологии, мы его недавно переписали, на наш взгляд стало понятнее:
https://ru.bem.info/method/definitions/
Если есть вопросы — приходите на форум, обсудим/ответим/поможем:
https://ru.bem.info/forum/
https://github.com/gfranco/jeanny/
Мы использовали её на странице результатов поиска:
https://blog.yandex.ru/post/23106/
Потом отказались, поскольку в JS классы иногда зашиваются в строки и склеиваются, все случаи обработать невозможно и вёрстка иногда ломается после минимизации.
Но если у вас статика без CSS-классов в JS — можно использовать, минификация будет работать.
ru.bem.info/blog/bem-as-bootstrap
ru.bem.info/libs/bem-components
.menu .menu .item .list .list .item.menu .menu__item .list .list__itemЭто разные item разных блоков. Если писать стили просто на .item — будет коллизия.
По поводу «Все хорошие верстальщики верстают так, без всяких соглашений, статей и прочего». В 2005 это было не так.
Сейчас каждый школьник знает, что Земля круглая, а когда-то это знание стоило жизни.