Ответы пользователя по тегу Вёрстка
  • Как правильно внедрять БЭМ?

    @AlexS94
    Попытаюсь ответить вам по пунктам, так как сам в своё время задавался теми же вопросами.

    1. Если говорить об удобстве - читаемость хромает, но на прямую в разрез с методологией это не идёт. Если существует "оБЭМленый" Bootstrap и он ничем не уступает - используйте. Это по-настоящему продуманная и современная библиотека компонентов, соответствующая стандартам доступности. Отдельных соглашений на такие случаи не знаю.

    Для себя решил отказаться от Bootstrap, чтобы глаз нервно не дёргался, при взгляде на "винегрет" из разных именований. Компенсирую это разработкой библиотеки собственных компонентов, руководствуясь тем же Bootstrap и лучшими практиками.

    2. Касательно использования em: рекомендую ознакомиться с этой статьёй
    Пришло время попрощаться с единицей измерения px
    Для блоков отдельно назначать font-size в px не нужно. Попробуйте правильно использовать rem, взяв за константу, что он должен быть по умолчанию 16px. Если нужно будет - отвечу подробнее.

    Лично я использую em в медиа-выражениях и в случае крайней необходимости в блоках.

    3. В случае чистого БЭМ - создайте блок с одним шрифтом и другим и используйте его как микс.

    4. Если честно, стараться использовать готовые решения CMS можно, но я бы не рекомендовал. Когда работал с WP, всё время кастомизировал классы и вывод шаблона. На Битрикс с этим проще, можно даже собственный класс назначить для WISYWIG редактора.
    Вопрос в том можете ли вы себе позволить такую кастомизацию или нет. Если это требует сверх ресурсов - оно того не стоит.

    5. Я использую альтернативное именование, которое прижилось лучше всего в англоговорящих странах .block__element--modifier. На мой взгляд оно читаемее.

    Вообще для расширения "БЭМ кругозора" рекомендую ознакомиться с этими статьями
    More Transparent UI Code with Namespaces
    Battling BEM CSS: 10 Common Problems And How To Av...

    Я в своей работе на данный момент использую расширенный БЭМ, так называемый BEMIT (BEM + ITCSS). Для обычных сайтов - этого хватает с головой, в случае современного реактивного фронтенда требует обсуждения с командой и более глубоко понимания в проектировании АНБ (абсолютно независимый блок).

    Надеюсь, что смог вам помочь, так как сам на решение этих вопрос вопросов потратил продолжительное время.
    Ответ написан
    5 комментариев