Использование технологии БЭМ для разработки сайтов
Методология, которая предоставляет решение по созданию архитектуры проекта. Набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Технологии, описывающие блок, его элементы и модификаторы. Независимые интерфейсные компоненты.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | статья |
| Язык | русский |
| Дата добавления | 24.02.2019 |
| Размер файла | 14,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Использование технологии БЭМ для разработки сайтов
архитектура блок элемент модификатор
Бурых М.А., Негребецкая В.И.
ФГБОУ ВО «Курский государственный университет», колледж коммерции, технологий и сервиса
Курск, Россия
В настоящее время существует достаточное количество технологий, позволяющих верстать сайты. Для создания дизайна верстальщики привлекают CSS. Любые сколь-нибудь сложные правки в связи с изменениями дизайна или с появлением новых страниц приводят к долгому рефакторингу, в самом запущенном случае - к дублированию стилей. При этом постоянно присутствует риск что-нибудь сломать в самом неожиданном месте. И рано или поздно разработчики теряют контроль над CSS кодом [1].
В связи с этим на сегодняшний день существует множество подходов к написанию стилей. Одна из наиболее интересных методологий родилась в Yandex - БЭМ (Блок Элемент Модификатор) - методология, которая предоставляет решение по созданию архитектуры проекта, web-разработки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов.
БЭМ предлагает общую семантическую модель для всех технологий, использующихся во фронтэнд разработке (HTML, CSS, JavaScript, шаблоны и др.)
БЭМ включает в себя [2]:
методологические рекомендации по разработке сайтов -- простые советы по организации проекта, который нужно сделать быстро, а поддерживать долгие годы;
? технологии и библиотеки с открытым исходным кодом -- готовая реализация рекомендаций БЭМ;
? инструменты для автоматизации работы с методологией БЭМ.
Можно отметить следующие возможности БЭМ:
? простая поддержка структуры кода при росте проекта;
? повторное использование кода;
? точечные изменения с минимальными затратами: обновление дизайна, добавление функциональных элементов и т. д.
Используя понятия «блок», «элемент» и «модификатор» можно описать древовидную структуру документа. Такое описание называется BEM tree и является семантическим представлением интерфейса, абстракцией над DOM tree.
Блок - это независимый интерфейсный компонент. Блок может быть простым или составным (содержать другие блоки). При создании блока нужно обеспечивать возможность его использования в любом месте webстраницы, а также повторения на той же самой странице. Блок должен включать в себя всю реализацию, необходимую для представления части интерфейса, которую он выражает [3].
Элемент - это составная часть блока. Элементы контекстно-зависимы:
они имеют смысл только в рамках своего блока. Элемент -- не обязательная составляющая блока, небольшие блоки обходятся без элементов.
Модификатор - это свойство блока или элемента, задающее изменения в их внешнем виде или поведении. Модификатор может быть булевым или парой ключ - значение. У блока или элемента может быть несколько модификаторов одновременно.
Правила формирования имени БЭМ-сущности
? каждая БЭМ-сущность должна иметь свой класс;
CSS-свойства для блоков, элементов и модификаторов описыва-
ются только через классы;
? для разделения слов в именах используется дефис (-);
? элемент отделяется от блока двумя подчеркиваниями (__). Модификатор -- одним (_);
? имена БЭМ-сущностей записываются с помощью цифр и латинских букв в нижнем регистре.
С целью использования разных БЭМ-сущностей на одном DOM-узле применяют миксы, которые позволяют:
? совмещать поведение и стили нескольких БЭМ-сущностей без дублирования кода;
? создавать семантически новые компоненты интерфейса на основе имеющихся БЭМ-сущностей [4].
БЭМ предоставляет абстракцию над DOM-деревом. Блоки независимы друг от друга и инкапсулируют в себе всю функциональность и элементы. Не важно, какими HTML-тегами будет реализован блок -- div или form, разработчик всегда может изменить это или добавить дополнительные обёртки. Любые изменения не должны оказывать влияние на остальные блоки. При использовании данной технологии описывается приложение компонентами интерфейса, а не HTML-тегами.
Каждый блок лежит в своей папке в файловой системе, в которой сложены все технологии, описывающие блок, его элементы и модификаторы.
Блоки могут быть реализованы в одной или нескольких технологиях, например [2]:
? поведение -- JavaScript, CoffeeScript;
? внешний вид -- CSS, Stylus, Sass;
? шаблоны -- Pug, Handlebars, XSL, BEMHTML, BH; ? документация -- Markdown, Wiki, XML.
Несмотря на имеющиеся преимущества, можно выделить следующие недостатки БЭМ:
неполнота предметной области - имеющейся системы понятий недостаточно, чтобы описать всё множество структур и связей, которые могут возникнуть между элементами интерфейса:
? невозможность сложноструктурированных блоков;
? нет способа управлять связями между блоками;
? нет механизма расширения/дополнения языка.
? отсутствие механизма встраивания не БЭМ-объектов.
Хотя в настоящее время из всех подходов к разработке интерфейсов БЭМ-подход является наиболее эффективным, и он не лишён недостатков. Требуется усовершенствовать его методологическую базу, для этого, в частности, следует задействовать теорию проектирования пользовательских интерфейсов.
Таким образом, следование принципам БЭМ позволяет получить тот самый поддерживаемый и масштабируемый CSS, что увеличит скорость разработки и упростит понимание кода новыми разработчиками. При этом используется только соглашение об именовании элементов без какого-либо дополнительного инструментария. Для того чтобы применить идеи БЭМ в своем проекте нам достаточно того стека технологий который там уже наверняка есть.
Размещено на Allbest.ru
...Подобные документы
Случаи использования PHP фреймворка. Обзор современных фреймворков. Выбор фреймворка для разработки сайта. Поддержка баз данных и сообщества. Model View Controller архитектура. Скорость развития фреймворка. Наличие встроенных javascript-библиотек.
курсовая работа [1,8 M], добавлен 31.05.2012Основные технологии разработки ресурсов Интернет. Процесс разработки веб-сайта. Понятие Web-сайта и классификация Web-сайтов. Основные этапы разработки Web-сайта. Использование HTML, CSS, JavaScript, FLASH, PHP и реляционной базы данных MySQL.
презентация [1,3 M], добавлен 28.11.2015Общее определение и история создания JavaScript библиотек, их назначение и использование. Виды и особенности JS фреймворков. Создание клиентского приложения (каталога комплектующих компьютера), написание кода страницы с использованием фреймворка Jquery.
курсовая работа [544,5 K], добавлен 17.12.2013OpenCV – библиотека компьютерного зрения с открытым исходным кодом, предоставляющая набор типов данных, функций и численных алгоритмов для обработки изображений. Ее реализация на C/C++. Цели использования технологии. Основные модули библиотек 1-3.
презентация [121,8 K], добавлен 14.12.2013Средства и технологии разработки приложений баз данных. Компоненты управления доступом к БД. Описание программного окружения доступа к данным. Механизм получения и отправки данных. Специфика связи внутреннего представления с интерфейсом приложения.
презентация [29,4 K], добавлен 19.08.2013Современные тенденции разработки и принципы классификации web-сайтов. Сайт как средство развития бизнеса. Технологии, применяемые при разработке web-сайтов, системы управления контентом. Разработка web-сайта для ЗАО "Кондитерская фабрика "Саратовская".
дипломная работа [4,1 M], добавлен 01.10.2012Анализ аппаратных и программных средств предприятия ТОО "Alicesystems", занимающегося разработкой web-сайтов. Выбор структур, топологий и технологий разработки системы. Технологии создания сайтов и выбор площадки. Описание программно-аппаратных средств.
отчет по практике [690,9 K], добавлен 29.05.2015Модель процесса обработки информации на персональном компьютере и функции объектов, участвующих в этом процессе – операционной системы, прикладных программ, пользователя. Интерфейсные элементы и практические навыки работы с мышью, окнами, программами.
контрольная работа [557,9 K], добавлен 09.03.2011Общее определение JavaScript-библиотеки, виды библиотек. Создание клиентского приложения с использованием одного из существующий JS-фреймворков. Значение, виды и выбор фреймворка. Выбор приложения и его тематики. Написание программного кода, итоги работы.
курсовая работа [545,8 K], добавлен 21.12.2013Использование различных маркетинговых инструментов для продвижения веб-сайтов г. Архангельска. Проблема неразвитости рынка и отсутствия налаженной системы работы через Интернет в регионе. Поддержка сайтов предприятий для привлечения новых клиентов.
контрольная работа [16,6 K], добавлен 28.02.2012Обзор сайтов manutd8.com, manchester-united.ru. Разработка оболочки. Оформление head-меню. Разработка базы данных, блок-схем алгоритмов. Описание связей сущностей. Использование технологии ASP.NET MVC 5. Алгоритм регистрации и входа пользователя на сайт.
курсовая работа [2,2 M], добавлен 15.12.2014Rational Unified Process - конфигурируемый процесс разработки программного обеспечения, его назначение и использование. Методология, процесс, этапы и компоненты RUP. Структура жизненного цикла проекта. Примеры построения диаграмм и иерархии классов.
презентация [175,7 K], добавлен 07.12.2013Основная идея методологии и принципы RAD-разработки информационных систем, ее главные преимущества. Причины популярности, особенности применения технологии. Формулировка основных принципов разработки. Среды разработки, использующие принципы RAD.
презентация [866,8 K], добавлен 02.04.2013Основные цели и задачи разработки сайта компании, которая занимается маркетинговым продвижением сайтов, их оформлением, рекламными компаниями и копирайтингом. Характеристика целевой аудитории сайта. Ход работы по созданию сайт маркетинговой компании.
контрольная работа [1,4 M], добавлен 24.12.2016Разработка программы для управления многоканальным измерительным преобразователем с использованием MDI-технологии и состоящей из нескольких интерфейсов. Анализ инструментов для разработки. Расчет экономической стоимости и целесообразности проекта.
дипломная работа [970,7 K], добавлен 23.08.2011Разработка AppleTalk как системы распределенной сети клиент-сервер, сетевой архитектуры Apple, которая входит в операционную систему Macintosh; основы технологии. Среда ArcNet, сетевая архитектура для сетей масштаба рабочей группы, ее функционирование.
реферат [20,2 K], добавлен 25.11.2009Классификация современных web-технологий. Сравнительный анализ систем управления сайтами. Исследование методов разработки, оптимизации и продвижения Web-сайта. Изучение фреймворков, используемых при разработке сайтов. Обзор создания графического дизайна.
дипломная работа [3,8 M], добавлен 07.11.2013Data Mining как процесс поддержки принятия решений, основанный на поиске в данных скрытых закономерностей (шаблонов информации). Его закономерности и этапы реализации, история разработки данной технологии, оценка преимуществ и недостатков, возможности.
эссе [36,8 K], добавлен 17.12.2014Основные этапы при создании экспертных систем: идентификация, концептуализация, формализация, выполнение, отладка и тестирование, опытная эксплуатация и внедрение. Соответствия между этапами проекта RAD и стадиями технологии быстрого прототипирования.
лекция [38,8 K], добавлен 07.11.2013Рассмотрение основ разработки программ с четкой структуризацией с применением технологии нисходящего программирования. Постановка задачи, применение процедуры и функции из стандартных модулей при создании проекта. Создание пользовательского интерфейса.
курсовая работа [936,7 K], добавлен 22.01.2015
