Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

CSS Inclusion Order


Go to End


2 Posts   1345 Views

Avatar
micahsheets

Community Member, 165 Posts

19 May 2012 at 10:46am

This topic has been discussed a lot of times in this forum so I know how CSS files are loaded. My question that has still not been answered is why do CSS files load in the order they do. Not why programatically but why logically. The way CSS is usually loaded when done manually in a static website is to load the files so that more general ones load 1st and more specific ones load later. This way the general styles are applied everywhere and the can cascade down to more specific styles put on the same elements. This way you don't have to always use "!important" in styles.

The way SilverStripe works makes a lot of sense generally. You Have Page.php which can be extended to HomePage.php and InteriorPage.php etc. It would then make a lot of sense that if you put your general style sheets in Page.php and then have a specific one in HomPage.php and another different but more specific one in InteriorPage.php that would make sense. The further down the line you might have an include brought in by $Layout. If that included file had a style sheet required in it then that one would load later than the others. This is the way Cascading Style Sheets were intended to be used. However SilverStripe does not work this way. If you use the nice Requirements class to bring in your StyleSheets using css or themedCSS it starts by loading the stylesheets defined in the $Layout template 1st, then in the init() of the extended Page Class then in the Page Class itself. This breaks all the cascading that should be possible with CSS. I now have to manually bring in custom head tags or use "!important all over the place in style sheets that should by default already be overriding more general stylesheets.

So since SilverStripe works the way it does for a reason I would like to understand the reasoning behind it. I would not be so frustrated if I knew why and could understand the thinking. It seems like the Requirements class may have been written in a logical way from a programmers view but without really understanding how CSS is supposed to work. Or maybe I just am missing an important point that would make it all make sense. I know there are others who would really appreciate knowing the why of the current methods.

I may just make my own version of Requirements so that it works they way most people would expect it to.

Thanks

Avatar
Willr

Forum Moderator, 5523 Posts

20 May 2012 at 11:56am

So since SilverStripe works the way it does for a reason I would like to understand the reasoning behind it. I would not be so frustrated if I knew why

There is no reason why it does it like it does, just the way "It works" at the moment because that was easier. Several people have mentioned they would like to rewrite requirements but yet to see anyone try :) Examples / proposals welcome!

In the old days, SS had no <% require %> template tag, this was hacked on later and so doesn't match 1 = 1 with the PHP Requirements API.

I personally don't use <% require %> and the template requirements API as like you mentioned, the PHP API is easier to control the inclusion order and then you can also make use of Requirements::combine_files().