The Dangers of CSS Resets

For a while now, people have been using CSS reset files to, well, "reset" their pages to a default, unstyled state. Until recently, I had never used one, and my current use of one is not by choice, but because it was already in place when I started my new job.

Since then, I've encountered some strange constructs in the HTML and CSS of these pages. I've noticed an over-use of inline styles and <br /> tags, <h*> tags that aren't actually meaningful headers, skipping of header levels, and likely some other "standards offences" that I don't recall off the top of my head.

A fair amount of this is simple, innocent ignorance. The company has had graphic designers building HTML and CSS (and JavaScript in some cases), and while that would be okay if they were properly trained, that does not seem to be the case. One of them has admitted that he is just beginning to explore the world of HTML and CSS, and I seem to be the go-to guy for layout issues.

I believe, however, that the use of CSS resets is compounding this issue. Margins and paddings are set to 0 on nearly all elements, removing the visual break between <p> elements and headers; <br /> tags are used in their place. Margins which could have been relied on as browser defaults have to be set on their own, leading to inline styles and inconsistencies in visual display.

The issue that prompted this post, however, is the following: Use of unordered lists was not commonplace until I arrived here. This I found odd, as there were several areas that were, in fact, bulleted lists. How they added the bullet, though, was with the "•" character. Literally. In the source.

And even worse, I recently found a situation in which the author had used said character in an unordered list.

I don't mean this as criticism of my workplace. My job is great, the work is fun and challenging, and I enjoy the people I work with. Honestly.

I do mean this as a criticism of reset files, and especially their use in untrained hands. The default styles are very consistent across browsers, and the use of those default styles can improve code by removing the need for code. If those default styles are removed before they are understood or given proper consideration, it can lead to code bloat and the use of completely unnecessary constructs in HTML and CSS.