Scoped CSS reset

Question

У меня есть плагин jQuery, который будет динамически отображать приличное количество HTML на странице.Я хочу, чтобы потребители плагина могли использовать его как есть и чтобы он выглядел одинаково, независимо от того, какие стили CSS у них есть.

Следовательно, мне нужно выполнить «CSS» с ограниченным доступом - то есть возможность сказать что-либо в моем div плагинов не должна зависеть от CSS владельцев.

Теперь, очевидно, я могу сбросить все элементы HTMLчто я использую в этой области, но это не выглядит очень элегантно.Кто-нибудь еще идет, как они справляются с этим?

Answer 1

После некоторого поиска в Google я нашел этот проект, на который я наткнулся ранее.Это сброс CSS с заданной областью действия, полностью основанный на! Важных правилах.https://github.com/premasagar/cleanslate

Answer 2

Нет такого понятия, как настоящий сброс CSS. Правило стиля CSS будет каскадно применяться к любому элементу, к которому оно применяется, и единственный способ остановить это - переопределить его другим правилом.

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

Итак, то, что вы просите, невозможно. Однако вы можете пойти на разумный компромисс, переопределив самые распространенные и наиболее важные стили для области.

Answer 3

Я бы предложил комбинацию из нескольких вещей:

1. используйте множество классов с префиксами и префиксами, т.е. plugin-checked plugin-active
2. создайте таблицу стилей по умолчанию, которая даст правильные стилик правильным классам, когда никакие другие стили не применяются к странице.
3. Используйте inline-стили для ui-анимаций, которые всегда одинаковы (в этом нет большого выбора, если этоанимация, встроенные стили меняются).
4. Предоставляет хорошую документацию о том, какие классы применяются к каким элементам и когда.

Это позволит более опытным разработчикам использовать свою собственную таблицу стилейили разверните таблицу стилей, чтобы получить желаемый формат, это также даст разработчикам ловушки для переопределения их стилей по умолчанию, если они сделали что-то глупое, например div a {float:left;}.

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

Избегайте создания заглушкив этом ограничивается разработка, попробуйте вместо этого создать плагин, который упрощает разработку.

В качестве решения HTML5, которое может поддерживаться или не поддерживаться (пока не знаю, какие браузеры это поддерживают), вы можете добавить набор стилей кконтейнер через элемент style с атрибутом scoped (перейти к рисунку, стили области действия).Он может содержать упрощенный сброс HTML, но вся эта система с большей вероятностью ограничит вас позже, когда вы захотите что-то переопределить и вступить в битву за специфичность.

Answer 4

Вы можете поместить все стили внутри HTML, который вы вставляете в DOM через ваш плагин. Это все еще не гарантия, так как пользователи могут перегрузить его своим JS, если они того пожелают.

Если это больше для удобства, тогда вы можете обернуть весь свой HTML в идентификатор, а затем сбросить все в пределах:

#myPluginHTML p, #myPluginHTML li, #myPluginHTML div, etc {
   margin: 0px;
   etc: 0;
}

Опять же, нет никаких гарантий. Но должно работать по умолчанию.