MIX:
зачем смешивать блоки



Сергей Бережной
руководитель отдела
разработки поисковых интерфейсов
Блоки по отдельности




2
Блоки по отдельности




    <input class="button" ... />




3
Блоки по отдельности




    <input class="
        button
        button_theme_gray" ... />




4
Блоки по отдельности




5
Блоки по отдельности




    <input class="input" ... />




6
Блоки по отдельности




    <input class="
        input
        input_theme_gray" ... />




7
Смешивание




8
Смешивание




    <input class="input" ... />

    <input class="button" ... />




9
Смешивание



     <form class="search">

       <input class="input" ... />

       <input class="button" ... />

     </form>


10
Смешивание

     <form class="search">

       <input class="
         input
         search__input" ... />

       <input class="
         button
         search__button" ... />

     </form>
11
Смешивание




     <input class="
       input
       search__input
       my-mod_my-val" ... />




12
Смешивание




     .input { ... }
     .input.my-mod_my-val { ... }




13
Смешивание




     .search_input { ... }
     .search_input.my-mod_my-val { ... }




14
Смешивание




     <input class="
       input
       search__input
       my-mod_my-val" ... />




15
Сергей Бережной

     руководитель отдела
     разработки
     поисковых интерфейсов


     veged@yandex-team.ru
     github.com/veged
     @veged




Спасибо

More Related Content

PPTX
Встроенные Java scripts в plone 3
PDF
How to teach social media #1
PPTX
Clickky fraud presentation at Kinza 2015
PDF
Кир Белевич "Миксы во вселенной БЭМ"
PDF
WapStart. Ключевые тренды российского рынка мобильной рекламы
PDF
Mixed-use: проекты смешанного формата
PPT
Интернет-рынки балтийских стран
PPT
Аналитика в интернет маркетинге
Встроенные Java scripts в plone 3
How to teach social media #1
Clickky fraud presentation at Kinza 2015
Кир Белевич "Миксы во вселенной БЭМ"
WapStart. Ключевые тренды российского рынка мобильной рекламы
Mixed-use: проекты смешанного формата
Интернет-рынки балтийских стран
Аналитика в интернет маркетинге

Viewers also liked (6)

PDF
Коммуникационная стратегия для Coral Travel
PDF
The Outcome Economy
PDF
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
PDF
Hype vs. Reality: The AI Explainer
PDF
Study: The Future of VR, AR and Self-Driving Cars
Коммуникационная стратегия для Coral Travel
The Outcome Economy
32 Ways a Digital Marketing Consultant Can Help Grow Your Business
Hype vs. Reality: The AI Explainer
Study: The Future of VR, AR and Self-Driving Cars
Ad

More from Yandex (20)

PDF
Предсказание оттока игроков из World of Tanks
PDF
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
PDF
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
PDF
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
PDF
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
PDF
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
PDF
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
PDF
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
PDF
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
PDF
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
PDF
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
PDF
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
PDF
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
PDF
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
PDF
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
PDF
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
PDF
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
PDF
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
PDF
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
PDF
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Предсказание оттока игроков из World of Tanks
Как принять/организовать работу по поисковой оптимизации сайта, Сергей Царик,...
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров Яндекса
Представление сайта в поиске, Сергей Лысенко, лекция в Школе вебмастеров Яндекса
Плохие методы продвижения сайта, Екатерины Гладких, лекция в Школе вебмастеро...
Основные принципы ранжирования, Сергей Царик и Антон Роменский, лекция в Школ...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Мобильное приложение: как и зачем, Александр Лукин, лекция в Школе вебмастеро...
Сайты на мобильных устройствах, Олег Ножичкин, лекция в Школе вебмастеров Янд...
Качественная аналитика сайта, Юрий Батиевский, лекция в Школе вебмастеров Янд...
Что можно и что нужно измерять на сайте, Петр Аброськин, лекция в Школе вебма...
Как правильно поставить ТЗ на создание сайта, Алексей Бородкин, лекция в Школ...
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Технические особенности создания сайта, Дмитрий Васильева, лекция в Школе веб...
Конструкторы для отдельных элементов сайта, Елена Першина, лекция в Школе веб...
Контент для интернет-магазинов, Катерина Ерошина, лекция в Школе вебмастеров ...
Как написать хороший текст для сайта, Катерина Ерошина, лекция в Школе вебмас...
Usability и дизайн - как не помешать пользователю, Алексей Иванов, лекция в Ш...
Cайт. Зачем он и каким должен быть, Алексей Иванов, лекция в Школе вебмастеро...
Ad

Сергей Бережной "MIX: зачем смешивать блоки"