Hello,

We are developing an application that will use multiple forms, and those forms will share common fields, so we are developing some reusable blocks for the fields.

I am aware that page level styles will overwrite block level styles unless I use the !important flag, and this is causing conflicts between the blocks themselves. For example, one block contains an input that should be left justified, and one contains an input that should be center justified (don't ask why, this is a real example.) But one of the block styles always overwrites the other and all fields are center justified.

How can I apply different styles to my different reusable blocks, that will overwrite the page and not each other.

Specifically, in one of my blocks I need to apply the following:

SyntaxEditor Code Snippet

[data-dropdown] > div.dropdown-display,
[data-dropdown] > select.dropdown-display {
    border-radius: 0px !important;
    border-width: 0px 0px 2px 0px !important;
    font-weight: bold !important;
}

How can I create a class and use OS to apply it to [data-dropdown] > div.dropdown-display,
[data-dropdown] > select.dropdown-display?

These are probably silly questions, any help is appreciated.

Solution

Hi Landon,

It should be possible to make this work without the !important keyword.

As you point out in the example, using !important means you lose some control of further overrides. Here is a good article about it with some recommendations.  This CSS specificity calculator may also help.

The way to do this is to make your styles more specific.  One example of this is to put a class on a parent and use this in your definitions. eg

.MyParentClass [data-dropdown] > div.dropdown-display,

.MyParentClass [data-dropdown] > select.dropdown-display

Then if you need to override it, create another definition that is more specific again

.MyParentClass .MoreSpecificClass[data-dropdown] > div.dropdown-display

Now I am guessing what I have provided will not work yet because there is already another class that is overriding your CSS specification.  This is likely why !important was required in the first place.  You will need to identify that CSS definition, and use the same definition, then extend it with your additional classes.  Chrome's dev tools can help identify which CSS definition is overriding your definitions.

I hope this helps!

Kind regards,

Stuart


Solution

Hi Landon

Stuart already gave you the answer, but I would like to point that this approach, weblocks in forms, have many caveats, including related to specific validations and data storage to save data... 

Cheers