Document directory
- 1. Strict doctype
- 2. Character Set declaration, encoding of special characters
- 3. Proper locking
- 4. Place CSS and Javascript in an external file.
- 5. Correctly nest tag tags
- 7. Better naming rules
- 8. Use CSS to control text layout as much as possible
- 10. Verify
- 11. Reasonable Structure order
- 12. Do your best
Beautiful code is the foundation of beautiful websites. Excellent CSS only exists on top of the same excellent html. The clean and semantic HTML code makes a website more robust. This article describes 12 laws for implementing clean web design code, which is suitable for anyone engaged in web design.
1. Strict doctype
Do it right. Both HTML 4.01 and XHTML 1.0 provide strict mode, which ensures that our code does not hide any errors.
References:
- W3C: Recommended dtds to use in your web document
- Fix your site with the right doctype!
- No more transitional doctypes, please
2. Character Set declaration, encoding of special characters
The character set declaration should be placed at the beginning of the
References:
- Wikipedia: UTF-8
- A tutorial on character code issues
- The extended ASCII table
3. Proper locking
Indentation does not affect page rendering, But it significantly improves the experience when reading source code. There are no specific rules for indentation, but it is a good habit to always maintain consistency.
References:
- Clean up your web pages with HTML tidy
4. Place CSS and Javascript in an external file.
Placing CSS and Javascript in external files for reference not only reduces the size of a single webpage, but also means that other webpages can share the Code. In addition, the browser's cache mechanism can effectively reduce repeated downloads of the same Code.
5. Correctly nest tag tags
For example, in the first line of code, the
6. eliminate unnecessary <div>
<Div> it is often abused (especially in our current Div + CSS myth-translators). People want to put everything in <div> to assign them CSS styles, this abuse will lead to bloated.
References:
- Divitis: what it is, and how to cure it.
7. Better naming rules
For example, the cat CSS class is named red italic, which implies that cat uses red italic. What if you want to change cat to blue bold?
8. Use CSS to control text layout as much as possible
As shown in, do not use uppercase letters directly. Use CSS to control the formatting of these texts, which is more flexible.
9. assign an independent class/ID to <body>
Assign an independent class/ID to the body tag to locate any object on the page, because all objects on the page are in the body.
References:
- ID your body for greater CSS control and specificity
- Case study: re-using styles with a body class
10. Verify
You should verify the webpage code as much as possible. Although some code errors can be automatically corrected by browsers, some errors may cause negative consequences, especially when you are in strict mode. Even if nothing happens, seeing the green W3C verification mark can at least make yourself comfortable.
W3C verification does not have to be rigid. There are more considerations in the web design. The W3C verification results may affect more important factors, such as IE6.
There are many bugs in W3C standards. If you declare that your website does not support IE6 for 100% passed W3C verification, at least the loss will be worth the candle in China
References:
- The W3C markup validation service
- XHTML-CSS validator.
- Free site validator (checks entire site, not just one page)
11. Reasonable Structure order
Keep the webpage structure in a logical order.
12. Do your best
If you write from scratch, it will be much easier to maintain the above principles. If you want to modify the old code, it will be very painful, the poor coding of some CMS systems will put you in the mud, or you have to change too much things on a large scale. In any case, it is very important to keep a good habit.
Read more:
- 101 metrics of the perfect website
International Source: http://www.smashingmagazine.com/2008/11/12/12-principles-for-keeping-your-code-clean/
Source: comsharp CMS