General Notes

On CSS code style:

In trying to optimally ease scanning styles in use, making the files too vertical is a real liability. So, instead, let's go for a meaningful order, while preserving indent structure. Start a new line for each category present, use the same order within a category. Here's my current scheme. It is working surprisingly well for me, but I'm very open to modifications/refinements/etc.

1. visual formatting model: display, position, offsets, float (+clear), width (etc), height (min/max), overflow*, line-height (+vertical-align)
2. box border model: margin, border, padding, ...
3. font-family and font styles
4. text styles
5. colors/backgrounds
6. tables and related styles
7. other

About lengths (pts, ins, cms, pxs, ems, exs, %, etc):

• Using ems to specify lengths rather than pxs (let alone pts, ins, cms, etc) for display skins provides the best support for stylesheets used for a variety of accommodations (not just visual impairments. The more pure this approach, the better the twiki will be at smoothly adjusting. All lengths: font-sizes, widths, heights, margins, paddings, line-heights, borders, etc. If at all possible, use a fluid layout rather than spacers.
• To make fluid layout as robust as possible, only use percentages when absolutely necessary (e.g., setting the width of some strategic containing blocks to 100%). Rather than setting a child as 50% of an element, for example, calculate the expected em of the child, set that as the width, set the other child to auto, and the enclosing parent div or table cell to width: 100% with appropriate margins and/or padding.
• When using relative lengths, keep in mind that children inherit the computed value of the parent WITH SOME EXCEPTIONS. If you use %s and use the inherit keyword, some properties inherit the percentage, not the computed value. See section C.2.28 of the Candidate Recommendation for CSS 2.1. If you aren't completely comfortable reading the specs and processing all of the info, don't use percentages at all other than 100% for the enclosing block.

On CSS class names

• Preferentially, all CSS class names should be based on what the content of the class means o the community member (e.g., .toolListTitle). A relatively few structural layout classes should be needed. Right now, as we are transitioning from NatSkin, most of the classes are inherited from NatSkin and so are structural layout classes (e.g., .natSideBar or even more confusing .natMiddle which often is not in the middle!) Differentiate carefully when to use what, and make comments with your reasoning.
• At present, because we are overriding NatSkin, there are a lot of legacy class names.
• Track at least one place where class names are used (or documented for use), as there appear to be lots of class names no longer in use. We aren't immune to the traps others have fallen in, so let's learn from history.

On inheritance

Since inheritance varies by property, we list properties used in each style sheet that do not inherit in the header comments for local reference. See AhatStyle.css for a fairly comprehensive list of Ahat/AhatTWiki.AhatSkin related styles that do not inherit. Note that universal selectors are invaluable in setting values for non-inheritable properties, however, you have to be careful and restrict them by class name so that they don't affect elements you don't want them to affect. Also, remember that the universal selector has a specificity of zero.

Ahat/AhatTWiki.AhatSkin Css files:

• AhatStyle.css - main style file for Ahat/AhatTWiki.AhatSkin. includes the following three style files. Note that includes must come first, so are processed before all other styles in AhatStyle.css itself.
  • AhatBaseStyle.css - at present, the same as NatSkin's BaseStyle.css file, but will change momentarily. Also contains several browser reset commands at the very beginning.
  • AhatBaseStyleOverrides.css - contains overrides styles from AhatBaseStyle.css as follows:
    1. change lengths from pxs to ems (font-size) and exs (x-height) to facilitate accessibility
    2. change interaction design elements to use our own design
    3. change many internal width: 100% to width: auto to facilitate floating layout
  • AhatBasePlugins.css - contains styles associated with plugins, including overrides of styles from AhatBaseStyle.css

-- HilaryHolz - 27 Jul 2008