12 Laws of Web Design for Clean Code [Graphic]

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, suitable for anyone engaged in web design.

1. Strict DOCTYPE
Do it right. Whether it is HTML 4.01 or XHTML 1.0, they both provide Strict mode. Using Strict mode can ensure 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 front of the <head> section 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.

References:

Wikipedia: UTF-8
A tutorial on character code issues
The Extended ASCII table

3. Proper locking and indenting will not affect the rendering of the web page, but will significantly improve the experience of reading the source code. There are no specific rules for indentation, but it is good practice to always be consistent.

References:

Clean up your Web pages with HTML TIDY

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 cache mechanism can effectively reduce the repeated download of the same code.

5. Correctly nest tag tags 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. The tag is a block object, but an inline object, and an inline object should not contain a block object.

6. Eliminate unnecessary <div>
<div> is often abused (especially in the DIV+CSS myth we are in now - translator), people want to put everything in a <div> in order to assign CSS styles to them, this abuse will lead to bloat.

References:

Divitis: what it is, and how to cure it.

7. Use better naming conventions As shown in the figure below, Cat's CSS class is named red italic, suggesting that Cat uses red italics. What if you want to change Cat to blue bold?

8. Try to use CSS to control the layout of text as shown in the figure below. Do not use uppercase directly. Use CSS to control the format of these text layouts, which will be more flexible.

9. Assign a separate class/id to <body>
Assigning a separate class/id to the body tag is a good way to locate any object in the page, because all objects in the page are located in the body.

References:

ID Your Body For Greater CSS Control and Specificity
Case study: Re-using styles with a body class

10. Validation Needless to say, you should validate the code of the web page as much as possible. Although some code errors can be automatically corrected by the browser, some errors will bring bad consequences, especially when you are in Strict mode. Even if it does nothing, seeing that green W3C validation mark can at least make you feel better.

There is no need to be too rigid about whether a website passes W3C validation or not. There are many more considerations in Web design. If you only stick to the W3C validation results, it may affect some more important factors. For example, IE6 has many bugs in W3C standards. If you announce that your website does not support IE6 in order to pass W3C validation 100%, it will be more trouble than gain, at least in China. - Translator

References:

The W3C Markup Validation Service
XHTML-CSS Validator
Free Site Validator (checks entire site, not just one page)

11. Reasonable structural order Keep the web page structure in a logical order.

12. Do your best If you are writing from scratch, it is certainly much easier to stick to the above principles. If you have to modify old code, it will be painful. Some CMS systems have poor coding that will bog you down, or your website is large and there are too many things to change. In any case, it is very important to always maintain good habits.

<<: Detailed process of installing Docker, creating images, loading and running NodeJS programs

>>: How to use javascript to do simple algorithms

12 Laws of Web Design for Clean Code [Graphic]

How to solve jQuery conflict problem

Solution to Docker pull timeout

Example code for using CSS to implement the style of logistics progress

Implementation of debugging code through nginx reverse proxy

Detailed explanation of Vue transition effects and animation transition usage examples

How to package the project into docker through idea

The most comprehensive explanation of the locking mechanism in MySQL

Sample code for implementing mysql master-slave replication in docker

A brief analysis of whether MySQL primary key uses numbers or uuids for faster query

Detailed explanation of function classification and examples of this pointing in Javascript

Recommend

How to change the database data storage directory in MySQL

How to solve the problem of Chinese garbled characters when inserting table data into MySQL

How to implement the builder pattern in Javascript

In-depth explanation of Mysql deadlock viewing and deadlock removal

Docker builds the code detection platform SonarQube and detects the process of Maven projects

Implementation code for using CSS text-emphasis to emphasize text

How React Hooks Work

MySQL 8.0.16 winx64 installation and configuration method graphic tutorial under win10

Vue Element UI custom description list component

MySQL sql_mode analysis and setting explanation

Detailed explanation of nginx upstream configuration and function

MySQL database green version installation tutorial to solve system error 1067

How to create components in React

Summary of common HTML elements including basic structure, document type, header, body, etc.

Java uses Apache.POI to export HSSFWorkbook to Excel