Coding Practices & Additional Resources

/ HTML & CSS, Uncategorized / By

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.

Lorem ipsum dolor sit.


Ut enim veniam, quis nostrud exercitation.
Lorem ipsum dolor sit.


Ut enim veniam, quis nostrud exercitation.

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.

Welcome Back



Duis aute irure dolor in reprehenderit in voluptate.


Welcome Back


Duis aute irure dolor in reprehenderit in voluptate.

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.

Error! Please try again.
Error! Please try again.

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.


Click Here
3 month old basset hound puppy
Click Here

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.

Thank you!
Thank you!

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.


  

    
Headlines Across the World

  



  

    
Headlines Across the World

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

Write CSS with Multi-Line Spacing

When writing CSS it is important to write it spanning multiple lines, placing selectors and each style declaration on a new line. Doing so makes the code easy to read as well as edit. When all of the code is piled into one line it’s harder to scan and make changes. Additionally, if you are looking for the difference between two sets of code, placing all of the properties within one line makes it nearly impossible to spot a small change.

Compressing and minifying CSS before sending it to the server is completely acceptable, even encouraged. However, when working with CSS files locally, comments and multi-line spacing can make a world of difference.

a {background: #aaa; color: #f60; font-size: 18px; padding: 6px;}
a {
  background: #aaa;
  color: #f60;
  font-size: 18px;
  padding: 6px;
}

Modularize Styles for Reuse

CSS by default is built in a way to allow styles to be reused, specifically with the use of classes. Class styles should be modular and available to be applied to any element as necessary. If a section of news is presented within a box, including a border, background color, and other styles the class of news might sound like a good option. However, those same styles may also need to be applied to a section of upcoming events. The class of news doesn’t fit in this case. A class of modal would make more sense and may be used across the entire website.

[message_box type=”tip”]

Pump the Brakes

Yes, the best practices around class values from HTML and CSS are a bit conflicting. Use values that pertain to the content, however naming them in away that they can be reused across the entire website doesn’t quite make sense. The main point here is to really think about what you are using as values and provide values that are meaningful.

Twitter Bootstrap does a great job of this. Buttons are modularized using the btn class and can be used on a, button, or any other element. No matter what, any element receiving the btn class will inherit the correct button styles. Additionally, if you want a red button, instead of using a class of red you can use the class of btn-danger. Combining the two classes, btn btn-danger, generates a red button.
[/message_box]

.news {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.events {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.modal {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
}

Create Proper Class Names

As mentioned above, class values should be modular while pertaining to the content as much as possible. These values should be named in such a way that they resemble the CSS language. In such, class names should be all lowercase, using hyphen delimiters.

.Alert_Message {...}
.alert-message {...}

Build Proficient Selectors

CSS selectors can get out of control if not carefully watched. They can become too location specific as well as too long fairly easily. For the longest time we’ve been told not to use classes and to use element selectors as much as possible. Regrettably, this isn’t true.

The longer a selector is, chaining multiple elements together, the more work the browser has to do in checking to make sure each selector matches before applying a style. Doing so creates a large performance hit, slowing down the rendering of any styles. Make selectors as small as possible while still targeting the desired element.

Additionally, the more specific a selector is the more dependent it is on its location within HTML. If emphasized text is nested within a heading inside of an aside the selector might look something like aside h1 em. Should the emphasized text ever be moved out of the heading the styles will no longer apply. A better, more flexible selector would be aside em.

ul.news li a {...}
ul.news li a em.special {...}
.news a {...}
.news .special {...}

Use Specific Classes When Necessary

There often comes a time when a CSS selector is so long and specific that it no longer makes sense. It creates a performance lag and is strenuous to manage. In this case a class is advised. While applying a class to the targeted element may create more code within HTML it will render faster and remove any managing obstacles.

article div h4 a span {...}
.offset {...}

Use Shorthand Properties When Available

One of the benefits of CSS is the ability to use shorthand properties. Nearly every property has an acceptable shorthand property or value. As an example, rather than using four different sets of properties and values to declare a margin one single property can be used. Additionally, one margin property can be used to set the four values in a couple of different ways. All four values can be declared individually in a clockwise order, two values can be declared by combining the top/bottom and left/right values, or by declaring one value for all four sides of an element. The same pattern, and many others, may be reused with multiple properties.

When setting one value shorthand properties should not be favored. If a box simply needs a bottom margin, the margin-bottom property should be used so that other margin values will not be overwritten.

img {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
}
button {
  padding: 0 0 0 20px;
}
img {
  margin: 5px 10px;
}
button {
  padding-left: 20px;
}

Drop Unit Type from Zero Values

One way to easily cut down on the amount of CSS code written is to remove the unit type from any zero value. No matter what length value being used, pixels, percentages, em, and so forth, zero is always zero.

div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}
div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}

Additional Resources & Links

Every lesson within this guide has come with a few resources for additional learning and discovery. Outlined below is a longer list of resources, as well as beneficial links. Many of these resources have helped in preparing the guide while others are simply nice to know.

HTML & CSS

Design Inspiration

Frameworks & Styleguides

Icons

Miscellaneous