6 Steps to Cleaner Code: Front-end Edition
First, what is Clean Code?
“Clean code is simple and direct. Clean code reads like well-written prose.”- Grady Booch, author of Object Oriented Analysis and Design with Applications.
“You’re a great programmer if other people can read your code like a novel.”– Joseph Ajayi, Front-End Developer at Seamfix.
If you’re a stickler for definitions, then here goes another one: clean code is a software development approach that produces code that is easy to read and maintain.
Why Clean Code?
Clean Code is important because your code is going to be read again. Clean code will save you hours of trying to understand what you wrote a few months ago. It will prevent you from having to explain your code in person to other developers and will allow your colleagues to build on existing code, rather than having to write theirs. So except, your code is going to be deleted, you might want to avoid bad code.
Here are 6 ways you can write cleaner code:
Name Attributes Properly
Since you make use of classes, IDs, variables, path names, file names, etcetera frequently while coding, it is important that you name them descriptively. If the name cannot be understood without a comment, then it is probably not descriptive enough. Some developers shy away from descriptive names because they can get too long, but it is better to have long descriptive names than short confusing ones. Remember to keep names as short as possible and as long as necessary.
It is generally a good idea to adopt a naming convention, this allows you to be consistent with naming. Popular naming conventions in CSS include BEM, SUITCSS, and so on. Similarly, popular naming conventions for variables, objects, and functions include camelCase, PascalCase, and snake_case. Notice the way each naming convention is written?
Cure your Divitis
Divitis is the excess usage of div tags. Overusing div tags can make your code harder to read and less accessible. It is recommended that you utilize HTML5 elements such as aside, header, footer, etc. So unless you are restricted by dynamically generated code, use the right semantic elements, instead of just divs.
Write Comments
The beautiful thing about comments is that they enhance readability. You must always take time to add comments to your code until it becomes a habit. In small files, the absence of comments is not too damaging, but in large files with hundreds or thousands of lines of code, reading without comments is almost impossible. Try to keep your comments simple and direct. The example below shows a pattern common with plugins and templates, styles for a particular section of code grouped together and labeled with a comment. This makes the CSS file, no matter how large, to be easily read and maintained.
Use Classes and IDs properly
Classes are used to apply styles on several elements, while IDs are used to apply styles to a single element. An element can have both a class and an ID. For the purpose of styling a single element, a class or ID would do the same job, but if the style is going to be re-used, it makes sense to use a class and if the element would need to be manipulated uniquely in Javascript, then it makes sense to use an ID.
Put Script tags in their places
Script tags are used to insert javascript files in HTML documents. They can be placed in the head tag or close to the end of the body tag. The placement of your script tags can adversely affect the performance of your site. When the HTML parser sees a script tag, it stops rendering the HTML until the script is executed. This means that until the script is executed you will get a blank page. This is more conspicuous with slower connections.
To solve this problem you can place script files at the end of the body tag, so the scripts are executed after the page is loaded. A more modern approach to solving this is based on the HTML5 boolean attributes ‘async’ and ‘defer’. Async is useful if you don’t care when the script file is executed i.e it can be executed at any time., while defer is useful when the script file is dependent on DOM interaction or another script file.
Note that, if you make use of async or defer, you should put the script tags in the head of the document.
Adopt the best CSS pattern
There are three ways of using CSS stylesheets — inline, internal and external stylesheets. Internal CSS will overwrite external CSS, and inline styles will overwrite internal and external CSS — but using these often makes for messy code and problems maintaining it on a large (or even a small) website. External CSS is also better for performance as external stylesheets can be easily passed through CSS minifiers. However, in HTML email templates inline styles are the most suitable option, otherwise, it is best to avoid them.
Thank you for reading. I am a Front-end developer, and I would love to hear your opinions, suggestions and even criticisms. Please leave your comments below and don’t forget to clap 👏👏.
Further Reading:
