Недостатки в применении всех CSS внутри JavaScript (JQuery)?

Question

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

Так что, возможно, на страницах, которые я хочу разместить, это будет выглядеть так:

var searchBox = новый поиск (inputBox);

В идеале мне бы не хотелось связывать таблицу стилей каждый раз, когда я делаю это. Мне просто интересно, если производительность будет иметь большое значение, если я просто создаю теги и добавляю такие атрибуты, как это:

$('<div></div>').css({
  'background-color': #002323, etc.
});

Мне кажется, он немного более многословен, но им будет намного легче управлять и использовать.

Или вы знаете лучший способ сделать это?

Может быть, этот вопрос затрагивает большую проблему, касающуюся объектно-ориентированного CSS. Я не хочу, чтобы это испортило другие вещи на странице, если есть атрибуты css с тем же именем. Все остальное, что я делаю, является объектно-ориентированным. Существуют ли CSS-решения или методологии для этого?

Answer 1

На ум приходят две вещи:

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

CSS был разработан, чтобы сделать вашу жизнь проще и честно, я думаю, что было бы не очень разумно не использовать его, если у вас нет какой-то фреймворк стиля javascript, который делает лучше.

Answer 2

Мне кажется, что это скорее зависит от того, сколько CSS вам нужно применить к этому поисковому компоненту, и от того, нужно ли иметь возможность обрабатывать его для разных сайтов. Предполагая, что ваш javascript все хранится в одном внешнем файле, является ли большой проблемой создание базового CSS-файла для его использования и использование сценария для динамической вставки <link> в файл CSS над другими элементами <link> в документ

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

Answer 3

Основными проблемами вашего поискового компонента являются навязчивый JS и, вероятно, недоступный инструмент (кроме случаев, когда вы выбрали ARIA).

Тот, о ком ты говоришь, вторичен. Вы должны использовать тщательно названные классы, интересно, что может быть проще в управлении, чем class="warning" (background-color: #FE0114;? Никак)