Suggested CSS Usage
From PeopleAggregator
Contents |
[edit] SEMANTIC CSS
Use the cascade, Luke
Imagine the following (very common) scenario: One block of re-useable HTMl needs to be displayed in different contexts. Now instead of re-defining all the class atributes of the HTML tags involved (in the PHP/HTML code AND in the CSS styles) consider the 'cascade' part of cascading style sheets: You can use the ID or CLASS attribute of an ENCLOSING HTML tag to select different styling for the embedded HTML.
Example: <style> .parent-box {border: 2px solid red;} .inner box {padding: 5px; color: blue;}
.parent-box2 {border: 2px solid blue;} /* instead of defining a NEW class for inner-box */ .parent-box2 .inner box {color: red;} /* also notice, we ONLY change what NEEDS changing,
- and don't repeat what stays the same
- /
</style>
[edit] Group before you copy
In the above example this was already touched. Do not repeat things that don't change. If there are a number of style rules common to a lot of classes, try grouping them. And then override with a new definition per class what needs to be different:
.text, h2, p, li { font-family: Verdane, Arial, sans-serif; color: black; padding: 3px; margin: 4em; } h2 { font-size: 2em; color: red; } li { list-style: none; margin: 0; }
This obviously can be combined powerfully with the CSS cascade. You can specificaly override certain styling rules (color, size, etc) depending on the ENCLOSING HTML.
[edit] Cumutative class attributes
Don't forget that the class attribute is a space seperated LIST of attributes. You can 'on the fly' modify a certain HTML element that has a base class applied by adding in another class identifier:
The resulting style will be a 'mix' of the two classes '.text' and '.special'. But be careful: all the rules of inheritance and importance of CSS apply. Try not to overuse this feature, it can have unpredictable (counter-intuitive) results when the two class definitions 'combat' a certain rule. The more specific rule will win. The cumulative class approach works best when the classes involved define or change specific styles that the other classes don't define.
[edit] Styling and Layout
You can sort CSS style sheet definitions into two rough categories: Layout (padding, margin, position, display) and styling (color, font, background)
In some cirumstances it can make sense to keep these two seperate. Styling changes usually do not have big consequences on the page layout. But things like position, margins, borders etc can wreck a CSS page overall easily. It makes sense to 'protect' the layout related definitions o a degree by breaking them out into their own definitions. Especially if you consider the complexety of cross-browser layout tricks...
