Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка и поддержка отзывчивых сайтов
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
37
Битрикс24

Битрикс24

www.bitrix24.ru

28
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
Eczo.bike

Eczo.bike

www.eczo.bike

9
GIFTD

GIFTD

giftd.tech

7
Flowlu

Flowlu

flowlu.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Каскадирование и БЭМ

366 4 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Бывает, что ты пишешь статьи про разработчиков. А бывает, что разработчик сам пишет про себя. Сегодня бенефис Олега, встаем и громко хлопаем в ладошки, передаем ему микрофон.

b_576cd7622ca2f.jpgОлег Завражин, Frontend developer

Сейчас подрастает поколение frontend-разработчиков (называем модненько), которые сразу учатся организовывать CSS, используя БЭМ-методологию, про каскад они что-то слышали, общее представление имеют, но на линии «фронта» с ним не сталкивались. Но будет же здорово понимать, как и чем одно отличается от другого, сильные и слабые стороны каждого подхода, не так ли? Согласные — гоу под кат.

И, конечно же, полезности в конце статьи.*

Термины

Селектор (selector) — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля. (Источник)

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. (Источник)

БЭМ (BEM) — организация кода по принципу «Блок, Элемент, Модификатор».

Обязан внести ремарку: в нашей студии мы используем не классический яндексовский БЭМ, а модифицированный в соответствии с предложениями Николаса Галлахера. И зачастую продолжаем писать HTML «ручками» с препроцессорами, не дробить JS на функциональные блоки. Решения для каждого из проектов принимаются «опционально-рациональным методом» и всегда отличаются от последующего.

А теперь, когда мы говорим на одном языке, рассмотрим то, как писали (и сейчас пишут) стили.

Селектор в каскадных стилях

.menu ul.top-menu li a  {
    font-size: 16px;
    text-decoration: none;
    color: #fffff;
    background: #517aff;
}

Специфичность данного селектора очень велика, и если вы захотите применить тот же стиль где-то еще на своем сайте, то придется делать лишний Ctrl+C/Ctrl+V, а потом еще дизайнеру не понравится, что он сам и нарисовал — придется организовывать поиски с интерполом и кинологами, чтобы поправить бордер (подразумевается, что вы пользуетесь препроцессорами).

Впоследствии поддержка может превратится в бесконечный бесплатный аттракцион с блек-джеком и претензиями «а че так долго?».

Как обрабатывает «машина» код в этом случае: сначала все <a>, потом <a>, вложенные в <li>, далее вся эта «вложенность» в составе <ul class="top-menu"> и, наконец, <div class="menu">.

*браузер обрабатывает стили справа налево!

Как этот селектор будет выглядеть при БЭМ

.top-menu-item__link {
    font-size: 16px;
    text-decoration: none;
    color: #fffff;
    background: #517aff;
}

«Выравниваем» специфичность между элементами DOM.

Обработка <a class="top-menu-item__link">. То есть браузер сразу же нашел ссылку по селектору .top-menu-item__link.

Блоком здесь выступает <li class="top-menu-item"> и характеризуется тем, что как элемент страницы он функционально независим.

да, <ul class="top-menu"> тоже блок, вся прелесть в том, что можно вкладывать один блок в другой и даже вкладывать блоки в элементы.*

Элементом (составляющей частью блока) является <a class="top-menu-item__link">.

Модификатор в данном примере пригодится для выделения, например, активного пункта меню .top-menu-item__link—active, его задача — видоизменять элемент или блок.

На сладкое — сравнительная таблица, которая поможет окончательно понять, в чем крутость БЭМ.

b_576cd6bdf0fa1.jpg

Итого 5 к 2, довольно неплохо.

Как и обещал: полезности

  1. Семантинст vs Бэмер.
  2. Каноничный БЭМ (official)
  3. Каноничный БЭМ (official 2)
  4. Головокружительное погружение в БЭМ
  5. About HTML semantics and front-end architecture
  6. Верстка для самых маленьких. Верстаем страницу по БЭМу
  7. Бэмить или не (кстати диайн сайта называется веб-брутализм)
+3
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
4devs
Разработка и поддержка проектов на Symfony 2
Андрей
интересно что многие уже начинают его использовать например https://getmdl.io и говорят что на маленьких проектах он не нужен, только те кто делает "мертвые проекты" без поддержки в дальнейшем...
Ответить
Perecel
автоматический отбор целевой аудитории (реклама в соц сетях)
Дмитрий Кубитский
есть подход -> когда маленькие проекты делаются просто и дёшево)
затем, копят желаемые изменения, и раз в 2-3 года ПОЛНОСТЬЮ переделывать в соответствии с современными требованиями.
Ответить
4devs
Разработка и поддержка проектов на Symfony 2
Андрей
а почему вы решили что делать по методологии БЭМ дорого? можно не копить желаемые изменения, а внедрять их в процессе и смотреть результат сразу, а не раз в 2-3 года. проект должен работать всегда а не раз в два три года.
И что такое современные требования? мобильная версия - это современные требования? вы хотите видеть его через 2-3 года или сейчас?
Ответить
hfrtvnii
Бэээээмм это как человек который никогда не подтирался вдруг узнал и придумал правила пользования туалетной бумагой и строго следит теперь чтобы там была целюлоза, не было свинца и во сколько слоев ее юзать, сколько сантиметров отрывать и с каким давлением в паскалях жопу тереть.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать