Hi All,
can anyone tell me-
i have three part of css-
webblock,screeen and theme which is used by webscreen.
Thanks
Amogh
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
Dorine Boudry wrote:
Thanks Dorine.
That it. Dorine is 100% correct. Avoid to use !important in css.