Мой коллега активно продвигает метод BEM (Block Element Modifier) для CSS в проекте, который он разрабатывает, и я просто не могу понять, что делает его лучше, чем LESS CSS, который мы писали годами.
БЭМ - это методология CSS. Другие включают OOCSS и SMACSS. Эти методологии используются для написания модульного, расширяемого, многократно используемого кода, который хорошо работает в масштабе.
LESS - это препроцессор CSS. Другие включают Sass и Stylus. Эти препроцессоры используются для преобразования их соответствующих источников в расширенный CSS.
БЭМ и МЕНЬШЕ не сопоставимы, поскольку они «лучше» друг друга, они являются инструментами, которые служат различным целям. Вы бы не сказали, что отвертка лучше, чем молоток, за исключением случаев, когда вы рассматриваете утилиту для решения конкретной проблемы.
Он утверждает, что "более высокая производительность" ...
Производительность должна измеряться между классическим стилем CSS:
.widget .header
и стиль БЭМ:
.widget__header
но, вообще говоря, производительность CSS-селектора не является узким местом и не нуждается в оптимизации.
БЭМ "производительность" обычно относится к написанию кода производительности разработчика. Если методология БЭМ используется последовательно и правильно, группам разработчиков легко одновременно создавать отдельные модули без стилевых коллизий.
Он утверждает, что «читаемость» и «повторное использование» ...
Я не знаю, что скажу новому разработчику, что БЭМ более читабелен. Я могу сказать, что он предоставляет некоторые четко определенные рекомендации относительно значения и структуры классов.
Видя класс как
.foo--bar__baz
Сообщает мне, что есть fooблок, который находится в barсостоянии, и содержитbaz элемент.
Я бы сказал, что БЭМ более пригоден для повторного использования, чем классическая модель.
Если два разработчика создают блоки ( fooиbar ), и оба этих блока имеют заголовки, они могут безопасно повторно использовать свои блоки в разных контекстах, не беспокоясь о конфликте имен.
Это потому, что в классическом контексте .foo .headingи.bar .heading будет конфликтовать, и вводить конфликт специфики, который необходимо будет решить, возможно, на индивидуальной основе.
На сайте БЭМ классы были бы .foo__headingи .bar__heading, что никогда не будет конфликтовать.
Он утверждает, что «вложенный CSS - это анти-шаблон». Что вообще означает «анти-паттерн» и почему плохо вложенный CSS?
«Анти-паттерн» - это паттерн кодирования, который неопытным разработчикам легче изучить и использовать, чем более подходящую альтернативу.
Что касается того, почему вложенный CSS - это плохо: вложение увеличивает специфичность селектора. Чем выше специфичность, тем больше усилий требуется для переопределения. Неопытные разработчики часто беспокоятся, что их CSS может повлиять на несколько страниц, поэтому они используют селекторы, такие как:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
Когда опытный разработчик будет беспокоиться о том, что его CSS может не повлиять на несколько страниц, он использует такие селекторы, как:
.more
Он утверждает, что «все движутся к использованию БЭМ, поэтому мы тоже должны».
Это заблуждение , так что игнорируйте это как плохой аргумент. Не попадайтесь в ловушку ошибочной ошибки , потому что плохой аргумент в поддержку БЭМ не является основанием полагать, что БЭМ не может быть хорошим.
Может кто-нибудь объяснить, что делает БЭМ лучше, чем МЕНЬШЕ?
Я рассмотрел это раньше, BEM & LESS не сопоставимы. Яблоки и апельсины и др.
Мой коллега совершенно не может убедить меня, но я не знаю, есть ли у меня выбор, кроме как следовать.
Я рекомендую взглянуть на OOCSS, SMACSS и BEM и взвесить все за и против каждой методологии ... как команда . Я использую БЭМ, потому что мне нравится его строгость в формате, и я не против уродливых селекторов, но я не могу сказать вам, что подходит вам или вашей команде. Не позволяйте одному откровенному человеку управлять шоу. Если вам не нравится BEM, помните, что есть и другие альтернативы, которые вашей команде будет проще поддержать. Возможно, вам придется защищать свою позицию с коллегой, но в долгосрочной перспективе это, вероятно, окажет положительное влияние на результаты ваших проектов.
Я бы скорее оценил БЭМ, чем неохотно принял это.
Я написал ответ на StackOverflow, который описывает, как работает БЭМ . Важно понимать, что ваши идеальные селекторы должны иметь специфику0-0-1-0 чтобы их было легко переопределять и расширять.
Выбор использования БЭМ не означает, что вам нужно отказаться от МЕНЬШЕ! Вы все еще можете использовать переменные, вы все еще можете использовать @imports, и вы, конечно, можете продолжать использовать вложение. Разница в том, что вы хотите, чтобы отображаемый вывод стал единым классом, а не цепочкой-потомком.
Где вы могли иметь
.widget {
.heading {
...
}
}
С BEM вы можете использовать:
.widget {
&__heading {
...
}
}
Кроме того, поскольку БЭМ вращается вокруг отдельных блоков, вы можете легко разделить код на отдельные файлы. widget.lessбудет содержать стили для .widgetблока, в то время как component.lessбудет содержать стили для .componentблока. Это значительно упрощает поиск источника для любого конкретного класса, хотя вы все еще можете использовать исходные карты.