11 principles for keeping your code clean-jerrylsxu

The code is neat. jerrylsxu writes a Web page just like building a house. The foundation is solid and the house won't fall down. Similarly, we make the same Web page. A good HTML structure is the beginning of creating a beautiful website. Similarly, good CSS only exists in the same good HTML, so a clean and semantic HTML has many advantages. Do we do this in normal production? Let's take a look at an image:

I think everyone will only like the first one. Let's not talk about its semantics, at least its structure makes us look fresh, but what about the second one? At first glance, it is a bad code and annoying code. So how can we write a good code and clean code? Next we will learn from the following 12 aspects, as long as you can stick to the following 12 principles when writing code in the future, ensure that your code quality can be improved, in addition, the code you write will be easy to understand.

1. DOCTYPE Declaration

If we want to do one thing well, we must first know what rights we have to do, just as the DOCTYPE statement, we do not need to discuss whether to use HTML4.01 or XHTML1.0 or the current HTML5 provides a strict version or a transitional version, which can well support the code we write:

Because our current layout does not require a table layout, we can consider using a strict "DOCTYPE" instead of a transition type. To achieve backward compatibility, I suggest using the HTML5 declaration mode:

To learn more about this, click:

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

2. Fix Your Site With the Right DOCTYPE!

3. No more Transitional DOCTYPEs, please

Ii. Character Set and encoding characters

At the beginning of each page

1	<meta charset="UTF-8" />

In addition, we often encounter symbols like "&" when writing pages, so we should not directly write "&" on the pages like this:

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

To learn more about this, click:

1. Wikipedia: UTF-8

2. A tutorial on character code issues

3. The Extended ASCII table

3. correct code indentation

In page editing, whether the code indentation is correct does not affect any functions of your website. However, if you do not have a standard indentation principle, it will make people who read your code very angry, so correct code indentation can enhance the readability of your code. The indentation of the standard program should be a tab (or a few spaces). Let's take a look at the figure at the beginning of the article, or let's take a look at the figure shown below, you can see how your code will be written in the future:

Needless to say, you all like the following code. This is just a habit of a person, but it is recommended to do well from the beginning. For more information, see Clean up your Web pages with html tidy.

4. External links your CSS styles and Javascript scripts

There are many ways to write CSS styles on pages. Some directly put styles into the"

The above is just a style. In fact, javascript scripts are the same as CSS styles. In the end, what I want to express is"When creating a web page, try to put your CSS style and javascript script in a separate file, and then reference these files through links. The biggest benefit of doing so is that, convenient management and modification of your styles and scripts."

5. Correct tag nesting

When writing HTML, we always need tag-level nesting to help us write HTML. However, these HTML nesting rules must be detailed, we may use several chapters to describe it. What I want to talk about today is that we should not make the following super errors when writing HTML:

For example, the title of the home page, so we should pay attention to it.

"Put in the" "label, in other words, it is impossible to block elements and In-row elements. The above is just an example. I just hope that you will not make such a super mistake during normal production.

6. Delete unnecessary tags

First, let's take a look at an instance:

Obviously, a navigation menu is created. In the example, "p # topNav" contains the list "ul # bigBarNavigation ", the "p" and "ul" lists are both block elements, and adding "p" here is used to pack "ul" does not play any role at all. Although the appearance of "p" has brought us great benefits in creating web pages, we do not need to use such a page. Do you know if you pay attention to such details? I have made such a mistake. If you have had such an experience, we will try our best to correct it from today and now.

For details about how to use tags correctly, click Divitis: what it is, and how to cure it.

7. Better naming

The name mentioned here is to define the class name or ID name for the relevant elements on your page. Many people have this habit. For example, there is an element whose font is red, add "red" to him, and even write "left-sidebar" to the layout, but have you ever thought about it? If this element defines "red, in a few days, what should the customer require to use "blue? Or, the "left-sidebar" sidebar at that time does not want to be placed on the left, but on the right. In this way, the name above can be said to have no meaning at all, as shown in the following figure:

So it is necessary to define a good name. Not only can you understand your code, but others can also easily understand your code, for example, a good class name and ID "mainNav", "subNav", and "footer" can describe the content. Not good, as mentioned above.

To learn more about this, click:

1. Standardizing CSS class and id names

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

3. CSS coding: semantic approach in naming convention

4. CSS Naming Conventions and Coding Style

8. Exit the CSS version

When designing menus, we sometimes require that all texts of all menu options be capitalized. Do you usually set them to uppercase directly in HTML tags? If so, I think it is not good. For the sake of better scalability in the future, we should not set them to all uppercase in HTML. A better solution is to implement it through CSS:

IX. Definitions

When you create a web page, you do not know if you have encountered such a problem: the whole site uses the same layout and structure. In other words, you have used the same structure in the layout of the page, the same class name, but suddenly your superior supervisor said that according to the customer's needs, there is a page layout that needs to be swapped between the sidebar and the main content. At this time, you do not want to modify the structure of the entire page to change the layout. At this time, there is a good solution, that is,"

To

To learn more about this, click:

1. ID Your Body For Greater CSS Control and Specificity

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

10. Verify your code

Errors are inevitable. The same is true when we write code. Sometimes you write in lower case or more. For example, if you forget to close your element tag and do not remember to write the attributes required by the element, although there are some errors that will not bring you any disastrous consequences, they will also bring you unexpected errors. So it is recommended that you verify your code when writing the code. The verified code is always better than the unverified code:

To effectively verify your code, we can use related tools or browser plug-ins to help us complete the process. If your code has no errors, the W3C verification tool will display green text in front of you, which makes you very exciting, it proves that the code you write can withstand W3C standards.

To learn more about this, click:

1. The W3C Markup Validation Service

2. XHTML-CSS Validator.

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

XI. Logical Order

This is a rare error, because I don't think everyone will disrupt the logic order when writing pages. In other words, if possible, it is best to make your website have a sequential logic order, for example, first write the page header, write the page body, and then write the footer. Of course, sometimes we may encounter special situations. The footer part is above the sidebar of our code. This may be because it is best suited to your website design needs. This may be understandable, however, if you have other methods, we should put the footer at the end of a page, and then let it meet your design requirements through specific technologies:

We have discussed how to write a clean HTML code. From the very beginning of a project, this is all very easy, but if you need to fix an existing code, it will be somewhat difficult. As mentioned above, it mainly tells you how to learn and write a good and neat HTML code, and keeps writing it like this. I hope that after reading this article, you can write a neat HTML code from the beginning in your next project.

The above are 11 principles that keep your code clean-jerrylsxu's content. For more information, see the PHP Chinese website (www.php1.cn )!