Hi,
Quick question regarding CSS that's entered in blocks? Where does it end up once everything is built and compiled? (I find the CSS videos and diagrams on the guided path incredibly confusing).
I think there's a bit of misconception that any CSS added to blocks only impacts the blocks but I don't know how this can be? CSS cascades so the block CSS must end up on a style sheet somewhere where presumable if you target something with a common class name it will still impact everything else?
Can someone confirm this for me please?
Thanks
Hi JayPea,
There are rules of precedence, and then there are rules of CSS selectors itself.
When you add a CSS to any web block, it stays active wherever the block is used. If the web block gets removed from the screen, the applied CSS also gets removed. So that was about the lifecycle of web block CSS.
Precedence: Although the web block CSS is applied directly and specifically for the web-block, it has the lowest precedence in the CSS hierarchy. The reason being the consuming module / screens may have their own design theme that they may want to apply / enforce. Imagine you build a forge component which contains a web-block with a very standard default design. Any Outsystems user may want to use your component in their apps. It won't be ideal to force your CSS practices onto them. Although the CSS stays on their screens, but the precedence is low because those CSS files (web block specific css) are placed first on the web page. This CSS will be overwritten with your own theme that you used in the module / UI flow.
Coming to your other query regarding where it impacts. Outsystems can't stop you to write a CSS rule that affects HTML Body of your page. So you may have a small web block that displays just a label, but the CSS you included in it may contain something like this:
html, body { background-color: red !important;}
This means the CSS file will be available for your web page as long as this web block is used on that screen. But the impact of its CSS may affect your whole screen, obviously you've such specific CSS on your web block.
So, precedence and specificity rules always apply here.
The stylesheets will be applied in a given order, see this documentation link on CSS specificity, meaning that the last one will override the previous ones, if there is a case for overriding.
In any case, if you include CSS in a block, it will be an additional file to be downloaded once you open the screen in the browser (you can check the Network tab in Chrome Developer Tools for the CSS files loaded), making it a bad pattern to have CSS in blocks. The consequence would be that if you have a page with 30 blocks, each with its CSS, it means 30 additional CSS files to be loaded, and hence performance may be hindered, even if slightly.
Kind Regards,João
Thanks a couple of question.
Point 6 - Using the style editor results in inline styles doesn't it? So these would result in the highest priority/specificity which can only be outdone with !important (bad practice I know), but that's my understanding.
If blocks are set to visible FALSE until a user selects a value to display another block then I guess the CSS is still loaded upfront, so although the block isn't rendered you will still incur the overhead in the CSS as the files would still be loaded. Is that correct?
Additionally if I create a class in a block which appears on a page and targets a generic class which subsequently is not overwritten in any of the subsequent stylesheets it could impact other elements on the page right? That's the nature of the cascade. If you don't overwrite the value then the first value still applies?
Hi Jaypea,
You can test both of the scenarios yourself :)
Regarding the first question, if the block doesn't go to the screen (use an if branch, rather the visible property, since the code may be on the screen just hidden by CSS) but you can check it yourself.
Regarding the second question, all the CSS from different sources (theme, screen, block, etc.) is considered. If you have the same property to be applicable to the same element (e.g. background-color) the one with the most precedence will override the other ones and that one will be applied.
If you consider that the answer(s) here provided helped your question, consider marking it / them as the solution, to close this topic and to help other community members with the same question find the solution for their problem.
Thanks both for the great responses.