Я полностью предпочитаю первый подход. Окно поиска - это определенная сущность с определенными правилами стиля. Если в окне поиска есть уникальные визуальные настройки, которых нет у других элементов на странице, как это обычно бывает, то это путь.
Если есть какие-либо глобальные правила, вы можете определить их глобально в другом разделе таблицы стилей:
input { font-size: 16px; color: blue }
Если есть какие-либо правила, которыми должно делиться несколько элементов ввода на странице (не все в поле поиска) (например, поле ввода поиска, поля ввода логина должны выделяться немного и иметь желтый цвет). background ") вы можете создать глобальный класс в дополнение к" локальным "правилам:
input.highlight { background-color: yellow }
и добавьте это определение класса к каждому входу:
<div class="searchbox">
<input type="text" class="highlight"> <!-- Gets applied the "highlight"
and the "searchbox" styles -->
</div>
Но основной основой всегда должен быть «локальный» набор правил, как вы делаете это в своем первом примере IMO.