Как стать автором
Обновить

С чего начинается БЭМ?

Разработка веб-сайтов *
БЭМ расшифровывается как «Блок Элемент Модификатор». Это подход к web-разработке, позволяющий быстро создавать сайты с гибкой архитектурой. Он знаком многим, кто занимается HTML/CSS вёрсткой.

Изобретённый в Яндексе, БЭМ постепенно проникает и в разработку других компаний.
В данный момент основные мейнтейнеры работают над выводом в Open Source фреймворка, построенного по методологии БЭМ, инструментов и многих полезных утилит.

Читать дальше →
Всего голосов 90: ↑77 и ↓13 +64
Просмотры 52K
Комментарии 61

Я.Субботник едет в Челябинск

Блог компании Яндекс
25 февраля 2012 года в 12 дня приглашаем всех на первый Я.Субботник в этом году.

Он пройдет в челябинском отеле «Аврора» в рамках Ural Web Developer Conference 2012 (UWDC).

Расскажем о технологиях, решениях и практиках, которые могут быть не только интересны, но и полезны разработчикам:
  • Как использовать БЭМ! вне Яндекса (c примерами вёрстки HTML+CSS по PSD, написания JS компонент, сборки динамического сайта с использованием PHP/Django/RoR).
  • О чём ещё говорят верстальщики (новые CSS-свойства, красивые деревья, BEM и Bootstrap).
  • Подробнее про архитектуру фронтенда Я.Почты (изнанка фронтенда, загрузка данных, обновление страниц и взаимодействие с пользователями)
  • Масштабируемые JavaScript-приложения (как правильно заложить архитектуру, чтобы приложение могло безболезненно развиваться)
  • Куда расти веб-дизайнерам (мир без фотошопа)
  • Интегральный подход в дизайне (интернет-сервисы и роль дизайнера в проекте)
  • Спортивные проекты Яндекса и нагрузки (правильная архитектура для проектов с четкими сроками запуска, повышенными требованиями к нагрузкам и отказоустойчивости)
  • Кластеризация дубликатов в Яндекс.Картинках (что делает поиск по картинкам качественным)

Принять участие в Я.Субботнике смогут все участники конференции UWDC 2012 (регистрация на сайте).

Детали предстоящего мероприятия смотрите здесь.

Если у вас есть друзья, которым это будет полезно, поделитесь ссылкой с ними.
Всего голосов 47: ↑45 и ↓2 +43
Просмотры 2.8K
Комментарии 11

Я.Субботник: БЭМ в разработке интерфейсов

Блог компании Яндекс
8 сентября 2012 года в Москве пройдет первый этой осенью Я.Субботник.

Он будет посвящен БЭМ-экосистеме, которая появилась и развивается в Яндексе.

Сотрудники московского и симферопольского офисов Яндекса подробно расскажут про существующие компоненты и поделятся своим видением будущего БЭМ.

Приходите, слушайте, задавайте вопросы и общайтесь на профессиональные темы за чашкой кофе.

На нашем Я.Cубботнике вы узнаете про:
  • историю создания БЭМ;
  • шаблонизаторы вообще и BEMHTML в частности;
  • внедрение БЭМ в существующие системы;
  • миксы;
  • I-bem.js и зачем он нужен;
  • тестирование блоков;
  • автоматическую сборку и bem-tools.

Кроме того, вас будут ждать интерактивные стенды, о которых мы расскажем дополнительно.

Программа и тезисы Я.Субботника

Участие, как всегда, бесплатное, но зарегистрироваться необходимо.

Регистрация на мероприятие заканчивается 7 сентября в 18:00 по московскому времени.

Количество мест ограничено.

Для тех, кто не попадёт в число участников или не сможет лично присутствовать на Я.Субботнике, будет организована онлайн-трансляция.

Яндекс.Events, делимся знаниями
Читать дальше →
Всего голосов 36: ↑27 и ↓9 +18
Просмотры 5.5K
Комментарии 15

Почему лучше верстать в соответствии с БЭМ — практические примеры

CSS *
Про БЭМ (методология написания CSS от ЯндексБлок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да — [на самом деле нет]).

Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?

За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.
Читать дальше →
Всего голосов 87: ↑64 и ↓23 +41
Просмотры 60K
Комментарии 285

БЭМ, следующий уровень

Разработка веб-сайтов *
Из песочницы
По мотивам статьи на Хабре и флейма вокруг нее. Статья написана для тех кто хочет попробовать БЭМ, но не знает с какой стороны за него взяться. При первом взгляде на БЭМ, он кажется логичным и невероятно удобным. Но при попытке реализовать пользователь сталкивается с препятствиями, которые нивелируют все достоинства. Я не знаю как и почему создавалась эта методология, меня это не парит, если использовать правильно, то это прикольно, я же не задумываюсь для чего когда-то строили автомобиль или самолет, зато сейчас им пользоваться удобно, это же просто удобный инструмент. Знаю только, что при создании, никто не собирался стили и классы писать одним полотном.

Я попытаюсь рассмотреть один из многих вариантов применения методологии БЭМ на практике, который не только соответствует духу, но и рекомендациям создателей.
Читать дальше →
Всего голосов 13: ↑6 и ↓7 -1
Просмотры 8.2K
Комментарии 8

Фронт-энд Островка изнутри

Блог компании Ostrovok.ru Разработка веб-сайтов *JavaScript *
Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.
Читать дальше →
Всего голосов 79: ↑61 и ↓18 +43
Просмотры 26K
Комментарии 62

Попробуй БЭМ на вкус!

Разработка веб-сайтов *JavaScript *HTML *
Tutorial
Эта статья рассказывает о том, как создать проект с использованием БЭМ-технологий.
Мы шаг за шагом создадим страничку каталога товаров, пользуясь принципами БЭМ в CSS, возможностями писать декларативный JavaScript на фреймворке i-bem.js и с использованием шаблонизатора BEMHTML. Помогать делать всё это будут bem tools, в частности — инструмент для разработки bem server.

Онлайн магазин

Важно: в статье нет особенных подробностей, её цель — получить проект максимально быстро. Текст, раскрывающий больше информации, пройдёт следующим постом.
Читать дальше →
Всего голосов 80: ↑61 и ↓19 +42
Просмотры 68K
Комментарии 82

БЭМ on Rails

JavaScript *Ruby on Rails *HTML *


Здравствуй, <%= habrauser %>!

Я очень люблю фреймворк Ruby On Rails, он правда очень и очень крут. Он позволяет в кратчайшие сроки реализовать твои замыслы. Раньше я много писал на нем, но сегодня я front-end разработчик. Когда я узнал о методологии БЭМ, я был в полном восторге, потому что так или иначе ты сам приходишь к чему-то подобному. Хорошо, когда дзен-процесс сокращается в разы. О том, что такое БЭМ можно прочитать тут и тут. Недавно прошедший BEMup окончательно расставил все на свои места. Мне были просто необходимы инструменты для работы с БЭМ в рамках проектов на Ruby on Rails. Конкретных решений не существовало, а bem-tools не подходит по вполне понятным причинам, описанным ниже. Я решил написать bem-tools на Ruby.
Смотреть, что вышло
Всего голосов 55: ↑45 и ↓10 +35
Просмотры 14K
Комментарии 27

Верстка для самых маленьких. Верстаем страницу по БЭМу

CSS *HTML *
Tutorial
Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

  • BEM
  • Собственно пример — как сверстать страницу

Читать дальше →
Всего голосов 154: ↑133 и ↓21 +112
Просмотры 369K
Комментарии 172

В чем проблема «проблемы БЭМ'а»?

Разработка веб-сайтов *CSS *HTML *
Вроде закончилась неделя 30 строк кода и взамен ей видимо пришла неделя "БЭМ". Причем прослеживается достаточно забавная очередность топиков:

И самое интересное, как всегда, в комментариях — чистой воды холивар. Но из-за чего? Почему одни свято верят в методологию БЭМ'а, другие презирают её как узурпатора семантичности? Я попробую изложить свою точку зрения на суть всего холивара и прояснить в первую очередь для себя положение БЭМ'а в собственном мироздании.
Читать дальше →
Всего голосов 56: ↑45 и ↓11 +34
Просмотры 30K
Комментарии 59

Префиксы и постфиксы в PHP (и CSS)

PHP *Yii *IT-стандарты *


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

Префиксы и постфиксы несут основную задачу – сделать сущность максимально уникальной, причём настолько, чтобы её можно было без проблем найти любым текстовым редактором. На сегодняшний день IDE поддерживают отличную вещь – «Find Usages» (поиск использований), но это не всегда помогает, и об этом я напишу чуть ниже.

Именование в стиле Венгерской нотации мне не пришлось по душе. Такой подход мне не нравился ещё со времён C++ / Delphi – я считал его избыточном и не всегда понятным. Мне понравилась реализация БЭМ, но в полной мере я её тоже не использую. Я постарался вычленить и объединить наиболее понравившиеся мне методы, о них и расскажу.

Читать дальше →
Всего голосов 36: ↑8 и ↓28 -20
Просмотры 11K
Комментарии 56

БЭМ с человеческим лицом и интеграция с backend

Разработка веб-сайтов *CSS *
Верстка современных web-проектов – это сложно, долго и дорого. Казалось бы, с переходом IE на автоматические обновления, HTML5, окончанием поддержки Win XP все мы должны зажить в сказочной стране с пони и радугой. Почему легче не стало?

  • HTML5 и CSS3 подарили вебу возможность создавать UI, почти не уступающий по сложности и отзывчивости desktop-приложениям. Ничто не дается просто так, HTML, CSS и JS стало в разы больше. Раньше нам хватало трех файлов: styles.css, stupid-ie-must-die.css, scripts.js. Сейчас количество скриптов, стилей, загружаемых шрифтов, картинок измеряется десятками и сотнями. Появилась необходимость в минификации, ускорении рендеринга и организации всего этого барахла в файловой системе.
  • Сайты постепенно перестали быть набором связанных гипертекстовых страничек и стали web-приложениями. Если раньше для многих сайтов достаточно было сверстать «главную» и «внутреннюю» страницы, то сейчас все совсем не так просто. Количество дизайн макетов легко достигает десятков и сотен.
  • Мы все наслушались про лендинг-пейдж, a/b-тестирование и многократное увеличение конверсии за «просто-так». Оставим за бортом вопрос об эффективности этих методик. Дизайн начали переделывать часто – это факт. Известно, что внесение изменений и поддержка – гораздо дороже и сложнее, чем разработка.
  • Появились мобильные устройства и необходимость в адаптивном дизайне. Тестировать стало сложнее и дольше. Цикл исправления найденных при тестировании багов стал дольше. Тестирование UI почти не поддается автоматизации, с ростом функционала время на регрессионное тестирование неуклонно растет.
  • Усложнилась интеграция с backend-кодом, появилась необходимость делать это гораздо чаще.


Все это заставляет задуматься об оптимизации работы с фронтэндом.


Хочется:
  • Уменьшить время и количество интеграционных работ («натягивание» сверстанного макета на серверную технологию)
  • Повысить повторное использование html, css и js, уменьшить количество соответствующего кода
  • Снизить время на модификацию существующего кода
  • Уменьшить количество ошибок при модификации, особенно регрессии
  • Научиться создавать и верстать адаптивный дизайн эффективно

Читать дальше →
Всего голосов 15: ↑8 и ↓7 +1
Просмотры 9.8K
Комментарии 17

BemPHP: реализация методологии БЭМ средствами PHP

PHP *ООП *
Из песочницы
Пришла мне тут как-то мысль освоить PHP, а, как известно, лучший способ изучить язык – это создать на нем велосипед фреймворк. При ковырянии в различных форумах и топиках заинтересовала меня одна методология, которую пропагандируют в уважаемой компании «Яндекс» — БЭМ. Кто ещё не в курсе этой методологии, почитайте на официальной страничке. Так же на Хабре есть публикация «Верстка для самых маленьких. Верстаем страницу по БЭМу» от хабраюзера xnim, в котором все объяснятся на конкретном примере. «Яндекс» написали свои модули и скрипты сборки проектов, однако выполнены они все на Node.js, а вот на PHP обнаружить что-то подобное мне не удалось (хотя, признаюсь честно, я особо и не искал). К тому же, PHP, как объектно-ориентированный язык, дает интересные возможности.


Читать дальше →
Всего голосов 21: ↑12 и ↓9 +3
Просмотры 8.3K
Комментарии 20

Изоморфный БЭМ

Разработка веб-сайтов *JavaScript *Node.JS *
Tutorial
Когда появился node.js, многие web-разработчики стали задумываться о возможности использовать один и тот же код как на клиенте, так и на сервере. Сейчас существует несколько фреймворков, ставящих подход «пишем код один раз, используем везде» во главу угла, время от времени появляются новые. Вот и я не смог пройти мимо, пишу подобный микро-фреймворк — bnsf. Он предназначен для тех, кто предпочитает создавать front-end своих приложений по БЭМ-методологии, пользуясь соответствующим набором технологий и инструментов.

Давайте попробуем начать писать front-end для простого одностраничного web-приложения, используя bnsf. Чтобы не отвлекаться на создание back-end части, будем использовать в качестве back-end'a API vk.com. Наше приложение будет состоять всего из двух страниц, главной — с формой поиска пользователей по идентификатору — и вторичной, на ней будем выводить информацию о выбранном пользователе.
Читать дальше →
Всего голосов 25: ↑19 и ↓6 +13
Просмотры 13K
Комментарии 31

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

Блог компании Яндекс Разработка веб-сайтов *Open source *JavaScript *
Tutorial
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

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



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →
Всего голосов 96: ↑79 и ↓17 +62
Просмотры 104K
Комментарии 36

Способы организации CSS-кода

Разработка веб-сайтов *CSS *Совершенный код *HTML *
Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».

К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.

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

Итак, начнем.
Читать дальше →
Всего голосов 44: ↑42 и ↓2 +40
Просмотры 189K
Комментарии 61

Видео доклада «Пишем #b_ правильно» с WebCamp 2015

Разработка веб-сайтов *CSS *HTML *
Tutorial
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.

Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.

Слайды: delka.github.io/talks/webcamp/2015/bem


Читать дальше →
Всего голосов 21: ↑18 и ↓3 +15
Просмотры 10K
Комментарии 19

BEMIT: Следующий шаг в развитии BEM по версии Гарри Робертса

Блог компании PAYSTO CSS *
Перевод
Все, кто следил за мной или моей работой на протяжении какого-либо времени, бесспорно знают, что я огромный фанат соглашения о наименованиях БЭМ. То, о чем я расскажу в этой статье, является не альтернативным или другим соглашением о наименованиях БЭМ, а дополнением к нему: небольшими добавками, которые поднимут БЭМ на ступеньку выше. Этот расширенный синтаксис БЭМ окрестили BEMIT, так как он включает некоторые парадигмы и шаблоны из (еще неопубликованной) архитектуры CSS в виде перевернутого треугольника (ITCSS). BEM + ITCSS = BEMIT.

Вспомним, что такое БЭМ – он работает за счет разбивки всех классов в базе кода на три группы:
Читать дальше →
Всего голосов 10: ↑7 и ↓3 +4
Просмотры 6.9K
Комментарии 3

19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек

Блог компании Яндекс Разработка веб-сайтов *Open source *JavaScript *Яндекс API *
БЭМ набирает популярность и становится актуальнее — например, недавно Google выпустил новую библиотеку блоков под названием Material Design Lite, реализованную по БЭМ-методологии. Команда БЭМ тоже не сидела без дела — мы выпустили новую версию библиотеки bem-components, на базе которой построены сайты и проекты не только Яндекса, но и других разработчиков.

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

image

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

Если вы хотите узнать на примерах, как мы пришли к нашим принципам разработки, добро пожаловать под кат.
Читать дальше →
Всего голосов 68: ↑52 и ↓16 +36
Просмотры 42K
Комментарии 32

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

Разработка веб-сайтов *CSS *HTML *
Впервые я узнал о БЭМ лет 5 назад. В то время все ненавидели IE6, ждали возможности полноценно использовать CSS2 и благополучно забывали табличную верстку. В то время казалось, что когда исчезнет IE6, жизнь верстальщика станет увлекательной и беззаботной. Именно IE6 был основной причиной костылей в верстке. Кто бы мог подумать, что во времена HTML5 и CSS3, когда нет особых проблем с развитием популярных браузеров, ситуация станет еще хуже.

Недавно я обнаружил, что многие существующие проекты уже внедрили БЭМ, а некоторые новые проекты требуют от верстальщика обязательной разработки по БЭМ. То есть профессиональные разработчики уже ставятся перед фактом и не имеют выбора. Раз ситуация складывается таким образом, давайте попробуем разложить все по полочкам без рекламы и приукрашивания.
Читать дальше →
Всего голосов 123: ↑69 и ↓54 +15
Просмотры 43K
Комментарии 270