Front-End Web Development Best Practices From My Experience in the Industry

If you’re not following these already, consider starting right away

Image for post
Image for post
Photo by Damian Zaleski on Unsplash

A few months ago, I started working on a one-year web application development project, and I realized how many developers are not quite aware of the best industrial practices in the front-end development of web apps. Even I was not aware of some practices as well. So I decided to write this article to share what I know and what I have learned about the best practices to follow when developing a web application.

This article will focus on best practices in front-end development because the quality of the front-end code is the most deciding factor of a great web app in my experience, but most developers fail to follow these practices and develop their individual components. If front-end developers do not follow these practices, it will be really difficult to manage the code, there will be no consistency across the design, and the web app’s speed will also have a negative impact. Following these practices will make the code more clean and easy to manage, and will increase the productivity of all the developers.

In this article, I am going to talk about best practices to follow when structuring the project’s frontend architecture, writing front-end code, and preparing for deployment. So let’s get started.

Best Practices When Structuring the Front-End

When you get started on the project, the first thing is to structure the front-end code architecture properly. And these are the best practices that each front-end developer of the project needs to follow.

Structuring the style code

Inside the styles folder, create separate folders for configurations, base, layout, components, and pages depending on your web application. Use separate typography file to define sizes and colors for all the HTML text tags(such as h1,h2,…) used in the web app. Colors should be defined in a variables file and assign colors to variables with suitable names and use those variables when colors need to be applied throughout the web site. Include these style files inside the folders created similar to the below image.

Image for post
Image for post
screenshot of style file structure by author

You can then import these files into the main style file. If you are using scss in your web app then main.scss file would be similar to the below code.

Structuring the JS code

Basically, structuring your JavaScript means dividing your files and separating your own JavaScript from the one that comes from other places. Plugins, vendor, and scripts are the main three folders we can divide JS files into. Plugins would include useful code pieces we use everywhere in the web app such as jQuery plugins, vendors would be 3rd party JavaScript code like Frameworks and Libraries such as the slick library, and scripts folder would include the scripts that we write for our web app logics.

Image for post
Image for post
screenshot of js file structure by author

Best Practices When Writing Front-End Code

Use a CSS Preprocessor

Don’t write pure CSS code in your web application, yah! not even for some of your components. Always use a preprocessor like SCSS or Sass and stick to the main style structure that was mentioned above.

Don’t keep empty SRC or HREF

In some browsers, empty src or href attributes will trigger unnecessary server requests that will waste bandwidth and server resources. So it is best to avoid using them in our code.

Avoid using CSS expressions

CSS expressions such as the calc() function are frequently evaluated, which can degrade the performance of the page. Instead, use attributes like box-sizing if needed.

Use a custom parent class for your custom styles

Always use a custom parent class if you are writing custom styles for your page or component. This makes sure that you don’t accidentally override the styles of somebody else. Don’t use too many nested classes in the style code either, using one parent class would work and will be easy to manage. Over specifying the styles by using too many classes will also increase the size of the file.

Only use globally created responsive typography styles

Define responsive text tags in global typography and always use those defined tags in your HTML code. For individual components and pages, do not write custom font sizes. Developers should keep the consistency of the web app.

Avoid using global JavaScript variables

Avoid using global variables as much as possible in your JS code because using them can cause conflicts. Declare local scope variables of your own when you need them.

Add meaningful comments to describe your code

Adding comments to the code is a very important quality, but most developers are lazy to do it. It will help other developers understand what you have done by adding a meaningful comment to your code piece, especially if you are writing reusable plugins or components.

Best Practices When Preparing for Deployment

Minify JS and CSS

To reduce its size, Minification removes unnecessary characters from a file, thus improving load times. Comments and unnecessary white space characters are removed when a file is minified. Make sure the web app is loading the minified JS and CSS files and not the original files.

Remove duplicate JavaScript and CSS

A big problem that can happen on a large scale web app project is having duplicate JS and CSS. By following the correct file structure, this can be minimized because it will be easy to see and manage the code files. Removing duplicate code will improve the application’s speed.

Refactor your code

Revisit your code and simplify the things you can, but make sure not to break the code as well. If you are using similar functions with minor changes, you should check whether it is possible to modify the original function to work for those similar scenarios.

Final thoughts

You will need to follow these practices when you work on an industrial project. These practices will help to make the web application development process faster and also will increase the quality of the application. There would be fewer conflicts among developers and a high level of consistency across the application.

That’s all for this article. Hope you learned something new.

Thank you for reading and happy coding!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store