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. EachWAComponent>>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 XHTMLhead
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
anddiv
with CSS classes to mark content generated by your components. Quite often, components render themselves entirely within adiv
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 patternrenderSomethingOn:
. 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.