Understanding the marriage of OutSystems and CSS
I have been working as a web developer for the past 10 years, and as an OutSystems developer for the past 7 years. Throughout those years, whenever I tell someone that I really love CSS, everyone seems to be surprised. It’s known that most of the full stack developers or back-end developers are not a big fan of CSS.
I am here to tell you a secret, stylesheets are not that complicated as most people think.
In this article, I’m going to share a few points that understanding them makes everything more clear. By knowing these tips, you will be able to improve your CSS skills and how stylesheets work together with OutSystems.
Understanding the priorities
First of all, we need to understand that OutSystems platform allows you to customize your applications using CSS in four places; it is possible to add CSS in the webblock, theme, screens, and widgets.
Those elements that I have mentioned above will be imported in the following order (from low to high importance):
- Webblock
- Theme
- Screen
- Widget (there are some ways to apply css classes and stylesheets there)
or
This means that if you have a CSS rule in theme and you have the same rule in the screen, the screen will overwrite the theme rule.
Keep in mind the speedness of selectors
The second other that is good to keep in mind is the speedness of the selectors that you have available. Like programming languages we have many ways to reach the same result, in CSS most of the time we have the same scenario, that is why it is important to understand how you can improve and avoid making your CSS something that will cause performance problems. The list below shows the speedness level of selectors (from slowest to fastest):
- Pseudo-classes
- Attribute
- Universal
- Descendant
- Type
- Class
- ID (should be avoided in OutSystems, because IDs are auto generated by the platform)
Talking about selectors it is also good to know how the browser reads the CSS, it will be read from right to left. Hard to understand it? Hereby an example.
Imagine that we have the following css:
.link-class a
{background-color:red;}
What the browser does is get all the elements that are <a> (most right selector) and them it gets all the elements that have been retrieved in the first selector and filter to apply the style only to elements that has link-class in the class attribute.
So, that said we can take the conclusion that if the link-class is a class which will be applied to the <a> element that you want to apply the style, why not change that code to:
.link-class
{background-color:re}
In that second case, the browser will only filter for elements which has the class link-class.
My tip is, let the composed selectors for when you really need to get something using multiple selectors, this is an example where composed selectors are needed:
HTML
<div id=”firstDiv” class=”classDiv”><span >Test</span></div>
CSS
.classDiv span{color:gray;}
In this example if you want to style the span inside the div the only way to do it is composing selectors to get the element (unless you change it for all spans in the DOM, which should not be the case if you want to style one specific element).
Quick tips
There are also a few tips which can make your CSS code better and improved:
- Put only one CSS rule per line
- Add comments (using /* your comment goes here */) to make your code more readable. Use it to create sections in your CSS and make your code better for maintenance.
And the best tip is keep it simple, a complex CSS means that the browser will need more time and effort to process it.
I hope this article has helped you to break the paradigm that CSS is something useful and if used correctly brings your applications to another level!
