Efficient Website Styling – using parent ID’s and style-sheet reseting
Anyone who has developed a large website knows that Cascading Style Sheets (CSS) can quickly get out of control. A style-sheet can end up a maze of ID’s, classes and elements in a myriad of combinations and twists intended to produce unique styles for specific regions of a site . Here are two very important measures you can to take for a more efficient style-sheet:
Avoid placing an ID or class on child-elements. When possible, id or class the parent, and then select the element of the parent id. This cuts down on unnecessary code in your body and can reduce the amount of style rules you need. It also allows body code to be uniform and across the board which can help for dynamic solutions such as menus with active states. For example, lets take it as far as we can go and ID the body tag, which is obviously the parent to all elements you will need to style in a website. You could use body#home h2{} to declare a different rule for the H2 element on the Home Page, while the rest of your site will retain whatever the H2 {} rule is without interfering with the body code! This effectively eradicates the need to ever need inline styling!
Reset your style-sheet! Otherwise your held hostage to the cruel tyranny of the browsers default standards! (As a general rule IE 6 and to lesser extent 7 reluctantly let go of their tyrannous ways. Stay strong and arm yourself with those dirty dirty evil little conditional comments. You will feel dirty and abused for using proprietary tags but at least you made IE submit to you!)To reset a stylesheet you could start with this: body, div, p, img {margin:0; padding:0}. Now you can set the rules not that wannabe browser!
