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

Эбиа

www.ebia.ru

21
YAGLA

YAGLA

yagla.ru

20
2.0

2.0

twozero.ru

17
Venyoo

Venyoo

venyoo.ru

15
Enlite

Enlite

enlited.ru

14
E-Commerce and Venture projects

E-Commerce and Venture projects

Продажа товаров от производителей оптом и в розницу

14
Extrimtour

Extrimtour

extrimtour.com

14
likearea

likearea

smm.li

13
SE Ranking

SE Ranking

seranking.ru

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

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

376 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
Бэээээмм это как человек который никогда не подтирался вдруг узнал и придумал правила пользования туалетной бумагой и строго следит теперь чтобы там была целюлоза, не было свинца и во сколько слоев ее юзать, сколько сантиметров отрывать и с каким давлением в паскалях жопу тереть.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать