Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to write high-quality code for Web front-end development. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

(P4)

Web standard is composed of a series of standards, and its core idea is to separate the structure, style and behavior of web pages, so it can be divided into three parts: structure standards, style standards and behavior standards.

Style standard-XML standard, XHTML standard, HTML standard

Style standard-CSS standard

Behavioral standards-DOM standard and ECMAscript standard

(P23) CSS layout is commonly known as Div + CSS layout, or (X) HTML + CSS layout. Its core idea is to use CSS to control the style of elements in a web page, including position, size, color, etc.

(P26)

The CSS layout is only part of the Web standard. Among the three elements of HTML, CSS and Javascript, HTML is the most important, structure is the key, and style is used to modify the structure.

First determine the HTML, determine the semantic standard, and then choose the appropriate CSS

(P27) the browser will give a default style based on the semantics of the tag

(P29) Web Developer-- Web page debugging plug-in

(P43) is not obvious in semantics, so it can be used

Where you can use it, use it as much as possible.

Because

By default, there is an up and down interval, which makes it more readable after removing the style, which is beneficial to the compatibility of special terminals.

(P46)

If you omit the DTD declaration, Firefox will still parse the web page in a standard style, but in IE (including IE6, IE7, IE8) will trigger a weird pattern

A method of organizing CSS-- base.css + common.css + page.css

(P58) try not to contain the same part between the module and the module. If there are the same parts, they should be extracted and split into a separate module.

(P60) the module should be as simple as possible under the principle of keeping the quantity as small as possible, so as to improve the reusability.

(P71) the class attribute of the HTML standard is different from the id attribute. Id can only hang one, while class can hang multiple, separated by spaces

(P81) if you are not sure that the upper and lower margin of the module is particularly stable, it is best not to write it into the class of the module, but to use a combination of classes to hang the atomic class used for the border for the upper and lower margin.

(P81) the rule of weight is like this-- the weight of the HTML tag is 1, the weight of the HTML class is 10, the weight of the id is 100.

(P82) if the weight of the CSS selector is the same, then the style will follow the nearest principle, which selector is last defined. The "nearest principle" refers to the order in which the selector is defined, not the order of class names.

(P84) in order to ensure that the style is easy to be covered and improve maintainability, the CSS selector needs to keep the weight as low as possible.

(P85) if you use less sub-selectors, you need to add more class.

(P87) CSS Sprite "picture flipping technology"-merges multiple pictures into one, and then uses the background-position attribute to show the required parts

(P88) whether or not to use CSS Sprite mainly depends on website traffic

(P89) in general, it is recommended to use class as much as possible and less id.

(P93)

CSS hack--

1. IE conditional annotation method

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.