systematic-css

Widgets will, of course, inherit the default properties of the element types that are includedin their markup. Those default styles are then changed and extended on a widget-by-widgetbasis. Sometimes you might want to reset some inherited properties. For example you mightwant to change the default color and text-decoration values for elements when theyare used in the NavBar widget. A few little overrides like this are perfectly acceptable. But ifyou catch yourself doing lots and lots of resets, consider applying fewer default properties toelements via non-qualified type selectors (see "Elements" on page 40), so that less stuff isinherited by widgets.Ideally, widgets and modifiiers should progressively enhance the defaultpresentation of HTML elements, not regressively degrade them.Widgets work best when they are quite abstract. A "ComparisonTable" widget would bepreferable to a "PriceComparison" widget, since the former could be reused to compare thingsbesides prices. The more abstract the widget, the greater the opportunity for reusing it fordifferent things.The relationship between widgets and layoutWidgets should be designed to fit 100% of the width of whatever container we put them in.If you want to float a widget to the left or right side of its container, or if you want to applyfixed or absolute positioning to a widget, better to wrap the widget in a new layout section andposition that instead.Avoid using semantic sectioning elements – , , , ,, , and – either within or to encapsulate widgets. Theseelements should be reserved for layout sections. Widgets may be contained in generic divider() elements or any other appropriate block-level element such as a , or evena .PrevWidgets 47