Our Mindfly Blog

Website Design and Development

Random creative design element

CSS stylesheet organization in ASP.NET Themes

by Rusty Swayne 4.July 2007 20:00

ASP.NET 2.0 themes provide a very nice way of organizing an applications stylesheets and formatting images.  However, if you have multiple stylesheets housed inside a theme they get added to the page in alphabetical order which can obviously create some issues as the styles start to "cascade."

At Mindfly's studio we add four stylesheets to any given theme (a methodology we adopted after meeting Andy Clarke at Web Directions North and subsequently reading his book transcending CSS)

  1. normalize.css - This removes any default styles that a browser may associate with a tag such as h1 or p.
  2. layout.css - Positioning, margins, padding, floats, etc.
  3. type.css - Typography.
  4. color.css - Colors and backgrounds.

Adding these to the head in alphabetical order would cause a few issues as normalize.css is added after color.css and layout.css thus removing any previously applied styles. 

Mindfly simply adds an alpha prefix to each stylesheet to work around this issue.

  1. a_normalize.css
  2. b_layout.css
  3. c_type.css
  4. d_color.css

 

Comments

Paul Hatcher

Paul Hatcher said on June 1, 2008 (03:34)...

Why not refer to one stylesheet in themes directory and then have that reference the other stylesheets e.g. point at styles.css but in that have

@import url("normalize.css"Wink;
@import url("layout.css"Wink;
@import url("type.css"Wink;
@import url("color.css"Wink;


Paul Hatcher

Paul Hatcher said on June 1, 2008 (04:08)...

Ah, I think I see - ASP.NET just grabs all .css files - is my trick possible just by using a different extension for the included css files e.g cssi


Rusty

Rusty said on June 1, 2008 (17:45)...

I hesitant to say one way or the other if simply changing the extension would work as I have not tested it.

Our method works really well and it is essentially the same thing but I would love to hear if your method works.


Add comment



(Will show your Gravatar icon)  









Live preview

said on August 28, 2008 (05:34)...


 

Powered by BlogEngine.NET 1.2.0.0. Original Design by Heather Alvis.
Sign in

Bellingham, Washington
Copyright © 2007 Mindfly Inc. All Rights Reserved.