Friday, December 16, 2011

CSS Grammar Considered Wrong

I get a little nit-picky every time I look at CSS.
Take the way that the media queries spec handles dimensions like width and height. They couldn't just say "width", no, no, that would be just too easy. Instead they say min-width, width, and max-width.


Flea microphotograph

CSS grammar is meant to be declarative, but that's not the reason for using prefixes. The CSS media queries section on media features tries to explain the rationale:

Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.

Never mind that CSS selectors already use the greater-than symbol. The grammar has gotten land-locked, but it has never used commonly accepted notation for mathematical expressions. You know, expressions such as:

width: (160,320)   (interval notation)


160 < width < 320   (set builder notation)


(160..320,true).include? width   (Ruby, using a range)


width BETWEEN 160 AND 320   (SQL)


Whatever. The nit I'm picking is not that the CSS editors have had to work with what they've inherited.

Whether an historical accident or pragmatic contingency, using prefixes (min-, max-) on property names as grammatical substitutes for logic expressions (>=, <= respectively) constitutes a multiplication of entities way beyond necessity. Instead of one property (width) within two scopes (logical and device), CSS presents us with:

width


device-width


min-width


min-device-width


max-width


max-device-width


aspect-ratio   (CSS pixel width/height)


device-aspect-ratio


min-aspect-ratio


max-aspect-ratio


min-device-aspect-ratio


max-device-aspect-ratio


orientation  (width > height ? landscape : portrait )

Them's A DOZEN MORE properties, baby.
That's just for one stinkin' property, so don't be callin' me all pedantic on this.   If y'all leave nits alone they grow and soon enough you find yourself infested with lice. (Not that I have any experience with lice.)




The gratuitous prefixes don't make the resulting media queries any more elegant to express:

@media screen and (min-width: 160) and (max-width: 320) {
  stuff {  goes: here;  }
}


The problem is that CSS uses a fixed set of discretely expressed predicates for continuous and dynamically varying values. What I want it to say instead is something more along the lines of:

@media screen and (160 < width < 320) )   {
  stuff {  goes: here;   }
}

or
@media screen and (width: range(160..320) ) )   {
  stuff {  goes: here;   }
}


CSS is what it is and for better or worse this design choice passed through the editing and public commentary process intact.  Other efforts can still learn from its missteps as much as its successes.  Injecting special-case grammatical devices is an easy way to make a language available early but injecting them often will turn even a greenfield language into yet another Rube Goldberg device. As a device, CSS has more than a little Rube Goldberg in it. 
Post a Comment