Redundancy and repetition can be useful in mission critical and learning applications. But for web pages, browsers are smart enough to glean what you want without redundant markup. By omitting redundant classes and default attributes often inserted by overzealous WYSIWYG XHTML editors, you can streamline your CSS and XHTML and put your code on a low-character diet. By using the built-in defaults (that was redundant) to XHTML you can eliminate unnecessary markup from your web pages. For example: Becomes: The default for table data cells (and Another redundant example is when styling a list of items. Rather than placing an identical class within each item, you can use the same class within the list tag and use a contextual selector. So this: Becomes this: The targeting can be done with contextual selectors in your style sheet. CSS also has defaults that you can use to streamline your code. CSS-compliant browsers will automatically set an initial default value if you omit these property values: At least, that is the theory. In practice some older browser will still underline links (text-decoration:none may be necessary), and display things as becomes this instead (using the Same thing goes for cascading in CSS. By using high-level type selectors and grouping you can set the font size and family for your entire site, and make exceptions for other font styles, rather than explicitly setting the font size and family for each class or element. By taking advantage of XHTML and CSS defaults you can streamline your code. Style the highest level XHTML element that you can and use contextual selectors to target individual items. Most XHTML and CSS-compliant browsers will behave in the way you intend, or gracefully degrade otherwise.Omit Default Attributes
<table><tr><td align="left">I'm already leaning left here.</td></tr></table>
<table><tr><td>Ah, much better.</td></tr></table>
p
, hx
, table
, and tr
) is to be aligned to the left. Of course if you style your tables to be aligned otherwise, aligning individual exceptions may be necessary. In this case, style the most common alignment globally and individually style the exceptions. Even better, use classes (.alignleft
, .center
) or contextual selectors (table.top th
) to style your cells.Omit Redundant Classes
<ul>
<li class="big">Burma</li>
<li class="big">Shave</li>
</ul>
ul.big li{big style here;}
...
<ul class="big">
<li>Burma</li>
<li>Shave</li>
</ul>
CSS Defaults
CSS2.1 default attribute values
Default Property Value CSS Property 0 border-spacing, margin-bottom, margin-left, margin-right, margin-top, min-height, min-width, padding-bottom, padding-left, padding-right, padding-top, text-indent 2 orphans, widows auto bottom, clip, cursor, height, left, right, top, width, z-index, table-layout, page-break-after, page-break-before, page-break-inside baseline vertical-align disc list-style-type inherit visibility inline display invert outline-color ltr direction medium border-bottom-width, border-left-width, border-right-width, border-top-width, font-size, outline-width no-repeat background-repeat none border-bottom-style, border-left-style, border-right-style, border-top-style, clear, float, list-style-image, max-height, max-width, outline-style, text-decoration, text-transform normal content, font-size, font-variant, font-weight, letter-spacing, line-height, unicode-bidi, white-space, word-spacing outside list-style-position scroll background-attachment separate border-collapse show empty-cells static position top caption-side transparent background-color visible overflow block
instead of inline
. In most cases you can omit redundant attribute values to streamline your CSS. For example:.main{font-size:1.1em, font-family:arial,helvetica,sans-serif, font-weight:normal...}
font
shorthand property and omitting defaults):.main{font:1.1em arial,helvetica,sans-serif;}
Conclusion
Further Reading
By website optimization on 18 Apr 2004 AM