Front-End Web Development Best Practices From My Experience in the Industry
If you’re not following these already, consider starting right away
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.
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
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
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 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.
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.
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!