Coding Practices & Additional Resources - Part1

There are a lot of different elements, attributes, properties, values, and so forth to learn in order to write HTML and CSS. Every lesson up until this point has had the primary objective of communicating these different parts of HTML and CSS, in hopes of helping teach the core fundamentals. This lesson takes a step back and looks at a more abstract picture of HTML and CSS.

This lesson in particular focuses on the best coding practices for both HTML and CSS. These coding practices, while not covered in detail up until this point, serve as an overarching theme to the guide as a whole. They apply to every lesson and should always be in consideration when programming.

In reviewing these best practices think about how they may be used in other areas or programming languages. Using comments to organize code, as covered below, is beneficial in all programming languages. Keep an open mindset and think about how to get the most out of each practice.

HTML Coding Practices

A lot of coding best practices are focused around keeping code lean and well organized. The general practices within HTML are no different. The goal is to write well structured and standards compliant markup. The guidelines outlined below provide a brief introduction to HTML coding practices, however this is not an exhausted list.

Write Standards Compliant Markup

HTML by nature is a forgiving language, allowing poor code to execute and render accurately. This, however, does not mean that the code is semantic or guarantee that it will validate as standards compliant. Stay focused when writing HTML, be sure to nest and close all elements correctly, use IDs and classes accordingly, and always validate your code.

<p id="intro"><strong>Lorem ipsum dolor sit.</p></strong>
<p id="intro">Ut enim veniam, quis nostrud exercitation.

<p class="intro"><strong>Lorem ipsum dolor sit.</strong></p>
<p class="intro">Ut enim veniam, quis nostrud exercitation.</p>

Make Use of Semantic Elements

The library of elements in HTML is nothing to laugh at with well over 100 elements available for use. Deciding what elements to use to markup different content can be difficult, yet these elements are the backbone of semantics. Do your research and double check your code to ensure you are using the proper semantic elements. Users will thank you in the long run for building a more accessible website. If you are still weary of your code find a friend to help out and perform routine code reviews.

<span class="heading"><strong>Welcome Back</span></strong>
<br /><br />
Duis aute irure dolor in reprehenderit in voluptate.
<br /><br />

<h1>Welcome Back</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate.</p>

Use Practical ID & Class Values

Creating ID and class values can oddly be one of the more difficult parts of writing HTML. These values need to be practical, relating to the content itself, not the style of the content. Using a value of red to describe red text isn’t ideal as it describes the presentation of the content. Should the text ever need to be changed to blue, not only does the CSS need to be changed, but so does the HTML in every instance the class red exist.

<p class="red">Error! Please try again.</p>

<p class="alert">Error! Please try again.</p>

Provide Proper Attributes for Images & Links

Images and links should always include the alt and title attributes respectively. Screen readers and other accessibility software rely on these attributes to provide context around the image or link.

For images the alt value should be very descriptive of what the image contains. If the image is not of anything pertinent the alt attribute should be included, however the value should be left blank so that screen readers ignore it rather than read the name of the image file. Additionally, if an image doesn’t have a meaningful value, perhaps it is part of the user interface, it should be included as a background image if at all possible.

A links title attribute value works similar to that of an images alt attribute value. The title attribute value should be the name of the page being linked to, not the hypertext being wrapped by the link element. From an accessibility perspective the hypertext of “click here” doesn’t mean anything, where the title attribute value of “Adobe Reader download” does.

<img src="puppy.jpg" />
<a href="/reader/">Click Here</a>

<img src="puppy.jpg" alt="3 month old basset hound puppy" />
<a href="/reader/" title="Adobe Reader download">Click Here</a>

Separate Content from Style

Never, ever, use inline styles within HTML. Doing so creates pages that take longer to load, are difficult to maintain, and an overall headache for users and developers alike. Instead, use external styles, using of IDs and classes as necessary.

<p style="color: #393; font-size: 24px;">Thank you!</p>

<p class="alert-success">Thank you!</p>

Avoid a Case of Divitis

When writing HTML it is easy to get carried away adding a div here and a div there to build out any necessary styles. While this works it begins to add quite a bit of bloat to a page, and before too long you’re not sure what each div does. Keep your code as lean as possible, tying multiple styles to one element when possible. Additionally, use the new HTML5 structural elements as suitable.

<div class="container">
  <div class="article">
    <div class="headline">Headlines Across the World</div>
  </div>
</div>

<div class="container">
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</div>

Continually Refactor Code

Over time websites continue to grow and grow, leaving behind quite a bit of cruft. Remember to remove old code and styles as necessary when editing a page. Also take the time to evaluate code after you write it, looking for ways to condense and make it more manageable.

CSS Coding Practices

Similar to HTML, the coding practices within CSS are focused around keeping code lean and well organized. CSS also has some additional principles around how to specifically use some of the intricacies of the language.

Organize Code with Comments

CSS files can become quite extensive, spanning hundreds of lines. These large files can make finding and editing code nearly impossible. Use comments to build a table of contents at the top of your file, as well as outline blocks of code throughout the file. Doing so tells others exactly what is contained within the file, whereabout the styles are located, and exactly what a specific style pertains to. Before sending CSS to the server it is a good idea to compress and minify it, removing comments and other unnecessary spacing and characters.

header {...}
article {...}
.btn {...}

/* Header */
header {...}

/* Article */
article {...}

/* Buttons */
.btn {...}

Indent Selectors

In effort to better organize and make CSS more legible indenting selectors, nesting them based on the previous selector, provides better coordinated code. At a glance you can recognize groups of selectors, helping identify specific sets of styles.

footer {...}
footer h3 {...}
footer .col {...}

section a {...}
section strong {...}

footer {...}
  footer h3 {...}
  footer .col {...}

section a {...}
  section strong {...}

Group & Align Vendor Prefixes

With CSS3 vendor prefixes have taken off, adding quite a bit of code to CSS files. The trade off of using vendor prefixes is worth the generated styles, however they have to be kept organized. Again, keeping with the theme of writing code that is easy to read and modify. With vendor prefixes grouping them together and indenting them to align all of the properties and values together provides a quick and easy way to read and edit the styles.

div {
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

div {
     -moz-border-radius: 5px;
      -ms-border-radius: 5px;
       -o-border-radius: 5px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
}