Google Blogoscoped

Tuesday, March 2, 2004

Common CSS Pitfalls

While the intent of CSS is to separate content and layout (making for smaller HTML – something Google likes, too), and thus make Web developer life easier, it can also be misused.

Sometimes web authors use layout-based class-names like “upperLeft” or “BIGRED”. These do not actually put the layout specifics out of the structural HTML, as later changes are more confusing to implement – the author might want to turn BIGRED into BIGGREEN, and has the option of either misusing the class BIGRED to display a green font, or going back to hundreds of HTML pages to edit the class-names.

Another problem are unspecified, undocumented, and often forgotten class-names. A web author may have hundreds of different needs; sometimes, the class is called “footer”, sometimes “footnote"; at times it’s “explanation”, at others “note”, then “info”, then “more”. This way, redundancy creeps in. Often an author of many complex websites might rely on inline-styles to solve this problem; inline-styles however again glue together content and layout, and are media-dependent (a big bonus of external stylesheets is their media-independence, as different styles can be referenced for different output media – something not possible with inline-styles).

Complexity of HTML is another possible problem. While most HTML which separates itself from the layout world will be much more lean and clean than traditional redundant table-layout, overuse of classes and nested divisors can lead to almost the same “garbage HTML”. Then, there’s the overuse of divisors (which don’t have semantics of their own, just like CSS classes or IDs) – a div-element with the class “header” is naturally not to be preferred to a h1, h2, or h3 element, yet we often see similar things being written.

Yet another pitfall is a workaround to solve common CSS or browser-implementation short-comings by using so-called “CSS hacks”. Even though these hacks serve a specific need (to exclude a certain browser from a stylesheet, to please different resolutions, and so on), their implementation and maintenance cost might be higher than traditional pre-CSS HTML methodology – table layout, font-element and so on. (The only good thing about those CSS hacks is they don’t re-appear in thousands of pages but instead are in one or two CSS files.)

Lastly there is a tendency of CSS designers to mistake the layout easily to be achieved with the layout a reader might prefer. Several CSS selectors allow specific border styling, yet that doesn’t make a border and box heavy web design better to look at per se. Because we can does not mean we should. And one of the most misused CSS styling certainly is such trickery as removal of link-underlines. It’s easy to implement, yes; but the trouble for average visitors might be heavy. (Extra-small and hard-to-decipher font-sizes on the other hand have been around before stylesheets.)

[German] Spiegel on Wikipedia

The German Spiegel reports on Wikipedia, the open, user-edited Web encyclopaedia (“wiki” is the Hawaiian word for “fast”):

“Inzwischen gibt es die [Wikipedia] Enzyklopädie in mehr als fünfzig Sprachen. Polen, Chinesen und Katalanen arbeiten je an eigenen Angaben – nicht schlecht für ein Unternehmen, das erst im Januar 2001 begonnen hat. Bei der Netzgemeinde sind seine Auskünfte offenbar schon hoch geschätzt. So kommt es, dass Artikel aus der “Wikipedia” bei Google in zahllosen Suchanfragen unter den ersten Treffern landen – was der Enzyklopädie stetig neues Laufpublikum zuführt. (...)

Selbst der kleine Artikel über den “Gerichtskostenfreistempler” musste sechs Versionen durchlaufen, bis die Gemeinde zufrieden war. Oft sind es nur winzige Korrekturen, ausgeführt von den vielen Helfern, die sich eher zum Textgärtner berufen fühlen: Sie stutzen Wildwuchs, bringen Gliederungen in Form und jäten vorm Schlafengehen noch schnell ein paar unsinnige Apostrophe.”
– Der Spiegel, Nr. 10, Rapunzel bis Regenzeit (p. 175), March 1 2004


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!