Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «бэм»
19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек 2015-09-29 15:29:13
... по БЭМ-методологии. Команда БЭМ тоже не ... разработки библиотек в БЭМ-методологии. Надеемся, ...
+ развернуть текст сохранённая копия
БЭМ набирает популярность и становится актуальнее — например, недавно Google выпустил новую библиотеку блоков под названием Material Design Lite, реализованную по БЭМ-методологии. Команда БЭМ тоже не сидела без дела — мы выпустили новую версию библиотеки bem-components, на базе которой построены сайты и проекты не только Яндекса, но и других разработчиков.
Эти события натолкнули нас на мысль ещё раз вспомнить и рассказать вам, как сформировались принципы разработки библиотек в БЭМ-методологии. Надеемся, что многим это будет интересно и полезно. Итак, поехали.
Долгое время мы создавали библиотеки блоков, пользуясь в основном интуицией и, как нам тогда казалось, чувством прекрасного. На этом тернистом пути было набито много шишек и усвоено много уроков. В результате у нас родился новый документ, содержащий принципы разработки библиотек, которым мы пользуемся сейчас как чеклистом при разработке каждого нового блока. На наш взгляд, эти простые и очевидные принципы дают нам возможность получить продуманный, удобный, масштабируемый и легкий в поддержке код.
Если вы хотите узнать на примерах, как мы пришли к нашим принципам разработки, добро пожаловать под кат.
Читать дальше →
Тэги: api, bem, frontend, javascript, open, source, yandex, блог, бэм, веб-разработка, интерфейсов, компании, разработка, фронтенд, яндекс
Видео доклада «Пишем #b_ правильно» с WebCamp 2015 2015-07-07 13:25:24
... сайт вручную «по- БЭМ» без классов «block__element__element ... внедрения и использования БЭМ и связанным ...
+ развернуть текст сохранённая копия
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.
Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.
Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.
Слайды: delka.github.io/talks/webcamp/2015/bem
Читать дальше →
Тэги: bem, block__element__element, css, html, webcampodessa, бутлеги, бэм, веб-разработка
Способы организации CSS-кода 2015-04-20 01:18:14
Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и ...
+ развернуть текст сохранённая копия
Разработчик Бен Фрейн (Ben Frain) однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет».
К счастью, на просторах интернета можно найти множество решений этой проблемы. В данной статье рассмотрены основные киты структуры CSS-кода, а также интересные рыбы/млекопитающие поменьше.
Статья служит лишь памяткой или кратким справочником — для подробного ознакомления с методологиями настоятельно рекомендуется изучать оригинальную документацию.
Итак, начнем.
Читать дальше →
Тэги: amcss, atomic, bem, css, fun, html, mcss, oocss, smacss, бэм, веб-разработка, код, совершенный
Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса 2015-02-25 20:03:36
... страницы использовала методологию БЭМ, созданную в ... .
БЭМ упрощает разработку сайтов ...
+ развернуть текст сохранённая копия
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.
БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.
В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.
На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →
Тэги: bem, javascript, open, source, yandex, блог, бэм, веб-разработка, компании, разработка, яндекс
Изоморфный БЭМ 2015-02-04 09:02:03
... своих приложений по БЭМ-методологии, пользуясь соответствующим ...
+ развернуть текст сохранённая копия
Когда появился node.js, многие web-разработчики стали задумываться о возможности использовать один и тот же код как на клиенте, так и на сервере. Сейчас существует несколько фреймворков, ставящих подход «пишем код один раз, используем везде» во главу угла, время от времени появляются новые. Вот и я не смог пройти мимо, пишу подобный микро-фреймворк — bnsf. Он предназначен для тех, кто предпочитает создавать front-end своих приложений по БЭМ-методологии, пользуясь соответствующим набором технологий и инструментов.
Давайте попробуем начать писать front-end для простого одностраничного web-приложения, используя bnsf. Чтобы не отвлекаться на создание back-end части, будем использовать в качестве back-end'a API vk.com. Наше приложение будет состоять всего из двух страниц, главной — с формой поиска пользователей по идентификатору — и вторичной, на ней будем выводить информацию о выбранном пользователе.
Читать дальше →
Тэги: bem, bnsf, isomorphic, javascript, node.js, tutorial, бэм, веб-разработка, туториал
Главная / Главные темы / Тэг «бэм»
|
Взлеты Топ 5
Падения Топ 5
|
