Новичок, столкнулся с полным непониманием, вероятно плохо прочитал соответствующую документацию.

Преамбула: имеем header, в нём форму поиска с полем и кнопкой.

Соответственно: .header //block .header-search //block .header-search_input //element .header-search_submit //element

Для .header-search задаем основные параметры:

• width, height
• display
• padding
• font может еще что-то опционально

Для инпута и сабмита задаем подобные параметры.

А теперь два главных животрепещущих вопроса: 1) Где указываются отступы, бордеры, цвета надписей и прочие оформительские штуки для .header-search, инпута и сабмита? Из того, что я понял из документации, самый простой вариант: вешаем на .header-search какой-нибудь класс-модификатор, навроде ...--default, и в нем описываем все внешние данные, аналогично для инпутов.

В итоге имеем: .header-search_input--default //modificator .header-search_submit--default //modificator

<header class="header">

    <form class="header-search header-search--default">

        <input type="search" class="header-search_input header-search_input--default">

        <input type="submit" class="header-search_submit header-search_submit--default">

    </form>

</header>

Именно так это работает, или я что-то не понимаю?

2) Если мой вариант из вопроса 1 верен, то и изменения в контексте media-query для формы и инпутов указываются для соответствующих модификаторов:

    @media (max-width: 768px){
        .header-search--default{
            width: 100%;
        }

        .header-search_input--default{
            border: 1px solid green
        }

        .header-search_submit--default{
            font-size: 1.3em;
        }
    };

Так это работает, или я и в этом случае всё неправильно понял? :)