Writing Solid Front-end Web Development Code
Front-end web development could once be described as a waking nightmare, what with the variety of browsers, use of proprietary syntaxes, lack of compliance, etc... Fast forward to 2016, in many ways, things have only gotten worse. Now we have a gazzilion screen resolutions to contend with, a lot of bleeding-edge technologies emerging, and an environment that is in constant evolution. All of this makes producing clean, semantic, and cross-browser code a hard job indeed. Over the next two months, I'll be presenting a few guidelines for coding, testing, debugging, and profiling your websites. After today's article on coding, expect one on testing within a few weeks; the following two parts will be posted next month.
ABC - Always Be Closing (Tags that Is)
Like Alec Baldwin said in his classic Glengarry Glen Ross scene, Always Be Closing (warning: clip contains strong language)! You can get away with a lot of missing closing tags, but it's not recommended because different browsers often interpret the incomplete markup in their own way. In some cases, it will arrange elements in a strange way. It might even omit some elements completely!
To make each element's start and end tags easily discernible in the markup, borrow a page from programming standards and indent each nested element.
<div id="container"> <div id="header" class="first center"> ... </div> </div>
Another trick is to including a comment beside each closing tag that identifies the element that it belongs to.
<div id="container"> <div id="header" class="first center"> ... </div><!-- #header.first.center --> </div><!-- #container -->
Declare the HTML5 DOCTYPE
The DOCTYPE tag goes at the very top of the page before the opening HTML tag and tells the browser whether the page contains HTML, XHTML, or a mix of both. Using an older DOCTYPE tag can cause the browser to interpret the markup incorrectly. All you need to declare HTML5 content is this:
For more information on the HTML5 DOCTYPE check out this article I wrote a little while ago.
Separate Structure, Presentation, and Behavior, with some Divergence
The maxim of keeping structure, presentation, and behavior separate has been around a while, but it bears revisiting, especially since the rules have changed a bit in recent years.
In recent years, the lines have begun to blur. CSS now includes behaviors like :hover and animations as well as structure with the ::before and ::after pseudo elements. HTML has similar overlap: its new <input> types include aspects of both behavior and presentation. Where one of the structure, presentation, and behavior content types encroaches into another's realm, that is divergence. There's nothing wrong with a little divergence as such, just be cognizant of where and why you are using it. I myself introduced divergence into my content in my Create a Chart Plot Line Using a Pure HTML and CSS Solution article when I employed the ::after pseudo element to draw a horizontal line.
Here's an excellent article on the subject of divergence.
Employ a CSS Reset
It's a well known fact that every browser renders HTML content in its own way. By linking a CSS reset stylesheet to your pages, you can be sure that all styles you apply to elements are starting from the same baseline. Moreover, elements that you don't apply your own styles to will appear much more consistently across browsers.
HTML5 Audio Control in Different Browsers
Those browser-specific styles are applied by the default user-agent stylesheet. You can view these styles in the dev tools of your browser:
The Default User-agent Stylesheet
The meyerweb.com site offers a free CSS stylesheet that you can copy & paste into your own file.
If you've only got a couple of minified scripts, placing them in the head won't be a deal breaker, but once you've got more than that, it might be time to move them to the bottom. If you do have variables that need to be initialized right away, you can always leave those in the HEAD:
Robert Nyman discussed this idea on his site way back in 2008, while managing to make it all sound rather sexy!
Got any favorite coding standards of your own that weren't included here? Fear not, I plan on adding to this list at some point. Just add your suggestions to the comments and they may be included.
Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on Reverb Nation.