// you’re reading...


Why CSS Sucks

1. CSS has no concept of what a real layout specification is. Geometric offsets are often unnecessarily hardcoded.

When people hype CSS over the html Table, I think they do not understand the functionality that the Table brings to the table. I think they do not understand the history of hard-coded coordinates versus automatic layouts. It is called ‘dynamic resizability’. You can set the minimum and maximum distance in a table and have the table resize based on the size of its container.

Not so CSS, which hearkens back to the bad old days under MSFT Windows.

So often, when the viewer of a page of CSS resizes their font, so that they can read the text, it overlaps itself and nearby text and images. How quaint.

2. CSS mixes layout and appearance, and soon in CSS 3, behavior.

Right now, common practice is to put everything into one CSS file, so if you want to add a new skin appearance, the new skin has to duplicate layout, and soon, behavior information along with colors and font sizes. Or what if some skins are behavior-specific, for example with and without javascript support.

You can see where this is leading… we will need an object-oriented CSS, that supports packages so that the CSS ‘programmer’ will be able to manage the complexities.

So what we will end up with is html elements that have several pointers (or ‘tags’ if you wish) that each refer to either their appearance, layout or behavior aspects. And to make it a little more sensical, the CSS behavior should just be a binding to javascript or PHP [update: or Ruby!] or something. And while we are at it, might as well add a tag for the content to permit dynamic content.

So what we will have at the end of the road, after we get through this adolescent infatuation with toys that mimic the good old days of Windows 95 et. al, is:

HTML Element

  • Appearance id
  • Layout id (we are talking springs, struts, tables, and dumb margins only if needed)
  • Behavior binding id (i.e. onclick boundto store_data)
  • Implementation id (the javascript file location with a store_data method)
  • Content id
  • Importance quotient id
  • Semantic meaning id
  • Help id

3. It is more difficult for search engines to determine what is being done to the content which they must know in order to see what is of importance on the page.

No, the emphasis tags really do not take the place of this analysis, because ‘really’ is really not what this post is all about.

4. CSS is overly powerful

For example: font-size is multiplicative (if another element and its child both have font size 8em, then the child will be 64em).

The law of against designing a language that has numerous unintended consequences has yet again been violated, very much in the spirit of C++. You cannot just look at a piece of code and know what it does without CLOSELY examining the N^N-1 possible consequences of all other assignments in this and any included files.

Similarly for the overly broad assignment such as:

.class a

which assigns ‘a’ some style which has every chance of having been assigned at least one other style somewhere else in the CSS hierarchy. Maybe. Which came first? in which file? And how did that precedence of CSS assignments go again?

So in conclusion,

CSS has the mishappen non-structure of assembly language [although I like the limited instruction set of asm languages, so this is an insult to them], the syntactically over-powering ‘why use a hammer when an atom bomb will do’ approach of C++, with the spaghetti-inducing compression of responsibilities and nostalgic lack of runtime layout tools of pre-Java MSFT Windows.

…aka CSS sucks.

[Oh, and it would be nice to see a syntax/completeness checker tool. But I bet that would just add another layer of incompatible implementation to deal with on top of all the others] [Update: FireBug does help some, tracing all the inheritance trees for you. Does no one else see how wacko this is? Yet another specification that tries to be too many things].


One comment for “Why CSS Sucks”

  1. CSS could also use namespaces.

    Yes, they will be abused the same way all namespace functionality is, adding needless complexity.

    But, for example, merging this blog’s style with the containing websites style required either 1) changing the names of some of the rest of the website’s styles - or 2) duplicating them to make the names unique, both so we could use them here so this would ‘look like’ the rest of the website. Who knew that ‘header’ and ‘footer’ are common names for CSS styles? ;-)

    And let’s admit it, even with namespaces, CSS is multiple-inheritance hell, where one does not even have C++’s ‘nice feature’ of having all the super-classes declared at the time the class is declared. Instead, one must search all the styles looking for a td or a div inside one of the dozen or so containers the offending element is in.

    And there is not even a decent ‘override’ functionality. Sure it CAN be done. And we CAN stick a few extra IDs in here and there. And it will only be a LITTLE harder to read. And it is only a teeny weeny kludge. And there ARE tools.

    A first year programmer, when I asked him how he liked building a website for one of hist first customers, mentioned that there weren’t, essentially, any variables in CSS. The problems are this obvious. The idea is that scattered throughout the stylesheet one often has several dozen ‘color: #00B’s, for example. Yes, one CAN create a new class, and sprinkle it throughout the HTML file - but that is kind of - well, different. In the limit, this pattern would have each element assigned several classes: one for font, color, width, column, background, face, etc. This actually makes some kind of sense, but it sure clutters up the HTML. Variables would make this all cleaner… ‘color: $DARK_BLUE’. Course, one could always use a preprocessor to effect this feature [no, NOT cpp :-)].

    Anyway, we ARE stuck with this for some time. At least until we come up with a much more elegant solution that some tool can convert to CSS for backwards compatibility. Anybody for a new Domain Specific Language [the Domain being the Internet]? CSS++? CSS.ERB?

    Posted by Michael | March 30, 2008, 8:37 pm

Post a comment

You must be logged in to post a comment.


canadian online pharmacy FDA CIPA approved cialis super active online U.S. manufactured online pharmacies ~{:# cialis soft use patients to once again. FDA approved Canadian drug pharmacy *?( Canadian pharmacy delivering medicines at your door.