Home » XHTML: Omit Redundant Classes and Default Attributes – trim duplicate classes and default attributes to optimize html markup code

XHTML: Omit Redundant Classes and Default Attributes – trim duplicate classes and default attributes to optimize html markup code

Summary:

Omitting redundant classes and default attributes shrinks xhtml code to speed page response times. Many tags and duplicate attributes can be safely removed with no change in appearance.

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.

Omit Default Attributes

By using the built-in defaults (that was redundant) to XHTML you can eliminate unnecessary markup from your web pages. For example:

<table><tr><td align="left">I'm already leaning left here.</td></tr></table>

Becomes:

<table><tr><td>Ah, much better.</td></tr></table>

The default for table data cells (and 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

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:

<ul>
<li class="big">Burma</li>
<li class="big">Shave</li>
</ul>

Becomes this:

ul.big li{big style here;}
...
<ul class="big">
<li>Burma</li>
<li>Shave</li>
</ul>

The targeting can be done with contextual selectors in your style sheet.

CSS Defaults

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:

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

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 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...}

becomes this instead (using the font shorthand property and omitting defaults):

.main{font:1.1em arial,helvetica,sans-serif;}

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.

Conclusion

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.

Further Reading

Cascading Style Sheets: The Definitive Guide, 2d ed
Newly updated for CSS 2.1, the second edition of this classic book explains how CSS works like no other. CSS, CSS1, CSS2.1 are covered with clear examples and code snippets. Shorthand properties and colors, grouping, and positioning can help you prune both your CSS and XHTML markup. This book is an indispensable reference for web authors. The table above was derived from Appendix A. By Eric Meyer (companion site).
CSS: Use Descendant Selectors
Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. From Speed Tweak of the Week.
CSS: Use Type Selectors
High-level type selectors style identical elements in your document without the need for extra classes.
Optimizing HTML
Chapter summary from Speed Up Your Site: Web Site Optimization, shows how to streamline your code to faster downloads. Includes references and links to HTML optimization software.
Reduce Redundancy: Decrease Duplicated Design Decisions
Users rarely understand duplicates. Jakob Nielsen says keep things simple for better usability. Reduce unnecessary features and duplicate links to lower cognitive overhead. In a few cases, however, redundancy can be a good thing.

1 thought on “XHTML: Omit Redundant Classes and Default Attributes – trim duplicate classes and default attributes to optimize html markup code”

  1. Hi
    i started designing websites at the beginning of this year. i love using css. haven’t touched javascript yet, and am trying to avoid it for some mystical reason. i need help on streamlining my sites. for instance, we have a package that includes the following pages: ‘home’, ‘about us’, ‘contact us’, and ‘packages’. so far, i’ve designed every page individually, but i’ve read somewhere that you can reduce the number of pages by using z-index and mouseover trickery. could you please help me?
    Regards
    jansie

    Reply

Leave a Comment