CSS override 
Question

Hi All,

can anyone tell me-

i have three part of css-

webblock,screeen and theme which is used by webscreen.


Thanks

Amogh

mvp_badge
MVP
Solution

Hi Amogh,

Theme is highest level 

second is screen third is web block or block level css.

this mena if you have one class like

in Theme section-

.header{
border-color: var(--color-primary);
}

in Screen you can over ride same as

.header{
border-color: #000 ;
}

in block or webblock

.header{
border-color: #ff0 !important;
}

in this case block css used by web screen

if block doesnt have css then screen css used else theme level used by screen.


Hope this will help you.

Regards

Rahul Sahu

Thanks Rahul.


Rahul,

That's not really true.  the standard is as follows :


Screen takes precedence over Theme takes precedence over Block.

Your example only works because you added !important to the block css, that way you are blocking the others from overriding it.  In the same way you could add !important to the theme css to block the screen from overriding it.

Please don't promote the use of !important in css.  The precedence is like this on purpose, so that reusability of blocks is promoted, as they adapt to the look and feel of the ui flow/screen they are used in.

Dorine

mvp_badge
MVP

Dorine Boudry wrote:

Rahul,

That's not really true.  the standard is as follows :


Screen takes precedence over Theme takes precedence over Block.

Your example only works because you added !important to the block css, that way you are blocking the others from overriding it.  In the same way you could add !important to the theme css to block the screen from overriding it.

Please don't promote the use of !important in css.  The precedence is like this on purpose, so that reusability of blocks is promoted, as they adapt to the look and feel of the ui flow/screen they are used in.

Dorine

 Thanks Dorine.

 

That it. Dorine is 100% correct. Avoid to use !important in css.


Regards

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.