Christmas Bird Count history report system

The principle of separation of concerns, applied here, implies that styling of an element should be done by the entity most directly concerned with that level of structure.

This problem arose when styling rows of the detail table so that certain rules are thickened in order to group cells visually. In practice, styling that pertains to a specific cell is applied by the class that represents that cell. For example, Section 42, “class CensusCell: Accumulator for counts of individual birds” applies the characteristic background color to census cells.

Styling that is managed at the next higher level is applied there. Because instances of the CensusRow class manage the construction of the entire row, that is where row-level decorations should be applied, such as thickened horizontal rules above some rows, and thickened horizontal rules between some columns.

We assume a minimal CSS-2 rendering. In particular, we assume that browsers can deal with elements that are marked up with multiple CSS classes.

Your author is not in complete mastery of the rules that apply when two style features collide (e.g., two different classes specify a background color).

However, this feature is mainly used to make certain ruled lines between table cells thicker, and in that case the relevant principle is that more specific styles have priority over more general styles. In particular, if a table cell has one rule for “border-width: 1px 1px 1px 1px;”, but another of the cell's classes specifies “border-left-width: 3px;”, the left border will be 3 pixels thick and the rest will be 1.

Given these principles, how do we combine multiple CSS classes for the same XHTML element when they are applied at different locations in the code?

The convention we adopt is that the .html() method for the lower-level (contained) element accepts an optional argument addCss that supplies zero or more additional CSS classes that are applied to the generated element, in addition to any classes that are always applied to that element.

The addCss argument follows the convention discussed in Section 14.2, “class-dict”. You can construct a class-dict item for a single class using et.CLASS(). CSS classes from any number of class-dict items can be combined using Section 59, “combineCss(): Combine CSS classes from different sources”.

For example, a call to the CensusCell.html() method will normally produce a td element with a class='cc' attribute.

Now suppose that a particular cell is the first cell in a group of columns (that is, the column number is an exact multiple of COL_GROUPING), so we need to thicken the left border to set off the column group visually.

The CSS class that thickens the left border is 'cl'. So a call to CensusCell.html(addCss=CLASS('cl')) would produce a td element with class='cc cl'.