Stylesheet order in ASP.NET Themes
I've started using ASP.NET Themes in my latest projects. They're interesting, but just goofy enough to make me hate them. The latest quirk I've discovered is that all CSS files in a theme are loaded, regardless if you want them or not.
Cascading Style Sheets is built on the idea of inheritance, in which order or styles is very important. So, when you can't control what styles are loaded at what time, it's hard to overwrite things when needed.
Problem
My theme is called cojui. Inside the App_Themes/cojui/ folder I have cojui.css. In that stylesheet, I import my other stylesheets: reset-min.css & masterpages.css.
@import "stylesheets/reset-min.css";
@import "stylesheets/masterpages.css";
/* My main styles follow below */
Visual Studio reads cojui.css first since it's in the root of the theme directory. Then, VS loads the rest of the stylesheets, in alphabetical order. This causes reset-min.css to reset all my styles since cojui.css has already been processed -- not the intended effect.
Solution
App_Themes/cojui/stylesheets/ folder and add an underscore ( _ ) to the stylesheets I want to load first. This only gives me levels of granularity in load order, but for now it's working. I also renamed cojui.css to main.css to let other people know it's the 'main' stylesheet since it's no longer in the root directory.
Update: I've since decided this is NOT a good way of doing things.
I re-evaluated what should be a .NET theme, and what shouldn't. Themes should be limited to theme-specific style only. _masterpages.css and _reset.css are utility stylesheets, but not 'style specific' stylesheets. So, I've moved them into a 'stylesheet' folder ouside of the App_Themes folder.
Next entry: Print Stylesheet in ASP.NET Themes
Previous entry: Reference JS file when using MasterPages