CSS Strikes Again

Why does Web development cost so much? One cause is CSS!

CSS, Cascading Style Sheets, are supposed to save you money by removing styling from Web pages and placing the styling in common files you can reuse anywhere. Except CSS does not work...

Standards

CSS is based on written standards but the standards trail behind browsers which means you are continually using non standard CSS to perform every day work and those non standard bits work differently in the few Web browsers that support those bits.

The standards are often not standards, they are only recommendations or draft recommendations and the Web browser developers have to guess what will progress from draft to recommendation to standard.

When the recommendations do become standards, they are still worded as vague recommendations. The equivalent on the road would be be a law that said We would like everyone to drive on the same side of the road so there will be fewer car crashes and it is up to each driver to decide which side of the road is the preferred side.

Tests

Look at the good application development projects, both open source and proprietary. They define test cases before writing code. The CSS standards do not attempt to define test cases. They wait until a major Web browser developer releases a Web browser then, occasionally, say You are wrong. By the time the CSS standards developers say anything, tens of millions of people are using the browsers and we have to wait three to five years before they move to a new computer and a new Web browser.

Logic

There is lovely page titled Internet Explorer box model bug that describes a fault in the CSS standards and it shows an example of what happens, not what should happen. At one time the CSS standards writers described what most Web developer call the CSS box model but the CSS standards writers forgot to define how the basic dimensions of the box are defined. Microsoft used the basic definition that almost every designer and Web developer used, the width and height of the box based on the border of the box. After an estimated 200 million Web sites started changing to CSS using what all the Web developers, designers, and Web site owners understood and agreed on, the CSS standard writers announced a different way of calculating the dimensions of a box plus they announced it very quietly so that very few designers or Web developers know what the new revised different way of calculating the size is. Hence there are hundreds of thousands of pages on the Web where people ask why their Web pages no longer work.

They ask why the pages are right in Internet Explorer and wrong in Firefox. They are told Firefox is right and Internet Explorer is wrong. They are not told that the standards used to have a great big hole in the middle, Microsoft made an intelligent guess about what should fill the hole, then a long time later the hole was filled with something that did not fit. They are not told that the standards compliant browsers, the ones they claim are doing the correct thing, were not standards compliant because there was no standard in that area. They are not told that the standards compliant browsers used to do all sorts of weird things in that area. They are not told how to provide input to the standards writing process so that sort of stupid decision is not made again.

Cost

Today I spent six hours working on CSS to do something that should take less than 10 minutes. This is typical of CSS. You work for hours on things that should take hours then something that should take minutes ends up taking a whole day then breaks a few times with each repair using another day or two.

Examples

On one CSS based theme, I made a slight change to the left hand border of an element. The change had absolutely nothing to do with text, fonts, or character spacing. The text in the element changed size and spacing. Amazing. Back to car analogies. Think of a car where turning left also opens all the windows. think of anything really stupid. CSS is full of holes where changing the size of one thing changes the size of something unrelated because the Web browser developers did not know what to do and there was nothing in the standards to guide them.

You can use negative borders to make elements overlap but the negative borders often have to be a completely different size to the overlap you want.

Search for CSS, division, and width. There are millions of pages describing how to force Firefox to expand and element to full width. I recently wasted most of a day trying to make an element not expand to full width when displayed in Firefox. The difference might be that I am using the most recent version of Firefox but is most likely caused by the weird interaction between HTML elements in CSS. The element I was trying to shrink back to normal size could be controlled by a totally unrelated element. In the end I made a lot of changes all over the page then one of my earlier experiments worked.

Lets go through that again. I could not make a division element display at normal size. For no visible reason the element expanded to 100% width. I tried a dozen experiments known to cure the problem in some circumstances. None of them worked. I restructured the page and the CSS then tried the dozen experiments gain without success. I restructured the page, the HTML, and the CSS again then tried the dozen experiments gain without success. After several loops through the process, one of the dozen experiments suddenly worked. Somewhere in one of the many restructurings, I removed whatever was causing the problem but it was nothing related to the broken element.

Support old browsers

Designers tell you that browser X is too old to be worth supporting. No one uses that any more. They quote statistics that are wrong because the statistics are based on surveys of sites you can only use if you have the very latest browser. Lots of people use those old browsers. Lots of people use browsers that are new but break at the same places as those old browsers. You will not get a complain from those hundreds of millions of prospective customers because they can easily find others site selling that same things and some of those other sites work with their browser.

Flash

Some Web developers push you away from CSS and towards Flash because they want Flash experience on their resume. Flash just makes diagnosing and repairing problems many times more expensive plus it turns sway more prospective customers than CSS because a CSS failure only makes your Web less pretty while a Flash failure makes your Web page totally unreadable.

Conclusion

CSS is a random collection of ideas pushed together in unintelligent ways and poorly documented. To make matters worse, it is not getting better with each new version. It is expensive to implement and expensive to maintain. Allocate huge resources to systematic testing of CSS before you spend a cent on CSS.