Including of stylesheets question

Including of stylesheets question


I was looking at the source of rendered pages in Outsystems and I was wondering why the order of linked-stylesheets is the way it is.

the order I found was:
  1. <link href="_Basic.css?13374" type="text/css" rel="stylesheet" />
  2. <link href="/RichWidgets/Blocks/RichWidgets/jQueryUI/jQueryUIInternal.css?3436" type="text/css" rel="stylesheet" />
  3. <link href="/RichWidgets/Blocks/RichWidgets/RichWidgets/Feedback_Message.css?3436" type="text/css" rel="stylesheet" />
  4. <link href="/Application/Blocks/Some.css?13374" type="text/css" rel="stylesheet" />
  5. <link href="/UsedTheme.css?13374" type="text/css" rel="stylesheet" />
  6. <link href="Page.css?13374" type="text/css" rel="stylesheet" />
  7. <link href="/UsedTheme.extra.css?13374" type="text/css" rel="stylesheet" />

why is the theme not at the top (after perhaps Basic), after all, that is the most generic css.
I would have expected:

OutsystemsStuff -> Theme -> Page -> Webblock.

the more specific. the later the link.


I have wondered this exact same thing myself a number of times. The order of the CSS loading has made us use a lot of "!important" or inline styles. :(


Hi guys,

Nice place to check this out is the reference help.

Web blocks can be seen as the most specific definitions, but in order to provide components some degree of customization, namely overwritting the css, they're css is loaded first.
The _Basic.css and the extra.css are there because of the usage of the Grid.

Well, it explains the order, but I still disagree ;)

I admit, my original thought of outsystems -> theme -> page -> webblock is perhaps not entirely correct.

due what you are saying and reading the reference I would expect the order to be:

Theme -> webblocks -> page

theme is basic colors, etc.
webblocks is their default layout, font-size and whatever
page override possible stuff for a specific webblock.

You are always allowed to disagree ;)

Consider the following, If that was the order you couldn't properly customize feedback messages in different themes like you have in London and Chicago...
I am still not convinced, but I understand it a bit better.
It's annoying that OS is not making any difference between a webblock and a layout-webblock.
ah well, !important will save the day once more...