Hi All,

can anyone tell me-

i have three part of css-

webblock,screeen and theme which is used by webscreen.


Thanks

Amogh

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

Solution

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

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


Regards

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.