15 Development Principles of Web Front-end Development

We summarize 15 development principles that web front-end programmers should follow. Hope this article is helpful for your front-end application development.

1. Make Good Use of DIV for Layout

When developing a web page, the first thing to consider is to differentiate the page focus. By wrapping this content in DIV tags, the page's code will appear neat and well-indented.

2. Separate HTML Tags and CSS Style Sheets

A good page should separate HTML tags and CSS style sheets. This is a principle every web developer should know when they first get into web development. However, to this day, there are still many developers who do not strictly follow this principle.

Do not embed style sheet code in HTML tags. Developers should get into the habit of creating separate files to store CSS-style sheets. This will also make it easier for other developers to get their work done quickly when they modify your code.

3. Optimize CSS Code

Adding multiple CSS files to a website is common these days. However, when a website contains too many CSS files, it can slow down its responsiveness of the website. Of course, this problem is easy to solve. Streamlined code and optimized multiple CSS files into a single file. This method can significantly improve the loading speed of the website. Also, there are many tools that can be used to optimize CSS files, and you can find the right tool by googling.

4. Optimize the JavaScript File and Place It At the Bottom of the Page

Like CSS, it is common practice to add multiple Javascript files to a page. But this also reduces the responsiveness of the website. To this end, developers should streamline and optimize these Javascript files.

But unlike CSS, browsers generally don't support parallel loading. This means that when a browser loads a Javascript file, no other content is loaded at the same time. As a result, the loading speed of the web page seems to slow down.

The solution to this problem is to put the load order of the Javascript files later. To achieve this, developers can place Javascript code at the bottom of the HTML document, preferably close to the tag.

5. Make Good Use of Title Elements

<h1> to <h6> These elements are used to highlight the key content of the page. This helps users focus on the key parts of the page.

6. Use the Right HTML Tags in the Right Places

HTML tags are the key to structuring canonical content. For example, the <em> tag is used to emphasize important content. The <p> tag is useful for highlighting paragraphs of articles. If you want to add blank lines between paragraphs, don't use <br /> tags.

For a group of related elements, the <ul>, <ol>, or <dl> tags are recommended. However, don't use the <blockquote> tag incorrectly, as it was originally used to define block applications.

7. Avoid Abusing the <div> Tag

Not all block elements should be created with

tags. For example, you can add display:block to the property of an inline element to display it as a block element.

8. Use Lists to Create Navigation

Use the <ul> list tag, coupled with the corresponding CSS style, to create a beautiful navigation menu.

9. Don't Forget to Close Tags

Now, whenever I recall my first class on web development in college, the importance of HTML structure mentioned by the professor always comes to my mind. According to the W3C standard, tags should be closed. That's because, in some browsers, if the label is not closed according to the standard, there will be a problem of abnormal display. This is especially true in IE6, IE7, and IE8.

10. Tag Lowercase Syntax

It is an industry-standard to use lowercase syntax for labels. Although the uppercase syntax does not affect the display of the page, the code readability is poor.

11. Add ALT Attribute to the Image Tag

In <img> tags, the alt attribute is often very useful. Because search engines usually cannot crawl image files directly. However, if the developer adds the description of the image in the alt attribute, it will be convenient for search engines to crawl.

12. Use <label> and <fieldset> in Tables

To improve code quality and make table content easy for users to understand, we should create table elements with <label> and <fieldset> tags.

13. Label and Separate Browser Compatible Codes from Each Other

Cross-browser compatibility is a major concern for a web developer. Often, developers code for different browsers, aka CSS hacks. However, if the developer can indicate which version of the browser the code is written for when coding, it will bring great convenience to future maintenance work.

14. Avoid Over-commenting

As a developer, it is a good habit to add comments to your code, it is easy to understand and easy to maintain. This is common in other programming languages like PHP, Java, and C#. However, HTML/XHTML is a text markup language and is very easy to understand. Therefore, there is no need to comment on every line of code.

15. Test Code

It is recommended that developers use the W3C Text Markup Validation Service to test code. It's a testing tool that helps you find bugs in your pages. Moreover, it can also start from the page error and help you locate the corresponding code. This is often difficult to do after coding is done. But developers need to pay attention that the code that passes the verification is not the code with excellent performance.