Basic front-end coding best practices, do's and don'ts in a nutshell
HTML and general guideline:
- Use descriptive and conditional comments in between your codes for better understanding
- Explain which tag (e.g div) you're closing within a comment
- It's best to use HTML5 semantically, modern tags like
<em>instead of backdated
<i>although both may work the same way but support for old tags may end anytime.
- This is a general practice to place CSS on top inside
- Use lowercase in tag for better code readability although uppercase might work the same but it's not a standard practice.
- Do not write uppercase contents inside HTML, add a class and make them uppercase through CSS, for example a header class may transform all your headers into uppercase.
- Keep the syntax organized so that others can easily understand, remember when your code is on the web, anybody can read what's up there. Besides, this is important when you work within a team.
- Use practical ID and class names and values, don't write a class with its property values (e.g not a good practice to write a class name-
- For naming class and ID's, we prefer using BEM.
- Base styles in the HTML structure, not the other way around. Create HTML first and then style them accordingly. This makes the development process faster and simpler.
- Do not style the HTML tags (never give style to html tags like h1, p etc) use a separate class within these tags instead.
- When you create a page layout, table based layouts are not encouraged, this is old fashioned. Div based layouts are preferred as we have CSS grid and flexbox now.
- If there's a requirement for responsive design, mobile first approach preferred.
- Embed font the right way, embed the font family, avoid embedding bold, italic, regular versions individually.
- And lastly, try not to write
<br>tag for spacing (and multiple times) unless a new line is required. Also,
<hr>horizontal rule tag shouldn't be used for styling purposes. You can use border-bottom instead and add some padding.
CSS & JS:
- Don't mix your CSS with HTML, avoid inline approach as much as possible
- Use CSS reset as and when required
- @import approach is slower, use only when there's no other option for example when you're working in a large web application.
- We prefer using SASS as much as possible, SASS is extremely strong and faster way of writing CSS. There are plenty of SASS tutorials available out there in youtube.
- Having different stylesheets in the form of SASS files is preferred so that it can be organized. However, one has to keep it under control.
- Write in multiple lines and spaces
- Build proficient selectors
- Avoid units on zero values (for example,
margin-top:0;works without writing 0px.)
- Avoiding blank divs for styling purposes is a good practice
- Modularize styles for reuse
- Remove redundant styles when you're no longer using those styles.
- Use the goodness of flexbox and CSS grids whenever possible
- Use abstract class names.
- Thoroughly test before pushing your codes.
(Credit goes to Mr. Habibullah Hadi for adding these modern work-flows to my list)
- Use modern front-end work flow whenever possible
- Use NPM modules / yarn as dependency
- Gulp / Webpack
- ES6 standard JS code (babel - transform code into vanilla classic JS while deliver)
- Minimize requests
- Uglify all SASS or CSS files into one
- Use autoprefixer
- Uglify all JS code into one
- Optimize image files
- Follow or use proper indentation guideline (.editorconfig)
- Thoroughly validate your codes using this website- https://validator.w3.org/
Writing well organized and clean codes is going to be a satisfying experience if coding is your passion. It is said that, anyone can code but it takes a passionate and dedicated coder to write clean codes and take it to the next level. Many of us were not aware of some of these simple practices, hopefully this article would help them getting all the points in one document. Let's discuss if one needs more in-depth explanation about these points. If I have missed any, feel free to write them in the comment section.
Subscribe to Shopnil Mahmud
Get the latest posts delivered right to your inbox