The separation of structure and style and behavior

Achieving high-quality code requires us to do it on the basis of the separation of structure, style and behavior: streamlined, reused, and orderly.

Simplify: minimize the size of the file and improve the page loading speed.

Reuse: improve the reuse of code, reduce redundant code, and improve the speed of development.

Order: improve the structure of the code, organize the structure of the code is more conducive to maintenance and response to special circumstances.

In our work, you may encounter this kind of code, or you may write such code.

download

What a beautiful code.

First of all, regardless of the reasonableness of the code, we only discuss the standard of the code, which does not follow the most basic web standard-the separation of structural style and behavior. The above code is a piece of html,css,js mixed together. In order to improve web page performance and facilitate team development, we should separate the structure, style, and behavior in separate files, as follows.

Test.html file:

download

Test.css file:

.myTd {width:100%;height:20px;text-align:center;} .myFont {color:#346F0E;} # myInput {margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif, Arial; padding-top:2px;padding-left:1px}

Test.js file

Var myInput = document.getElementById ("myInput"); myInput.onmouseover = function () {this.focus ();} myInput.onfocus = function () {this.select ();}

Or if you really have to write it in a html page to be comfortable, then it's best to use the following with style and script tags.

download