[thelist] Design-time and render-time stylesheets

Mattias Hising hising at home.se
Fri Jul 9 13:26:11 CDT 2004

I posted this earlier on css-discuss without any responses, so I try this list, which may be more appropriate for this kind of questions/discussions.

I have been thinking a lot about separation of styles depending on context. 

The problem is as follows:

We would like to separate styles in at least three different categories design-time to minimize future maintenance and maximize reusability over different webapps. On the other hand, the webapps are to be consumed in mobile devices and with a great number of requests to these webapps we would like to minimize the number of requests one single page generates, that is, it is not a solution to include more than one style sheet. It is not, however, possible to include the style definitions inside the head-tag as a lot of the different devices we are supporting have very limited restrictions on page size (lets say maximum 10 kb of mark-up). With this in mind, we have come up with the following ideas and now needs some input and suggestions on how to achieve it:

Design Time Style sheet
1.A generic box model style sheet (75% of total style sheet) reused on all webapps (a colour and image free style sheet). Used in all webapps. 
2.A Theme specific style sheet (10% of total style sheet) used to define webapps theme in colours, ui-images (icons) and other background images such as buttons and header images. These will be named the same over all webapps but of course point to different locations for images and use other colours. Used in all webapps with the same Theme.
3.A Webapp specific style sheet (15% of total style sheet). Used only in one webapp.

Request Time Style sheet
1.A single file that is a combination of the 3 sections in the Design Time Style sheet
<link rel="stylesheet" type="text/css" href="/files/stylesheets/request_time_style.css" />

Now the fun part! How do we solve this? I have two suggestions but would like to have more suggestions.
1.Deploy time. Generate static css-files with installation scripts when webapp is deployed. 
1.1 Pros: 
Style sheet is separated and is reusable and easy to manage. 
1.2 Cons: 
You have to run deploy-scripts and restart the servers when changing/adding style sheets.
Will generate a huge number of style sheets (request_time_green_webapp1_mobile_1.css, request_time_green_webapp2_mobile_2.css, request_time_green_webapp2_mobile_1.css a s o)
2.Dynamic Style sheet. Generate css-files from request context parameters. style.jsp?theme=green&app=news&mobile=mobile1
2.1 Pros:
Style sheet is separated and is reusable and easy to manage.
Smaller amount of files than above mentioned solution
2.2 Cons:
Generates load on server
Will all clients cache dynamic pages?

I would really appreciate any input on this matter. Have in mind that the solution is to work in a large portal, with a common look and feel and in a huge number of mobile devices, now known and those in the future to come. 

More information about the thelist mailing list