abhishek

abhishek

CATEGORIES : ALL
2021/08/17

Front-end development best practises- Do’s and Don’ts

OVERVIEW

It carries enormous amount of importance how we write readable and well structured codes. While HTML gives us the structure of every web page, CSS helps with the presentation layer and then JavaScript gives life to a web page. Writing thoughtful and well organized code is pivotal to any application, as the front end foundation needs to be strong enough to hold the entire application. We often miss some basic practices and to make all our developers aware, this document covers these best practices at a glance.

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
    (</div><!--./container-->)
  • 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 <head>and JS at the bottom of the page wherever it applies. Although, this one is more suited for websites rather than web applications but loading the styles first and javaScript later is logically valid.
  • 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- .marginLeft0)
  • For naming class and ID’s, we prefer using Block Element Modifier (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
  • Similarly, do not mix JavaScript with HTML codes
  • Try not to give styles using JavaScript
  • 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.

MODERN WORK-FLOW

(Credit goes to Mr. Habibullah Hadi for adding these modern work-flows to my list)

  • Use modern front-end workflow whenever possible
  • Use NPM modules / yarn as dependency
  • 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

CONCLUSION

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.

目次