Skip to content

Instantly share code, notes, and snippets.

@dima117
Last active September 6, 2016 09:42
Show Gist options
  • Save dima117/f8e27439a08f0e9367f3856987b0ffe6 to your computer and use it in GitHub Desktop.
Save dima117/f8e27439a08f0e9367f3856987b0ffe6 to your computer and use it in GitHub Desktop.

Методология

БЭМ (Блок-Элемент-Модификатор) - это методология разработки веб-приложений, в основе которой лежит компонентный подход. БЭМ делает создание сложных интерфейсов проще.

Каким образом БЭМ помогает разработчику?

БЭМ предлагает строить приложение из отдельных блоков. Описать это чуть подробнее. Дальше - блоки в 3 колонки.

  • Блоки - небольшие - их легче держать в голове, чем всё приложение сразу
  • Блоки - отдельные - когда вы меняете что-то внутри одного блока, остальные блоки не сломаются
  • Блоки - независимые - их легко использовать повторно без копипаста
  • Блоки имеют название - общая терминология проекта упрощает коммуникации в команде
  • Блоки образуют структуру - структурированный код проще рефакторить
  • Блоки - <какие?> - пояснение

Основные идеи

Методология БЭМ содержит несколько основных идей. Для знакомства с ними нужно 5 минут, например, можно прочитать о них за утренним кофе. Это был вступительный текст, дальше сборку картинка и список идей: в каждой ссылка-заголовок + пара строчек пояснения

  1. БЭМ-сущности: Приложение состоит из блоков. У них могут быть элементы и модификаторы
  2. Файловая система: БЭМ предлагает хранить файлы блоков отдельно. Что это дает
  3. Сборка Чтобы запустить код блоков в приложении, вам понадобится сборка. (про декларации, зависимости, уровни переопределения)
  4. Принципы технологий: описать общие принципы вместо описания JS и CSS (декларативное объявление, зависимость от порядка) с примерами!
  5. Соглашение по именованию: Для сопоставления БЭМ-сущностей в разных технлогиях придумали правила формирования их идентификаторов.

###УЗНАТЬ ПОДРОБНЕЕ


  • BEM is okay, Имя Фамилия
  • Другой отзыв, Имя Фамилия
  • Еще один отзыв, Имя Фамилия
  • Четвертый отзыв, Имя Фамилия
  • Пятый отзыв, Имя Фамилия

-- Яндекс, Google, Альфа-банк, EPAM, итд


По центру Эксперты рекомендуют, все используют, используйте и вы!

###УЗНАТЬ ПОДРОБНЕЕ



КАРТА ВСЕГО САЙТА в несколько колонок

Методология Инструменты Платформа Сообщество
- сущности - bemhint - bem-xjst - блог
- файлы - SDK - i-bem - форум
- сборка - ENB - components - события
- имена - libs


хз куда запихнуть

(м.б. на морде это и не нужно)

  • быстрый старт (по идее, здесь нужно дать ссылку на инструменты)
  • история появления
  • частые вопросы
@skad0
Copy link

skad0 commented Sep 6, 2016

  • Я думаю быстрый старт пользователь должен видеть сходу + когда полистал все эти пункты ленда ему снова предложить его.
  • История появления тут, наверное, не нужна, на нее просто можно дать ссылку.
  • Фак тоже думаю должен просто быть ссылочкой, например, сопровождающей быстрый старт.
  • Действительно ли "сборка" стоит отнести в раздел методологии в нижнем меню?
  • Блоки - небольшие - не знаю как, но, кажется, это стоит перефразировать

Ну и в целом, кажется, что ленд выйдет довольно длинным, завезите интерфейс чтоб быстро бегать по пунктам (например, справа мини-навигация)

@dima117
Copy link
Author

dima117 commented Sep 6, 2016

@skad0, спасибо!

  • Согласен, думаю, кнопку "узнать подробнее" нужно везде переименовать в "быстрый старт"
  • историю и faq, наверно, будет достаточно разместить в верхнем меню, а на странице не давать ссылок
  • суть методологии в разделении на компоненты, в т.ч. в файловой системе, поэтому, если здесь не будет про сборку, не будет понятно, как это использовать. думаю, нужно описать сборку без деталей и особенностей формата - только сами идеи сборки, деклараций, зависимостей, уровней переопределения
  • формулировки не продумывал, пока можно не обращать внимания на них

Ну и в целом, кажется, что ленд выйдет довольно длинным, завезите интерфейс чтоб быстро бегать по пунктам (например, справа мини-навигация)

Пока кажется наоборот - лендинг будет короче в 3 раза, чем сейчас (4 экрана вместо 13). На счет навигации можно подумать, когда будет финальный контент и заготовка оформления.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment