Suitcase Fusion 3 User Guide for Mac OS - Extensis

Rules with nuance
These rules come from experience: once explained they are reasonable enough but aren’t necessarily obvious at
first.
• Name classes for their function, not their property values.
If you name a class Big_Red_Arial, then when you change it to use Times New Roman in green, you
won’t know what’s going on in your CSS, and neither will anyone else who reads it. If you name your
class Additional_reading_header then it won’t matter what the color or font is; it is always going to
be used for the same function.
• When you apply a color to an element, think about the need to change its background color.
Yellow text is not as readable on a white background as it is on black. This will become evident if you
make the habit of previewing your pages and testing your CSS, but if you think about it in advance, you’ll
be more aware of it when you look over the results of your handiwork.
• Test your CSS and HTML in multiple browsers.
If you look at your pages in only one browser, you may miss idiosyncrasies of display in other browsers.
You may also inadvertently “fix” your CSS and HTML to work only in your specific browser.
Advanced CSS strategies
These are not necessarily things you’ll need to implement immediately, but may consider them as you become
more comfortable with CSS and explore more advanced features.
• Use a browser reset CSS.
Browsers have default settings for all elements; that’s why they can display a page even with no style
sheet applied. You may find that some browser defaults are causing your page to be displayed in a way
you didn’t expect. To avoid this, some developers use a “CSS reset” style sheet that sets all element
properties to a known state, then add their specific styles after the reset.
• Use a debugger in your browser.
Many browser have built-in or add-on debuggers available, that can show you how your CSS is being
interpreted for each element on the page. This can be invaluable in figuring out why something doesn’t
look the way you thought it would.
HTML
• Use tables only for tabular data.
It is sometimes tempting to use tables to force a page to have a certain layout. While you can pretty much
guarantee the page’s look, changing it becomes much more difficult. CSS makes page layout much
easier to do and much easier to change, and allows you to implement similar layouts on multiple pages by
defining elements in one place.
• Create your HTML first, then your CSS.
You’ll save time by creating your HTML (at least a mockup) first. This way, you know all the elements of
your page, and can think of the page as a whole and create the CSS based on the entire page, not
piecemeal.
• Use a DOCTYPE.
And use the right DOCTYPE. HTML without a DOCTYPE is subject to what is referred to as “quirks mode.”
The DOCTYPE tells the browser how to render the page; without it, the browser will make a guess at how
to render it. If the browser guesses incorrectly, your page may be unreadable to some visitors.
Fonts
• Use a font manager (such as Suitcase Fusion 3).
This helps ensure you have fonts installed properly and that you aren’t using corrupted fonts. It also helps
you test your CSS fallback stacks; you can disable a font and make sure the next font in the stack is used
instead.
- 82 -