Как предотвратить путаницу JavaScript и CSS?

Question

У моей компании есть веб-сайт, который обслуживает одно и то же приложение для нескольких клиентов, поэтому у каждого клиента есть свои собственные HTML-шаблоны, и мы не можем ничего редактировать.

Мы разработали прекрасное приложение Web 2.0 с большим количеством jQuery, которое прекрасно работает, это веб-игрушка, которая доставляет массу удовольствия, но мы должны интегрировать ее с ужасными и ошибочными вещами клиентов (например, сэндвич кода) и, как всегда, Для всех проблем мы решили использовать iFrame для нашего приложения и немного js, чтобы обновить его высоту (родительский контент и контент iFrame происходят из одного домена). IFrame спасает нас от всего беспорядка и странностей, но грустно использовать что-то подобное.

Знаете ли вы лучшее решение для этого?

Answer 1

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

В любом случае, вам, как гостевому скрипту чужой страницы, было бы грубо перетаскивать большую, навязчивую структуру, такую ​​как jQuery, в свое окно. Даже если вы использовали noConflict, все еще существует много возможных взаимодействий, если скрипт на их странице не ожидает его там.

Answer 2

Что ж, мы наконец-то решили эту инкапсулирующий код Javascript внутри анонимной функции (как это делают некоторые большие парни, такие как Google), и для CSS мы использовали множество дочерних селекторов, а в некоторых случаях правило «! Важно».

Answer 3

Что касается CSS, вы можете использовать таблицу стилей "reset", как http://meyerweb.com/eric/tools/css/reset/.

Если весь контент веб-приложения находится внутри какого-либо тега, примените таблицу стилей сброса (измененную в соответствии с вашими потребностями с помощью font-family, font-size и т. Д.). Тогда ваши клиенты font-family,font-size,margins и т. Д. Не влияют на ваше веб-приложение.

Чтобы получить все необходимые вам свойства CSS, вы можете проверить свое веб-приложение (в своей среде, а не на клиентах) с помощью Chrome и увидеть Computed style с Show inherited. Там вы можете увидеть свойства, которые могут установить клиенты, но есть множество свойств, которые вам не нужны. А некоторые могут даже ошибаться - например, размеры, так что следите и комбинируйте их с невычисленным стилем.

И убедитесь, что вы называете все, что делаете, с помощью явного тега содержимого, как показано ниже, чтобы не путать клиентов html / css:

#YourWebAppMainTag a {}