[drupal-devel] CSS bloat

[Chris Messina]

I would love to cut down on the size of my CSS files. As it is, I use
short-hand properties as much as possible and have also centralized
all font styles into one area.

There are a couple reasons why the CSS is so huge though and I think
that there are remedies, but they're going to take more than just
cutting down the CSS files.

For one thing, it is hard to know where certain styles or classes are
going to show up. For example, that labels are used non-semantically
on the profile page and that labels also wrap radio buttons means that
I can't simply style labels generically but instead must add selectors
to accommodate each case. That doubles the amount of code.

Second, Drupal needs to have a more uniform and semantically classed
codebase. The classic example of this is how the old event and archive
calendars were classed without regard to the other. If you look at
Democratica's modules.css file, you'll see the monkey-love I had to
make to get those calendars to look the same.

Third, Drupal's XHTML might validate, but that doesn't mean that it's
useful for styling or UI overlays. One of my jobs will be to offer
improvements on the XHTML that Drupal spits out with documentation on
how to leverage the code for easier and simpler styles.

Lastly, the themeable functions are a tremendously underused tool for
themers, both on the theme side and in many modules. There is a lot of
potential for reducing CSS bloat if themers could make more changes to
the XHTML to better serve their purposes.

On the other hand, the CSS bloat that you talk of is also a good
trend, in my opinion, because it means that fewer and fewer images are
necessary to make a site look good. Even with the new CivicSpace theme
and the additional weight of the CSS, there are fewer hits to the
server because the homepage and secondary navigation, including hover
states, is accomplished with only two images. Previously, there would
have been six separate images per navigation scheme, reflecting a
heavier server load, heaver html for the layouts (I'm using a simple
unordered list with links) and more time to update and maintain both
the code and images.

Again, I do agree that the issue of CSS bloat needs to be addressed,
but I also think that we need to realize that CSS is like the new
image slicing technique for the web -- more CSS will eventually mean
fewer images and eventually, less html too, reducing the *overall*
weight of a site.

Chris


On Sat, 12 Mar 2005 16:50:09 -0500, K B <kbahey at gmail.com> wrote:
> On Sat, 12 Mar 2005 16:46:52 +0100, Richard Bennett
> <richard.bennett at skynet.be> wrote:
> > On Saturday 12 March 2005 14:33, K B wrote:
> > > I previously reported this, and it is not only true for CSL themes,
> > > but is a general trend now.
> > >
> > > For example, using pushbutton on my sites, the two css files
> > > (style.css and drupal.css) amount for about 20% of my total bandwidth.
> > > As an example, February stats show, 11.84% for style.css and 7.61%,
> > > for a total of 19.45%
> >
> > Normally this is negated by the fact that CSS files are cached by the browser,
> > so they are only requested once per session.
> > Could it be that using the no-cache headers means css files are now no longer
> > being cached? This could explain an increased bandwidth use.
> 
>  I have been told that before, but I do not think it is true. I have
> checked the logs on a mirror copy of my site locally, and saw that the
> web server logs get 304 on both css files, meaning that the browser
> does indeed cache them.
> 
> Perhaps it is my sites nature that they get more unique visitors that
> returning ones, but the fact remains true that the css files form 20%
> of bandwidth for Drupal.
> 
> Prior to that theme, I used a modifed bluemarine stylesheet and things
> were not as bad.
> 
> If you compare pushbutton to some of the newer themes, those new ones
> are more bloated.
> 
> I was contemplating editing the style sheets, partially using a
> script, to remove all unneeded whitespace and newlines. That would
> make them less readable, but should save some bytes.
> 
> I guess the best solution is to gzip the style sheets too.
>