Cleaning Up Your HTML and CSS Code

Teaching HTML Fundamentals at Clark College in Summer Quarter 2012 was a step back into history and a good learning lesson for me about teaching but also about HTML.

I’m sharing a lot of the tutorials and guides I created for the class here which you can find in various categories but specifically under the HTML tag.

I’d like to share with you one of the great tools I uncovered. It’s called Dirty Markup and describes itself as the “Tidy and Beautify your HTML, CSS, and JavaScript code tool.”

Dirty Markup cleans up your markup. It’s that simple, but it is more than simple.

There are a lot of TiDY programs and HTML and CSS cleaners out there. What makes Dirty Markup distinctive is the ease of use and clean interface. It also cleans up HTML, CSS, and JavaScript, whereas others do only one or two things.

What it does not do is “clean” the CSS up to alphabetize it, order it, or optimize it for style grouping and shorthand. It just makes it easy to read.

Cleaning Up Your Code

When it comes to code, there is cleaning and optimization.

Cleaning your HTML and CSS involves several tasks:

Tidying up your code so it is properly formatted with indention.
Removing unnecessary and unwanted spaces and lines.
Fixing up small coding mistakes such as forgotten or unnecessary semi-colons or empty containers {}, or identifying those errors to help you fix them.
Grouping the same CSS styles into a single declaration.
Using CSS shorthand to combine multiple lines of related styles.

The last two are rarely done by CSS cleaners, though some claim the feature. They only look for margin and padding, sometimes border, styles to consolidate. The programs will not sort through the styles and group all selectors with the same style together. That’s part of the manual labor of CSS.

If you have ever run into a client who insists upon writing content or creating web pages in Word or another word processor, WordOff is a savior. It strips away all of the unnecessary HTML and styles from Word documents and leaves them fairly well cleaned up and ready to work with in clean HTML.

HTML and CSS optimization is a form of cleaning, but its goal is to strip out EVERYTHING unwanted and unnecessary. In extreme optimization, all spaces and line breaks are removed to reduce the file sizes. Every character and space adds up. The theory is that if you remove all of the excess, it will shrink down the file size.

While this is true, few web pages today need this extreme optimization. Most web pages today are dynamically generated with content from databases, thus the size of the actual files being used is small, holding the HTML framework and database requests. However, if you are running a large and active site, HTML and CSS optimization might be a good idea to save space and speed everywhere.

Here are some reference articles to help you with cleaning, sorting, grouping, and using shorthand with your CSS.

The following are more resource and reference articles to help you learn more about CSS and the tools that are available to help clean it up, along with your HTML.