Какая противоположность "важно" в CSS?

Я создаю плагин jQuery, который использует стили CSS для добавления цветов и полей в вложенные теги DIV. Поскольку я предпочитаю хранить плагин как один файл, мой код добавляет эти цвета и поля непосредственно в качестве атрибутов CSS в DIV, используя метод jQuery .css(). (Значения для этих атрибутов могут быть настроены при инициализации плагина.)

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

Единственный недостаток, по-видимому, заключается в том, что встроенные атрибуты style="..." (сгенерированные методом jQuery .css()) всегда переопределяют стили классов, установленные во внешней таблице стилей. Я могу, конечно, использовать стили !important в таблице стилей, но делать это снова и снова громоздко.

Итак: я действительно хочу, чтобы встроенные стили автоматически принимали более низкий приоритет, чем внешние стили классов, без необходимости создавать внешние стили классов !important.

Я не читал об этом. Какие-либо предложения? (Или: есть ли другой подход, который я должен использовать для создания моих DIV в плагине?)

Ответ 1

Что противоположно !important в CSS?

Не существует прямой противоположности, но есть более низкие селекторы приоритетов.

w3c spec определяет каскад, может также прочитать его.

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

Поскольку вы используете jQuery, добавление пользовательского элемента стиля очень просто:

$('<style type="text/css">.foo {color: #FF0000;}</style>').prependTo('head');

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

.foo.override { color: #0000FF; }

Во всех случаях вам захочется тщательно выбрать селекторов, чтобы иметь наименьшую специфичность.

Ответ 2

В общем случае, если вы планируете использовать !important, тогда есть хороший шанс, что вы должны думать о том, чтобы убрать ваши таблицы стилей.

!important может быть полезен, чтобы заставить вещи себя вести, но большую часть времени это показатель слишком сложного CSS.

Существует не противоположность !important (и даже возможность присваивать уровни важности), но если бы это было так, то, вероятно, применимо то же самое.

Правила CSS применяются в очень строгом порядке приоритета, и если вы будете следовать лучшим методам применения вашего CSS (например, имена элементов стиля и имена классов, предпочитая идентификаторы и встроенные стили), то обычно можно переопределяйте вещи по мере необходимости, не прибегая к !important.

Единственные времена, когда я обнаружил, что я действительно нуждался в !important, были там, где я работал над таблицей стилей, которая была наложена поверх существующих стилей, определенных шаблоном CMS, в котором у меня не было контроль.

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

Это позволит вам применять стили к группам элементов, но при этом по-прежнему есть переопределения.

Надеюсь, что это поможет.

Ответ 3

Что вы можете сделать, это prepend новый стиль для head страницы, а затем вызвать стиль в script.

Что-то вроде

$("<style type='text/css'> .theStyle{ //WHATEVER} </style>").prepend("head");

Затем вы можете использовать addClass в script

$("whatever").addClass("theStyle");

Поскольку вы добавляете его как первое в head, другие таблицы стилей должны переопределять стили.

Таким образом, ваши пользователи могут добавить правило .theStyle в один из своих .css файлов, и оно должно работать.

ИЗМЕНИТЬ

Чтобы уточнить, на основании комментария @zzzzBov ниже

style является таблицей стилей внутри, а файлы .css, о которых я упоминал, это внешние таблицы стилей

внешний будет иметь приоритет, если специфика больше.

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

BTW: @Spudley прав насчет !important.

Ответ 4

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

Ответ 5

Вы не можете этого сделать.

Встроенные стили всегда будут иметь приоритет над стилями в вашей таблице стилей.

Использование !important - правильный метод для того, чтобы ваши стили стилей имели приоритет над вашими встроенными стилями.

Ответ 6

У вас всегда может быть условный оператор, чтобы увидеть, был ли CSS уже установлен, и если он есть, не устанавливайте его снова с помощью jQuery.

Ответ 7

Как некоторые плагины предоставляют ему параметр, который разработчик может использовать для переопределения имен классов по умолчанию. Так что, если они хотят переопределить ваши стили, они могут предоставить, возможно, префикс-параметр, чтобы все имена классов были prefix.yourdefaultclassname.