Writing high-quality code: The way to develop the Web front-end (II.)

The fourth chapter: high-quality CSS

1) Quirks mode and Standard mode

In standard mode, browsers perform pages according to specifications, while quirks patterns typically mimic the behavior of older browsers to prevent old sites from working.

The difference between them is typically manifested in the analysis of the box model of IE : In standard mode, the width of the page element is =padding+border+width, and in the weird mode, the width itself includes padding and border.

In weird mode: set width, then margin:0 auto; Normal mode can work correctly.

So we try to avoid the weird pattern, and choose the standard mode, so that there is a DTD (document type definition documents the type definitions);

DTD (document type definition): is an effective way to ensure the proper format of HTML documents, a DTD document contains the definition rules for elements, the rules for defining relationships between elements, the attributes that can be used by elements, the entities or symbolic rules that can be used.

DTD declaration: If the DTD declaration is omitted, FF will still be parsed according to the standard mode, but in IE (6.7.8) will trigger the strange mode, and now generally can be manually set to standard mode directly .

2) How to organize CSS

The author divides into three categories according to the function: base, common, page These three are not the parallel structure, but the cascade structure.

1:base layer: The lowest level, basic layer, generally placed the smallest of the general class-atomic class, this layer will be referenced by all pages, to simplify, universal, highly portable.

Recommended code:. Fl{float:left;}. fr{float:right}. mt15{margin-top:15;}. mb15{margin-bottom:15;}. w50{width:50px;} . Cb{clear:both;}. Cr{clear:right;}

. pr20{padding-right:20;}

As can be seen from the above code, the base layer structure is very small, very useful for the composition of the structure of the class.

The base layer can be divided into two parts: CSS Reset and General Atomic class

CSS Reset: Is the style of redefining the label, overwriting the default style provided by the browser, such as *{margin:0;padding:0;}, because the default margin of the browser is the most affecting CSS layout. It is best not to use *, but to list out the tag elements to overwrite: such as: OL Li ul H1 DL DT .... Minimize the conflict.

From the author's experience, although the base layer of the class is small, but it is very useful, set a large number of such classes to reduce the page layer of code, but also for the modularization of CSS to provide help .

2:common layer: The middle tier, a highly reusable module that is considered a component (similar to the same type of plate within a site).

Modular layer: splits the elements within a page into small pieces of small pieces of functionality and a relatively independent module. analogy to the House (website), different windows and doors and windows have different small components (common), this layer is best by a person responsible for unified management.

Common layer is the site level, different sites have different common layer, and the same site has only one common layer.

3:page Layer: page-level style, top level. There is no requirement for reusability. (It's like a picture in a room, different rooms will hang different pictures.) )

3) How to divide the CSS module

In a nutshell: Encapsulation, multi-use combination less the principle of inheritance.

The similar parts are extracted and further split into smaller modules.

Principle:

1: try not to include the same parts between modules and modules, if they have the same part, they should be extracted and split into a separate module.

2: The module should be as simple as possible in order to provide reusability in the minimum number of guarantees.

4) CSS naming

1: Using English

2: Camel nomenclature (starting with the second word capitalized, e.g. Dropmenu,subnavmenu)

3: Underline nomenclature (-or _ such as Drop-menu, Sub_nav_menu)

The use of Camel nomenclature and the name of the dashes can clearly distinguish the words and improve readability. These two methods are recommended for use in combination. The General Camel nomenclature is used to distinguish between different words, and dashes are used to indicate subordination.

4: Sub-selector: Abuse of sub-selectors is prone to conflict, in order to reduce risk, it is not recommended to use the sub-selector easily.

Summary: Base layer and common layer is public, generally by a person responsible, will not appear conflict, page layer multi-person cooperation use, easy conflict, in the name of CSS, if the module repeatedly appears, should be classified as common layer, do not consider the conflict problem, the number of occurrences, the page layer.

5:page layer Multi-person cooperation can easily cause naming conflicts, in order to solve this problem, generally everyone will assign an identifier, and then give the method of naming the prefix to solve.

5) Multi-use combination, less inheritance

The idea of inheritance is to split a complex, variable-containing class into several complex but stable subclasses. First, define an abstract parent class, with almost all the methods and properties of the parent class, the subclass inheriting the parent class, adding new methods and properties as required, overwriting the methods and properties that have changed with the parent class.

Cons: With inheritance, any small change also needs to redefine a class, which can easily cause the explosion of the class, producing a whole bunch of slightly different subclasses.

The idea of a combination is to divide a complex class into parts that are prone to change and relatively stable, to split the parts that are prone to change, to design each possible change into a separate class, to have no inheritance between classes, and to follow the "single duty" of object-oriented design. Principles. Examples of these easily changing classes are assigned to the principal class as a property, which implements a combination of classes.

The number of classes can be greatly reduced by using a combination of methods.
Note: Margin is a somewhat special style, the adjacent margin-left;margin-right will not overlap, but the adjacent margin-top;margin-bottom will produce coincident, so the adjacent labels do not mix, Use Margin-top or margin-bottom uniformly.

6) Low Weight principle

The label weight is 1;class weight is 10;id weight is 100

When there is a conflict, will choose the weight of the high style, the same weight, the nearest principle, the last defined as recently, CSS weights should be as low as possible.

7) CSS Sprite---Merge multiple background images of the site onto a large picture.

　　Can solve the problem that the background picture appears blank when the A-label hover state.

Each time the image load sends an HTTP request, a picture requires an HTTP request, the more HTTP requests, the more times the server is accessed, the greater the server pressure, and the CSS sprite can also reduce the pressure on the server

1: Can only be used as a background picture background-image

2: cannot be used for pictures that are tiled horizontally and vertically. As for the reason, I'll know when I go to the test.

8) Haslayout----is a proprietary property of IE browser, used for parsing engine of CSS. Sometimes the Web page will run normally under FF, but it is not normal under IE, often because the haslayout does not trigger the cause.

Can be triggered by setting width,height,position:relative, but a better solution is that zoom:1 can trigger haslayout

9) block-level elements and inline elements (you can toggle block-level and inline by modifying the display property)

Block-level elements: can be set wide height, margin padding normal use, exclusive line

Inline element: Cannot set width height, margin padding in horizontal direction will produce margin effect, vertical direction will not produce margin effect, within the same line.

Display:inline-block block level element, can be set wide, can set margin;padding, but not exclusive row (IE6/7 not supported, can be resolved by triggering haslayout)

) Relative,absolute and float

1: The left top right bottom Z-index property is activated only if the Position property is set, otherwise the setting is not valid.

2:position is set to relative or absolute to change the position of the element in the document flow. Although the Web page looks like a two-dimensional structure and has a z-axis, the default is that the elements are in the z-index:0 layer----This is the document Flow .

3: Do not set position, then the site's default position:static.

4:position set to relative or absolute will cause the element to "float", that is, when z-index>0, it will change the flow of the document under normal circumstances.

Position:relative---will retain their position in the z-index:0 layer, belonging to the position of the floating.

The Position:absolute---is completely out of the document stream and does not retain the placeholder, which usually overrides the following element.

Their left,bottom,top.right four values are relative to their own recently set position ancestor elements, if not set, you want to the BODY element

5:float: Floating around, it can also change the flow of the document, but will not rise, will only change the normal flow of documents in the Z-INDEX:0 layer, affecting the surrounding elements.

11) Several ways to center horizontally

1: Horizontal centering of elements in text, picture, etc.------text-align:center This property can be resolved in the horizontal center of text, picture, line elements .

2: Determines the width of the block-level element horizontally centered-----margin:0 auto;

3: Block level element with indeterminate width centered horizontally

　　A:table Tag Implementation----Table itself is not block-level elements, not set width, its width by the internal elements of the width of "prop up", only need to set margin:0 auto can be centered (example: Paging <table><tr ><td><ul><li>)

Cons: Increases the number of nested layers of a tag without semantic tagging.

　　B: the label to be centered is converted to the inline element, and then the parent tag is set to Text-align:center; Disadvantage: Because of the conversion into inline elements, there may be some limitations.

C: by setting the float,position:relative;left:50% to the parent tag, the child tag is set position:relative;left:-50%;

12) Center vertically

1: Parent tag is indeterminate, child label is text, picture, block-level element is centered vertically------center padding by setting the same upper and lower margins for the parent tag

2: Parent tag height OK, single line text is centered vertically----------line-heiht to achieve

3: Parent Tag height OK, multiline text, picture, block level element Vertical Center

　　A:vertical-align Property: When the parent element is TD or TH is, the change attribute will take effect, and later verify, the Inline-block and other inline elements are valid. for block-level elements, you can set Display:table-cell to activate this property to make it valid .

　　B: It is necessary to set up the Position:relative;position:absolute by setting top:50%,top:-50% to the two layers of the father and son respectively;

13) Grid Layout

A page is often divided into several pieces, each time presented to the user's best first subject content, so that the visual effect will be better, feel fast speed.

In the design process, the main content of the HTML tag to ensure that the other content before loading, (that is, the main content of the HTML tag before the order)

Z-index)

This property fires after setting the position, and the larger the Z-index, the higher the element position. It can also be set to a negative number so that the element is below the body.

Reprint please indicate the source

Original address: http://www.cnblogs.com/Joans/archive/2012/09/11/2680256.html

Writing high-quality code: The way to develop the Web front-end (II.)