Practical Front-End Practices

Front-end development takes much more than writing clean code. While writing concise and legible code is not mandatory, it will save many headaches in the future. The chances of writing code that will never be changed or never looked at again are slim to none, and time spent getting lost in old code is time wasted. Here are some key web development best practices for HTML, CSS, and JavaScript.

Code Consistency

Layout

Consistently indent, nest, include braces, quotes, and new lines so that code is clear and can be read easily. New code added should never deviate from existing formatting conventions or change the indent levels.

Readability

Use of whitespace, comments, and descriptive variable names as appropriate for writing easy-to-read code.

There is no need to write code in an obfuscated or compressed way for the purpose of filesize savings.

Use automated server-side or other build processes to optimize files.
This includes concatenating files, code minification, and gzipping.

The ability for other developers to read the code is paramount above other concerns, especially if optimization can be handled another way.

Third-Party Libraries

Use the right tool for the right job.

Un-minified libraries and third-party scripts should be leveraged in local development environments for easier debugging if available. The code should be committed to source control in an unmodified state, or simply referenced in dependency management components that resolve the files in a build. The final products will be compressed with the rest of the source for delivery.

Likewise, third-party code and libraries should never be modified and their original source and the license must be documented and be appropriate for a project. Any changes to third party code must be agreed upon and must be for specific reasons. If changes are mandated by bug-fixes, then the appropriate upstream project should have the changes submitted (assuming the code is part of an open-source repository).

Library code should be treated as an external dependency and should be considered something that may need to be wholesale updated or replaced at a later time.

The inclusion of any third-party code should be carefully considered and verified as the appropriate solution to a given problem. Adding another plug-in is not always the best solution.

HTML

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language. — Wikipedia

Semantic Elements

Semantic elements are elements with tags that clearly define the content included for both the developer and the web browser. Basic HTML includes tags such as <b> to represent bold and <i> to represent italics. In HTML 4.01, <strong> represents strong (generally bold) and <em> emphasis (representing italics) were introduced. HTML5, the most current version of HTML, introduced support for semantic elements; an example of which are <header> and <nav> for which the meaning becomes immediately clear.

Thanks to Natalie de Weerd for correcting the history above.

These elements are more commonly used by developers today and improve the automated processing of documents; All mainstream browsers such as Google Chrome, Mozilla Firefox, and Apple Safari support HTML5 and semantic elements.

ID and Class

Using both ID and Class names are practical and relevant HTML practices to define an element. In HTML, the class attribute is used to define the specific styling of an element. Class attributes can be reused between multiple elements, allowing for elements to carry identical modifiers.

An ID tag is used to define a specific variable and can be used alongside a class attribute. IDs are assigned to only one specific element and should never be reused. This allows for specific customization to the element using the ID tag without affecting others inside the same class.

CSS

Cascading Style Sheet (CSS), is behind almost everything seen when a website is visited. While HTML is responsible for the content a website possesses, CSS is what visually stylizes the content and website.

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Although most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG, and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. — Wikipedia

CSS Reset

All web browsers add their own styling by default, and each web browser applies these styles in their own unique way. For example, many browsers make links blue and visited links purple by default. Others may give tables a certain amount of border and padding. Utilizing a CSS Reset is a great practice to reset all styles to begin styling from the ground up.

A CSS Reset, or Reset CSS, is a short and often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. Using a CSS Reset will allow every browser to have all its styles reset to null. This helps avoid cross-browser variation.

Examples ...

• Meyer's Resets
• Natalie de Weerd's Resets

Consistent CSS Structure

The structure of the CSS file should remain consistent with the structure of an HTML file. This can benefit both the developer and those who may have to make adjustments to the code in the future. If the CSS code is all over the place and does not follow the same pattern and flow as the HTML document, it will likely take a lot of time and effort to make sense of the two before changes can be made.

Inline Style

Typically, CSS is written in a separate CSS file with the .css file extension. Inline-styles are CSS sheets included within the HTML document itself. This practice should almost always be avoided when writing HTML and CSS code.

When to Use Inline Styles

While most web developers refrain from using inline styles, there are some exceptions to when they should be used. Some examples of that would be:

• HTML Email
• Generating a Performance Baseline
• Content Management System Content (WordPress, Drupal, etc.)
• Dynamic Content (HTML created or altered by JavaScript)
• Older Websites

DOM

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API). — Wikipedia

JavaScript

JavaScript is the programming language of HTML and the Web. JavaScript is used by more than 90 percent of all websites on the Web as they assist in creating a dynamic and interactive web page.

There are several popular JavaScript frameworks to know as a web developer. Frameworks are large bodies or many classes of pre-written code that can be used in the creation of a codebase. Utilizing these frameworks can allow the quick creation of JavaScript applications.

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it, and it is supported by all modern web browsers without plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. It has an API for working with text, arrays, dates, and regular expressions, but does not include any I/O, such as networking, storage, or graphics facilities, relying for these upon the host environment in which it is embedded. — Wikipedia

Popular JavaScript frameworks (or tooling) that many developers take advantage of are:

• Angular
• AngularJS
• ReactJS
• jQuery
• Vue.js

Designing For All Browsers and Devices

A front-end developer crafts HTML, CSS, and JS that typically runs on a web platform delivered from one of the following operating systems (OS):

• Android
• Chromium
• iOS
• OS X
• Ubuntu (or some flavor of Linux)
• Windows Phone
• Windows

These operating systems typically run on one or more of the following devices:

• Desktop computer
• Laptop / netbook computer
• Mobile phone
• Tablet
• TV
• Watch
• Things (i.e., anything you can imagine, car, refrigerator, lights, thermostat, etc.)

Generally speaking, front-end technologies can run on the aforementioned operating systems and devices using the following run time web platform scenarios:

• A web browser (examples: Chrome, IE, Safari, Firefox).
• A headless browser.
• A WebView/browser tab (think iframe) embedded within a native application as a runtime with a bridge to native APIs. WebView applications typically contain a UI constructed from web technologies. (i.e., HTML, CSS, and JS). (examples: Apache Cordova, NW.js, Electron)
• A native application built from web tech that is interpreted at runtime with a bridge to native APIs. The UI will make use of native UI parts (e.g., iOS native controls) not web technologies. (examples: NativeScript, React Native)

The days of designing for strictly desktop screens have passed. Mobile web browsing has surpassed browsing on a traditional computer. The most efficient way to deal with this change is to design a site that can adapt to the size of the viewport. This is where responsive web design comes in.

R.W.D. Responsive Web Design

The best responsive websites utilize fluid grids, flexible images, and specific CSS styling techniques to alter the design of the website and render it according to the width of the browser. The developer must be sure to test the website on all browsers, not just a favorite or the most commonly used ones. Some browsers interpret CSS in different ways and require their own CSS properties to achieve a specific style.

Bigger Picture

Libraries and Frameworks (dependencies)

There is nothing wrong with becoming a master of a specific library or framework. It is important to not exclusively rely on them. All libraries and frameworks are built on the native languages themselves and get updated and phased out constantly. With a solid understanding of the native languages, a developer can keep learning, which will ensure the work will stay up to date.

Page Speed

The time it takes for a website to load matters. While page speed is usually not an issue with smaller websites, more robust and dense sites can and will take longer to load. It is true that in some cases, there will be factors that will unavoidably impact page speed. However, there are a few better practices that should always be taken into account to ensure a website is as size efficient as possible.

Image Files

The image sizes actually needed are certainly something to be aware of. A large image is going to take a long time to load and will use a significant amount of bandwidth. If there are a lot of large images on a site, extra time is added for every image.

The file format is important, as well. Browsers can load JPG, PNG, and GIF images nice and quickly. But, heavy formats such as TIFF or BMP are going to increase load time.

Avoid using images to display text, whenever possible. Again, images take up more room than text, even if the text needs a heavy amount of styling.

Code Density

Optimize the code as much as possible. Large, dense code will slow down a site, and the browser will need more time to process the code. Reusing styles for similar elements will help shorten the CSS files. Keep the JavaScript DRY (Don't Repeat Yourself).

Beyond the Technical

The Team

A front-end developer is typically only a single player on a team that designs and develops web sites, web applications, or native applications running from web technologies.

A bare-bones development team for building professional websites or software applications for the web platform will typically, minimally, contain the following roles.

• UX / UI Designer (User Experience / User Interface)
• Front-End Developer (Client-Side)
• Back-End Developer (Server-Side)

It is assumed that the team mentioned above is being directed by a project lead and/or some kind of product owner (i.e., stakeholder, project manager, project lead, etc.)

A larger web team might include the following roles not shown above:

• DevOps Engineers
• Database Administrators
• QA Engineers / Testers

Conclusions

Front-end development takes much more than writing clean code: it is a delicate balance of several elements. There are times where it seems to be more art than science; although, both have their place. The chances of writing code that will never be changed or never looked at again are slim to none, and time spent getting lost in old code is time wasted. These are some key web development best practices for HTML, CSS, and JavaScript to keep in mind moving forward.