11 rules to keep your code tidy

Writing Web pages is like building a house. The foundation will be solid so that the house will not fall down. The same is true when we make Web pages. A good HTML structure is the beginning of making a beautiful website. Similarly, good CSS only exists in equally good HTML, so the advantages of a clean and semantic HTML are many. So in daily production, have we achieved this? Let’s look at a picture together:

The picture above shows two pieces of code. I think everyone will only like the first one. Let’s not talk about its semantics first. At least its structure makes us look refreshing. But what about the second one? Code that looks like bad code at first glance, code that makes people hate it. So how can we write good code, clean code? Let's learn from the following twelve aspects together. As long as you can adhere to the following twelve principles when writing code in the future, you can ensure that the quality of your code will improve, and the code you write will be loved by everyone.

1. Statement of DOCTYPE

If we want to do something well, we must first know what rights we have to do it. Just like the "DOCTYPE" statement, we do not need to discuss whether to use HTML4.01 or XHTML1.0 or the current HTML5 provides strict Version or transitional version, these can well support the code we write:

Since our current layout can make a good layout without table layout, we can consider not using transitional type but using strict type "DOCTYPE". For backward compatibility, I recommend using HTML5 declaration mode:

fef50554eca1a427827adaa329da8122

1e5e51688f59c7a41195801f5e033143

If you want to know more about this, you can click:

1. W3C: Recommended DTDs to use in your Web document

2. 
   

3. Fix Your Site With the Right DOCTYPE!

4. 
   

5. No more Transitional DOCTYPEs, please

2. Character set and encoding characters

At the beginning of each page, we set the character set in 93f0f5c25f18dab9d176bd4f6de5d30e. We all use "UTF-8" here

<meta charset="UTF-8" />

And when we usually write on the page, we often encounter symbols like "&", so we should not write "&" directly on the page:

We should use character encoding in the code to achieve this. For example, "&" we should use "&" to replace it in the code.

If you want to know more about this, you can click:

1. Wikipedia: UTF-8

2. 
   

3. A tutorial on character code issues

4. 
   

5. The Extended ASCII table

# 3. Correct code indentation

In page editing, whether the indentation of the code is correct will not affect any function of your website, but if you do not have a standardized indentation principle, the people who read your code will be very angry, so the correct code Indentation improves the readability of your code. The indentation of a standard program should be a tab character (or a few spaces). To make it more vivid, let’s look at the picture at the beginning of the article, or look at the picture shown below. After reading it, you will know how to use it in the future. How to write the code so that people can read it happily:

Needless to say, everyone will like the code below. This is just a matter of one's habits, but it is recommended to do it well from the beginning to benefit others and yourself. For an introduction to this aspect, you can also refer to: Clean up your Web pages with HTML TIDY.

IV. External links to your CSS styles and Javascript scripts

There are many ways to write CSS styles in the page. Some of them directly put the style into the "93f0f5c25f18dab9d176bd4f6de5d30e" of the page. This will be a very bad habit, because this will not only mess up our markup, but also these styles. Only suitable for this HTML page. Therefore, we need to separate the CSS and save it externally, so that subsequent pages can also link to these styles. If your page needs to be modified, we only need to modify the style file. As shown in the picture below:

What we are talking about above is just styles. In fact, JavaScript scripts are the same as CSS styles. With pictures and texts, what I ultimately want to express is "When making web pages, try to put your CSS styles and javascript scripts in a separate file, and then reference these files through links. This way The biggest advantage is that it facilitates the management and modification of your styles and scripts”

. 5. Correct tag nesting

When we write HTML, we always need the hierarchical nesting of tags to help us complete the writing of HTML, but there are certain rules for the nesting of these HTML. If we want to explain it in detail, we may need to use several chapters to describe it. So what I want to say here today is that we should not make the following super mistakes when writing HTML:

The structure in the picture above is common to us. For example, the title of the homepage, then we should pay attention to it. We cannot put "4a249f0d628e2318394fd9b75b4636b1" in the "3499910bf9dac5ae3c52d5ede7383485" tag. In other words, we cannot put any elements. and in inline elements. The above is just an example, I just hope that everyone should not make such super mistakes in daily production.

6. Delete unnecessary tags

First, let’s take a look at a screenshot of an example:

The above picture is obviously the production of a navigation menu. In the example above: there is a "p#topNav" wrapping the list "ul#bigBarNavigation", and the "p" and "ul" lists are both block elements, plus "p" used here to wrap "ul" has no effect at all. Although the appearance of "p" has brought us great benefits in making web pages, we don't need to use it everywhere. I wonder if you usually pay attention to such details? I made such a mistake. If you have also had such an experience, then starting from today, from now on, we will work together to correct such mistakes.

For information on how to use labels correctly, if you are interested, you can click: pitis: what it is, and how to cure it.

Seven. Use better naming

The naming mentioned here is to define class names or ID names for relevant elements in your page. Many students have this habit. For example, if an element has a red font, add "red" to it, or even layout They all write "left-sidebar", etc., but have you ever thought about what if this element is defined with "red" and the customer asks for "blue" in a few days? In other words, the "left-sidebar" sidebar at that time no longer wanted to be placed on the left, but on the right. In this way, our previous naming can be said to have no meaning at all, as shown in the picture below Shown:

Then it is very important to define a good name. Not only can I understand your code, but others can also easily understand your code. For example, a good class name and ID name "mainNav", "subNav", " footer" etc., he can describe what is involved. The bad ones are as mentioned above.

If you want to know more about this, you can click:

1. Standardizing CSS class and id names

2. 
   

3. CSS Tip #2: Structural Naming Convention in CSS

4. 
   

5. CSS coding: semantic approach in naming convention

6. 
   

7. CSS Naming Conventions and Coding Style

Eight, leave the version of CSS

When we design menus, we sometimes require the text of all menu options to be in uppercase. Do you usually set them to uppercase directly in the HTML tag? If so, I think it's not good. For better scalability in the future, we shouldn't set them to all uppercase in HTML. A better solution is to achieve it through CSS:

　9. Define the class name or ID name of 6c04bd5ca3fcae76e30b72ad730ca86d

I don’t know if you have encountered such a problem when making web pages. The entire website uses the same layout and structure. In other words, you use the same structure and the same class name in the layout of the page. But suddenly your supervisor says that in response to customer demand, the layout of a page needs to be swapped between the sidebar and the main content. At this time, you don’t want to modify the structure of the entire page just to change the layout. A good solution is to define a special class name or ID name in the "6c04bd5ca3fcae76e30b72ad730ca86d" of your page. , so that you can easily achieve what you want. I don’t know if you have used this method before:

Defining a unique class and ID name for "6c04bd5ca3fcae76e30b72ad730ca86d" is very powerful, not only to help you change the layout like above, but the most important thing is that sometimes it can help you implement a certain part of the page to achieve special effects. It does not affect the performance of other pages. I don’t need to explain why there is such a function. I think everyone knows it. Because the content of each page is the descendant element of "6c04bd5ca3fcae76e30b72ad730ca86d".

If you want to know more about this, you can click:

1. ID Your Body For Greater CSS Control and Specificity

2. 
   

3. Case study: Re-using styles with a body class

　10. Verify your code

People will inevitably make mistakes, and it's the same when we write code. Sometimes you will always write in lowercase or more words. For example, you forget to close your element tags, and you don't remember to write the necessary attributes of the elements. Although there are some mistakes that will not be given. No matter what disastrous consequences you bring, it will also bring you mistakes that you cannot predict. Therefore, it is recommended that you verify your code after you finish writing it. Verified code is always better than unverified code:

In order to effectively verify your code, we can use relevant tools or browser plug-ins to help us complete it. If there are no errors in your code, the W3C verification tool will display green text in front of you, which makes you extremely excited, because it once again proves that the code you wrote can withstand W3C standards.

If you want to know more about this, you can click:

1. The W3C Markup Validation Service

2. 
   

3. XHTML-CSS Validator

4. 
   

5. Free Site Validator (checks entire site, not just one page)

　11. Logical sequence

This is a rare error situation, because I think everyone will not disrupt the logical order when writing pages. In other words, if possible, it is best to have a logical order for your website, such as first Write the header, then the body, and finally the footer. Of course, sometimes we encounter special circumstances. The footer part is above the sidebar of our code. This may be because it best suits your website design needs. This may be understandable, but if you have other ways to implement it, we You should put the footer at the end of a page, and then use specific techniques to make it meet your design needs:

Above we discussed several ways to get you started writing clean HTML code. From the beginning of a project, this is very easy, but if you need to fix an existing code, it will be more or less difficult. What I said above is mainly to tell you how to learn to write a good, clean HTML code and stick to it. I hope that after reading this article, you can start from scratch and insist on writing a clean HTML code in your next project.

Related documents: 10 most common HTML tag mistakes

English source: 12 Principles For Keeping Your Code Clean

The above is the detailed content of 11 rules to keep your code tidy. For more information, please follow other related articles on the PHP Chinese website!