Web Front-end: 11 principles that keep your code clean, web Front-end 11
Writing a Web page is like building a house. The house won't fall if the foundation is solid. 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 eleven aspects. As long as you can stick to the following twelve principles when writing code, 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:
<!DOCTYPE HTML> To learn more about this, click:
We should use character encoding in the Code. For example, "&" should be replaced by "&" in the code.
To learn more about this, click:
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 into a page. Some directly put styles into the "" of the page. This is a bad habit, because it will not only confuse our tags, these styles are only applicable to this HTML page. Therefore, we need to propose CSS separately and store it outside, so that the subsequent pages can also be linked to these styles. If you need to modify the pages, we only need to modify the style file. As shown in:
The above is just a style. In fact, javascript scripts are the same as CSS styles. I finally want to express what I want to say: "When creating a web page, try to put your CSS style and javascript script in a single file, then reference these files through links. The biggest advantage of this is to facilitate the 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.
In other words, block elements cannot be placed in the inline element. The above is just an example. I just hope that you will not make such a super mistake during normal production. (Web Front-end learning and communication group: 328058344 chat prohibited, not welcome !)
6. Delete unnecessary tags
First, let's take a look at an instance:
Obviously, a navigation menu is created. In the example, a "div # topNav" contains the list "ul # bigBarNavigation ", the "div" and "ul" lists are both block elements, and adding "div" here is used to pack "ul" does not play any role at all. Although the appearance of "div" has brought us great benefits for creating web pages, we do not have to use them in such a mess. 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 kind of 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:
9. defined class name or ID name
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, define a special class name or ID name in "" on your page, so that you can easily meet your needs. I don't know if you have used this method:
Defining a unique class and ID name for "" is very powerful, not only to help you change the layout as above, but also to help you implement a certain part of the page to achieve special effects, this does not affect the performance of other pages. Why is there such a function? I don't need to say that I think everyone knows it. Because the content of each page is a descendant element.
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:
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. I hope you will like this tutorial. If you have any good experience, please share it with us.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
