OutSystems Magic Stack
This article could be about Magic: The Gathering, but is about OutSystems CSS Priority System, given a stack of cards in a Magic game as comparison. Let’s brainstorm!
Magic: The Gathering
This a famous game world wide, based on a system of cards, with several rules and where player actions have a certain order. For the purpose of this article, it’s all one need to know for now.
Card Stack
A card stack has two basic features: 1) All cards enter the stack in a strict order; 2) All cards leave the stack in the opposite order (last in, first out).
To visualize this behavior, picture a box where you place all cards over each other like a tower (a stack). Then you can only reach the bottom card, after taking out all the cards above that one.
OutSystems
A low-code development platform, which allows everyone to build a web or mobile application. One could even say it’s like a visual game, that starts with a hand full of cool features, to be played in your canvas!
CSS
CSS (Cascade Style System) is a mechanism to add styles to web pages (colors, margins, etc). And in OutSystems, a developer can change the visual appearance of his application, using a visual style editor.
OutSystems CSS Magic Stack
The order which OutSystems applies CSS styles, is related to specificity (see [1]). This is similar to a last-in first-out element style to be resolved, in a stack of elements placed by this order:
- (Web) Block style sheet;
- (App) Theme style sheet;
- (Web) Screen style sheet;
The screen is now at the top of the stack, and will be first taken out from the stack, to be resolved (represented in the browser). Therefore the screen style has precedence over the other styles, which means it has higher priority.
A Screen style has more priority than the theme style. The Theme style has more priority than the Block style (because this element can be reused in other places, in same or different applications).
When you use this mechanism to memorize priorities, you may understand better how your application styles works.
Notice that, when you have inline styles (defined in extended properties), it’s like having special events. Their style will have more priority, than the element style where they are at (inside a page or in a web block).
References
[1] CSS Specificity: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)#css-specificity
[2] Style Editor: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Change_the_Look_of_Widgets_with_Styles_Editor
[3] Magic: The Gathering - Stack: https://magic.wizards.com/en/articles/archive/beyond-basics/stack-and-its-tricks-2017-11-30
