Привет!
Сегодня в нашей компании проходил мой мастер-класс по БЭМ. Брали самые азы — CSS и файловую структуру. Задание делали прямо "на сцене", по очереди. Вот слайды, задание там внутри http://varya.me/bem-css-workshop/
В конце смогли сравнить изменения, которые мы сделали без всякого БЭМ https://github.com/varya/bem-css-workshop-source/pull/1/files и то же самое с БЭМ https://github.com/varya/bem-css-workshop-source/pull/2/files Получилось очень наглядно, и вроде бы это "продаёт" идею гораздо лучше презентаций и статей.
Кстати, для многих стало открытием, что SASS и LESS поддерживают БЭМ-селекторы, хотя этой фиче уже больше года.
Как вам мастер-класс? Кстати, можете слайды использовать для себя, конечно же :-)
Очень наглядные примеры. Круто. Спасибо что поделилась :fireworks:
А в чем сакральные и практические преимущества нотации с двойным минусом для модификаторов, по сравнению с дефолтным двойным подчеркиванием, в
bem-toolsиenb?@dab, поскольку это мастер-класс для западных разработчиков, то для них два минуса дефолтно. Эта нотация благодаря Гари Робертсу тут распространилась, поэтому я её и придерживаюсь, чтобы не вносить путаницу. Ну и чисто субъективно, лучше видно разницу между
--и__, чем между_и__. Особенно это заметно на элементах с модификатором.@varya, раз уж пошла речь про нотации, интересно узнать про модификаторы
key-value. Как без них обходятся?Вопрос похож на "вы перестали пить коньяк по утрам?" :-) Никакого запрета на
key-valueмодификаторы нет.@varya, просто, не разу не встречал
block--mod--val, да и в руководстве об этом тоже ни слова.Синтаксис
key-valueважен для манипуляции в js, как я понимаю, а в стилях css может быть просто на уровне соглашений. А на счёт js цитата из руководства:Это именно BEM-like и даже не BEM-compatible.
@andrewblond, Я это руководство вижу впервые :-)
@varya очень круто, спасибо!