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

Analysis of HTTP interface testing process based on postman

12 Laws of Web Design for Clean Code [Graphic]

Analysis of HTTP interface testing process based on postman

MySQL sorting using index scan

MySQL full-text search usage examples

Use crontab command in Linux environment to set up scheduled periodic execution tasks [including PHP execution code]

Detailed explanation of the available environment variables in Docker Compose

25 CSS frameworks, tools, software and templates shared

Solve the problem that the element DateTimePicker+vue pop-up box only displays hours

Analysis of the use and principle of Docker Swarm cluster management

Detailed explanation of ECharts mouse event processing method

Docker batch start and close all containers

Recommend

How to use Node.js to determine whether a png image has transparent pixels

How to use Web front-end vector icons

CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards

Vue implements countdown between specified dates

Example operation MySQL short link

How to deploy LNMP & phpMyAdmin in docker

Implementing a simple whack-a-mole game in JavaScript

Summary of MySQL date and time functions (MySQL 5.X)

How to bind domain name to nginx service

Common usage of regular expressions in Mysql

Example of usage of keep-alive component in Vue

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

How to connect Xshell5 to Linux in a virtual machine and how to solve the failure

Detailed explanation of how to use $props, $attrs and $listeners in Vue

A brief discussion on the maximum number of open files for MySQL system users