Dinamic CSS

Good Morning,

What is the best way (best pratices) and why to implement dynamic CSS in a widget?

For example, a list:

I have a list widget and for the active ones I want them to be green and the inactive ones red.

Using the style classes? Using the Attributes+Style? Using JS? Classes created in the theme or in the screen?

Are there more ways to do this?

What is the best best practices? And why?

What is the performance difference?

Which creates fewer CSS sheets?


Please, can someone give me a full explanation?

mvp_badge
MVP

Hi Mariana,

The property style class allows you to fill with the classes or expressions. In mobile and reactive you don´t need to use the attributes and fill it with the style to create the dynamic behaviour. Check here: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

To learning more about the best practices and loading order of the CSS watch this course https://www.outsystems.com/training/courses/199/css-in-outsystems/

for a more advance skills in UX/UI you can find this one https://www.outsystems.com/training/courses/106/ux-ui-design/. It is a very useful material to understand better how the ux works in OutSystems


Best regards

Fabio


The question is, every video says it's best to do it one way, and at the moment I don't know what the BEST way.

Could you let me know which way is best and why?

Classes are awesome because you can document them in a style guide and if you need to change something you just need to update the class and you don't need to go to every place to update the styles one by one.

But imagine one thing, you can do everything with classes but for dynamic coordinates or something that you cannot control using classes, it's not going to be possible, just with styles you will be able to control the dynamic style that is changing and you cannot control previously like for example hand gesture or even if you want to give free will to the user to choose a height for a card through an input where it can be 10% or 11px or 49%. (I would like to give more examples :D)

The classes should go always to the theme, based theme, or some specific business theme and each theme's module will consume the business theme(most of the time or always the business theme is consuming a base theme)

In your example, I would create two classes for active and not active like this

list-item active    //  list-item not-active

Now, about the performance and loading order, Fabio already shared some good content to study :)

Hope I helped you a little more.

Kind Regards,

Márcio

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.