Beautiful code is the foundation of a beautiful website. Excellent CSS only exists on top of equally excellent HTML. Clean, semantic HTML code makes a website more robust. This article describes 12 laws for achieving clean web design code, which is suitable for anyone engaged in web design.
1. Strict DOCTYPE
If you want to do it, do it right. Whether it is HTML 4.01 or XHTML 1.0, they all provide Strict mode. Using Strict mode can ensure that our code does not hide any errors.
2. Character set declaration, special characters are encoded and processed.
The character set declaration should be placed at the front of the hea> part so that the browser knows how to display all the content in the web page, including the title. In addition, some special characters, such as &, are best replaced with &, which is the safest method.
3. Proper locking and
indentation will not affect the rendering of web pages, but will significantly improve the experience of reading source code. There are no specific rules for indentation, but it's a good practice to be consistent throughout.
4. Put CSS and JavaScript
in
external files. Putting CSS and JavaScript in external files for reference not only reduces the size of a single web page, but also means that other web pages can share these codes. In addition, the browser's caching mechanism can be better.Minimize repeated downloads of the same code.
5. Nest the Tag tag correctly
as shown below. In the first line of code, the h1> tag is nested in the a> tag. Although most browsers will render it correctly, this is not a good habit. Tags are block objects, but Inline objects, inline objects should not contain block objects.
6. Eliminate unnecessary divs.
Divs are often abused (especially in the DIV+CSS myth we are in now - Translator). People want to put everything in a div so that they can have CSS styles assigned to them. This abuse can cause Resulting in bloat.
7. Use better naming rules.
As shown below, the CSS class of Cat is named red italic, which implies that Cat uses red italic. What if you want to change Cat to blue bold?
8. Try to use CSS to control the formatting of text
as shown in the figure below. Do not use uppercase letters directly. Use CSS to control the formatting of text, which will be more flexible.
9. Assign an independent class/id to the body
. Assign an independent class/id to the body tag, which can easily locate any object in the page, because all objects in the page are located in the body.
10. Verification
Needless to say, you should verify the code of the web page as much as possible. Although some code errors can be automatically corrected by the browser, some errors will have bad consequences, especially when you are in Strict mode. Even if you do nothing, seeing that green W3C verification mark can at least make you feel better.
There is no need to be rigid to pass the W3C verification. There are more considerations in Web design. Only sticking to the W3C verification results may affect some more important factors. For example, IE6 has many bugs in the W3C standard. If you want 100 %Declaring through W3C verification that one's website does not support IE6 will, at least in China, lose more than gain - Translator
11. Reasonable structural order
Keep the web page structure in a logical order.
12. Do the best you can
If you are writing from scratch, it is of course much easier to maintain the above principles. If you have to modify the old code, it will be painful. Poor coding of some CMS systems will bog you down, or your There are so many things to change on a large website, no matter what, it is very important to always maintain good habits.