Dynamic Web Development with Seaside

7.8Style Sheets

The visual design of most modern web applications is controlled with Cascading Style Sheets (CSS). Seaside provides a simple method to add a style sheet to a component. Override the WAComponent>>style method in your component to return a CSS style sheet as a string, for example as follows:

ScrapBook>>style
^ 'h1 { text-align: center; }'

Now, refresh your browser and you should see a centered “Hello world”. Bring up the halo on this component and click the pencil. Notice that you can edit the component’s style method here. If you save your changes then the component’s style method will be updated.

Use of the WAComponent>>style method is discouraged for anything but writing sample code and rapid development while experimenting with component styles. There are several reasons for this:

  • It places too much emphasis on presentation at the component level and makes it difficult to reuse components in applications with a different “look”. The same motivation for having XHTML separate from CSS applies to separating style documents from components.
  • Having many small style methods increases the load time of your pages. Each WAComponent>>style method is loaded as a separate document.
  • Having a style method at the component level may give you the false impression that this style only applies to that component. In fact, CSS style sheets are loaded in the XHTML head section of the document and apply to the entire document, which means you have to be careful to get your CSS selectors right. It can be very difficult to track down an errant style selector when it is hidden in a component.
  • It makes it more difficult to work with other non-Smalltalk developers to style your documents.

As you work through this book use the style method but keep in mind that a more complex application would use an external style sheet as described in Chapter 8 or file library style sheet as described in Chapter 17.

If you’ve used CSS regularly then you’re already familiar with using div (block elements) and span (inline elements) with the class attribute to help you select specific parts of a document to style.

Here’s how one would, for example, give a red background to error text:

ScrapBook>>renderContentOn: html
" code from previous example "
html span
class: 'error';
with: 'This site does not work yet'
ScrapBook>>style
^ 'h1 { text-align: center; }
span.error { background-color: red; }'

This book is not about XHTML or CSS but Chapter 8 provides a quick overview of CSS. We do have a few suggestions:

  • Use span and div with CSS classes to mark content generated by your components. Quite often, components render themselves entirely within a div whose CSS class is the name of the component’s Smalltalk class. This makes it easier for CSS developers to locate the XHTML elements that they want to style. Come up with conventions that work for you and stick to them.
  • Your component’s renderContentOn: method should be simple. Do not include style information, otherwise it will be difficult to customize the way in which your component is displayed.
  • Your component’s renderContentOn: method should be short. If your method gets longer than a couple of lines create intention-revealing helper methods following the naming pattern renderSomethingOn:. This is especially useful if you start to use conditional statements and loops. This technique will also allow you to override certain aspects of the rendering process in subclasses of your component.
  • Use component style method only when the style elements are very specific to that component. Otherwise use style libraries as discussed later in Chapter 17.
  • Try to use style sheets to structure your document’s overall presentation, rather than XHTML tables. There are many good CSS references which show you how to lay out pages.

Copyright © 19 March 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.