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




Спасибо

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