Is CSS a black art?
Posted on by Steve Workman About 3 min reading time
Recently, I've been asked a lot of questions about CSS and my commitment to it. I'm a purist when it comes to the web. I firmly believe that the only way to create a web site is to use standards-compliant CSS that is cross-compatible with all major browsers. Javascript should only be used as a progressive enhancement technique and should certainly not be relied upon (yes, I'm looking at you ASP .NET). Most of my colleagues regard this stance as noble, but somewhat stupid in the "real world", where it's not always getting it done "right", it's just getting it done. Why is CSS considered such a black art?
Cascading Style Sheets are a mystery to most programmers. There's nothing object-oriented about it, there are no methods, no variables, just a series of properties attributable to classes, identifiers and HTML elements. Such a simple thing can hardly be described as a programming language, and it's not exactly difficult to pick up, there is a definitive resource at W3Schools, excellent tutorials at professional sites like sitepoint, and hundreds of blogs (like this one). It's a simple markup language, what's so hard about it?
Well, in principle it's all roses. Take your basic elements, set the fonts, colours, padding and positioning. If you want, set a background image, it makes everything much prettier. However, great site design certainly isn't as easy as this. It takes well laid out simple elements or well laid out beautiful graphics, and it's making those graphics look beautiful with CSS that's the hard part.
Because CSS is a markup language and it is "just that", positioning complex lists, understanding floating elements and the use of the box model can be annoyingly tricky, especially when dealing with IE6. Using properties to control web elements that don't perform the same on every browser is the principal reason why CSS is a black art. If a regular programmer can tell you exactly where a CSS positioned element will end up on every browser first time, they're lying. Principally, it's the work-arounds that get to developers. Having to have conditional styles, or negative margins to control where an element will end up (cross-browser) can be incredibly frustrating, especially when you get it working for firefox then it's still broken in safari/opera. By this time, most developers have given up.
Most of the developers at my office code by hand, some use the visual editor to create their pages. This is great for them, it increases their productivity and makes life easier, giving them more black boxes instead of having to know about every component, but this can introduce a lot of extraneous code, like tables and extra paragraph tags. ASP .NET is very bad for this, most of their pre-built elements use tables. Some, like the Login control, insert a table into the markup even when you ask to lay out the control yourself! Creating CSS that works in all of these situations, where pages are marked up differently, is a very hard task where you are constantly fire-fighting, making new exceptions for dodgy markup. Developers blame CSS for this, when it is the browser, and the markup that should be blamed (though it's alright to blame ASP too).
So, is CSS a black art? Well, if you don't know the work-arounds, it's going to frustrate the hell out of you and it's more than likely that you will give up, go for inline styles and tables. If you have the patience for it, and want a pure web experience that loads fast, looks amazing, and you'll be able to completely change the look of a web site just by switching stylesheets.