Я ожидаю переключить видимость элемента: я должен начать с class = "..." или style = "..."?

Question

Если у меня есть элемент на веб-странице, который я ожидаю, чтобы показать и скрыть немного с помощью javascript, что было бы наиболее подходящим способом сделать его изначально невидимым?

<div class="hidden">...</div>

или

<div style="display: none;">...</div>

Использование class="..." предпочтительнее, чем style="...", в большинстве случаев, но я не уверен, что это лучше всего подходит в этом случае. Семантически, мой элемент не является скрытым элементом, это просто элемент, который будет начинаться с скрытым при первой загрузке страницы. Поскольку я использую методы jQuery show () и hide (), это означает, что он часто будет в этом состоянии:

<div class="hidden" style="display: block;">...</div>

.. что для меня просто глупость.

С другой стороны, использование встроенного style="display: none;" кажется каким-то хакерским и жестко закодированным.

Я знаю, что любой из методов будет работать идеально, и пользователь никогда не будет мудрее, но какой шаблон меньше всего нарушает принципы проектирования?

Answer 1

Назови стиль initially-hidden. Он точно передает информацию и имеет смысл, если бы вы когда-нибудь запрашивали этот стиль с помощью jQuery.

Answer 2

Я думаю, что если вы собираетесь переключаться, изменяя отображение с "" на "нет", вам следует использовать стиль. Если вы собираетесь переключаться, изменяя класс со «скрытого» на «», вы должны использовать класс. Другими словами, будьте последовательны.

Answer 3

Хотя я согласен с тем, что целый класс должен просто вызывать начальную видимость чего-либо, это может показаться немного большим, но это помогает легче понять, что происходит. Особенно, если вы называете это чем-то описательным, например «изначально скрытый», как было предложено ранее.

Так что, хотя я и не могу назвать конкретного руководителя проекта, я думаю, что то, что я предлагаю, имеет свои достоинства. Это более приемлемо, чем применение прямого стиля, который вы не могли бы использовать повторно, и более очевидно в отношении того, что происходит, чем вызов метода hide () с использованием jQuery.