|useit.com Alertbox Jul. 1997: Style sheets|
Jakob Nielsen's Alertbox for July 1, 1997:
Always use linked style sheets rather than embedded styles. Only by referencing an external file will you get the maintenance benefits of being able to update the look of your entire site with a single change. Also, by pulling style definitions out of your pages, you make them smaller and faster to download. If you use a single style sheet for your entire site, that file will be a single download once and for all.
For each site, all the style sheets should be designed by a single, central design group. Two reasons: First, centralized design is the only way to ensure a consistent style and reap one of the main benefits of style sheets. Second, the majority of Web content creators are not capable of designing and writing good style sheets. Experience with word processors that support style sheets indicates that most authors mangle their style sheets terribly. Understanding the effect of style is relatively easy in traditional desktop publishing because it is a WYSIWYG environment with a single, canonical output form. The Web is not WYSIWYG because of the variability in supported platforms. Furthermore, Web stylesheets are cascading, meaning that the site's style sheet is merged with the user's style sheet to create the ultimate presentation. These differences make it important that Web style sheets are designed by a specialist who understands the many ways in which the result may look different than what is on his or her own screen.
Fund an active evangelism program to teach your content creators how to use the centrally defined style sheet. Do not assume that people understand the concept of style and how to apply it, simply because they know a word processor with style sheets. Research shows that most users make horrible mistakes in using word processing style sheets: partly because the main word processors have particularly bad style sheet usability and partly because style is hard. Your style sheet should come with a small manual that explains the different styles and when and how to use them. Include plenty of examples, including both raw HTML code (cutting-and-pasting examples is the main way people use documentation) and screenshots of the appearance of correctly coded pages in several mainstream browsers on several different platforms. The screenshots should be made into clickable imagemaps, allowing users to click on an effect they want to achieve and get to the documentation for the appropriate styles. In particular, if multiple styles have similar appearance, many errors can be avoided by explaining the differences and when to use which style.
Despite my preference for linked style sheets and central design, individual page authors should be allowed to create additional embedded styles for their own pages when necessary. Authors should be encouraged to only do so when absolutely necessary, but there will always be cases where a certain style is needed that is not supplied in the central style sheet. If many pages need the same effect, it should be added to the site's global style sheet, but it would be bad to inflate the one linked style sheet with styles that are only needed once. Single-page styles should be embedded rather than linked: the page should continue to link in the global style sheet and then override it with local, embedded styles as necessary. Doing so has the benefit of allowing future changes to the central style sheet to propagate to the modified page to the greatest extent possible.
computer code). Remember the lesson from the early days of desktop publishing: using a lot of fonts simply because you can will result in a ransom-note look. Typically, you can use one typeface for body text and another, bolder, face for headings. Note that it is fine (indeed, recommended) to use a long list of alternate fonts in the style sheet specification for a given class of text: the user's browser will pick the first available font in the list and use it throughout your pages, meaning that the user will see a single font, making the site feel typographically unified. It is important that lists of font names have the fonts listed in the same order, since the browser picks the first one it has available.
!importantattribute to override the user's settings. It is hard to imagine cases where you are justified in ignoring the user's preferences if the user felt strongly enough to use his or her own
!importantshould be reserved for user style sheets.
Data nugget: During the first two weeks of July, the ratio between the referral commissions earned from Amazon.com for books ordered through the above link and the number of readers of this column comes to a value of 4.5 cents per page view. Not enough to get rich (and I recommend the book because I like it; not to earn a few miserly cents), but proof that micropayment mechanisms can be more valuable than advertising (which typically pays 1-2 cents per page view).
See also: List of other Alertbox columns