Я относительно новичок в БЭМ и только недавно начал применять эту методологию на практике. В данный момент я работаю над сайтом с полностью адаптивным дизайном и обычно для этого я использую несколько @media секций для различных разрешений экрана, которые чаще всего разнесены по разным файлам. Таким образом, описание одного блока может находится в нескольких файлах в зависимости от назначения.
С внедрением БЭМ мне бы очень хотелось инкапсулировать описание блоков в отдельные файлы, но как это сделать с разбиением по ширине экрана мне пока не очень понятно.
Я пробовал смотреть уже существующие реализации методологии (в основном на сервисах Яндекса), но там нет мобильной/планшетной версии сайтов. Если у кого есть опыт работы с адаптивным дизайном в терминах БЭМ прошу поделиться им или дать совет по тому как организовать структуру CSS в данном случае.
P.S. Я использую препроцессор, поэтому, в целом, любые даже сумасшедшие идеи не исключаются
Если из сумасшедших идей, то попробуй для блока создать например модификатор screen-size а значения разнести по разным файлам, в этих файлах пиши медиа-запросы, а потом включить этот модификатор через deps.js
т.е.
block/
_screen-size/
block_screen-size_small.css
block_screen-size_medium.css
block_screen-size_large.css
а в deps.js:
({shouldDeps: {block: 'block', mod: 'screen-size'}})
должно работать
Вариантов может быть несколько, каноничного, насколько я понимаю, пока так и не сложилось:
1. Пишем MQ для разных разрешений экрана в файле блока (кажется, это самый правильный вариант, особенно если есть возможность использовать препроцессор).
2. Раскладываем css для разных разрешений на разные уровни переопределения.
3. Используем модификаторы, как предложил Иван.
4. Создаем отдельные технологии для каждого разрешения и собираем по аналогии с ie.css.
Пока получается громоздко. Но я надеюсь, что в будущем CSSO научится их объединять.
вот бы нашелся кто-то из наших пользователей, у кого бы дошли руки...
Спасибо всем за ответы!
Я сам подумывал о написании @media секций для каждого блока отдельно, особенно если сами параметры экрана убрать в глобальные переменные. Возможно, правда, будет менее удобно отлавливать ошибки, да и большое количество "медиа запросов" должно сказаться на производительности.
Мне нравится идея склейки @media, но судя по результатам моих поисков, таких инструментов пока нет (я не использую SASS, где это вроде бы есть: https://github.com/aaronj
Если придумаю что-нибудь более толковое - отпишусь тут.
а просто подцепить в
один файл со всеми MQ не вариант?типа { elem: 'css', url: 'mq' },