Geek Answers Handbook

Add! Important for all styles for widget without javascript

I am creating a widget that will be displayed on a client site. We cannot use iFrame, so I have to use exhaustive CSS reset (https://github.com/premasagar/cleanslate) to avoid interference with their styles. To use this solution I need to add! It is important for all my styles, and because there are many of them, and I want this code to be easily supported, I am looking for a more dynamic solution.

I can add! important for a stylesheet through javascript, but it is not ideal for a production environment. I use CodeKit and LESS and wonder if any of them can help me easily add! Important for all styles when creating a CSS file.

Mixin? CodeKit configuration?

+6
source share
2 answers

Update: Yes, LESS can help.

I hate using !important except in the most extreme circumstances. Most people use it as a chainsaw when they need to use scalpal to do the job. However, I understand the problems faced by widget developers like you, and your choice to use https://github.com/premasagar/cleanslate leaves you without an option.

Marc answer noted the good LESS feature, but he was unable to demonstrate how this could help in this matter.

If you complete all of the LESS code in intermediate mixing with names, this function does exactly what you need. So, suppose your widget code looks like this (you mentioned that you are already using some class for your widget):

 .yourWidgetClass div > p { prop: something; &:hover { prop: some-hover-style; } } .yourWidgetClass .someClass { prop: something; }

Then you can do this (wrapping all your widget code in #makeImportant() , and then calling this mixin with the !important function noted in Marc's answer):

 #makeImportant() { .yourWidgetClass div > p { prop: something; &:hover { prop: some-hover-style; } } .yourWidgetClass .someClass { prop: something; } } & { #makeImportant() !important; }

The result is the following CSS output:

 .yourWidgetClass div > p { prop: something !important; } .yourWidgetClass div > p:hover { prop: some-hover-style !important; } .yourWidgetClass .someClass { prop: something !important; }

For my original (accepted) answer, which was more intense in manual mode, see the change history.

+10
source

I found that LESS can mark all the properties set by mixin immediately as !important when !important specified after a call to be included.

  .someMixin() { background-color: #fff; cursor: pointer; } .someUsages { .someMixin() !important; }

Results in:

  .someUsages { background-color: #fff !important; cursor: pointer !important; }

For more information on this topic, see the LESS document on "Important Keyword ".

+2
source

More articles:


All Articles