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

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.