Writing high-quality code: Web Front-end development practices (2)

Chapter 4: high-quality CSS

1) weird and standard Modes

In the standard mode, the browser displays the page according to the specifications, while in the weird mode, the behavior of the old browser is typically simulated to prevent the old site from working.

The difference between them is typically manifested inAnalysis of the box model by IE: In standard mode, the width of the webpage element is padding + border + width. In Weird mode, width itself includes padding and border.

In Weird mode: Set width, and then margin: 0 auto; cannot be centered. It works normally in standard mode.

Therefore, we try to avoid the weird mode and select the standard mode, so that the DTD (Document Type Definition document type definition) appears );

DTD (Document Type Definition document type definition): It is an effective method to ensure the correct format of HTML documents. a dtd document contains the definition rules of elements and the definition rules of the relationship between elements, attributes that can be used by an element, and entity or symbol rules that can be used.

DTD Declaration: If the DTD declaration is missing, FF will still be parsed in the standard mode,However, in IE (6.7.8), this will trigger the weird mode. Now, you can manually set it to the standard mode..

 

2) how to organize CSS

The author divides the functions into three categories: base, common, and page, which are not parallel structures, but stacked structures.

1: base layer: the bottom layer and basic layer. Generally, the general class with the smallest granularity-atomic class will be referenced by all pages and strive to be concise, common, and highly portable.

RecommendationCode:. 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 ;}

From the code above, we can see that the structure of the base layer is very small in granularity and is very useful for the structure of combination classes.

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

CSS Reset: Re-defines the label style and overwrites the default style provided by the browser. For example, * {margin: 0; padding: 0 ;}, because the default margin of the browser is the most influential CSS layout. It is best not to use *, but to list the elements of the tag to be overwritten, such as Ol Li ul H1 dl dt... to minimize the conflict.

From the author's experience, although the class of the base layer is small in granularity, it is very useful. It sets a large number of such classes.This helps reduce the amount of code on the page layer and provides help for CSS modularization..

2: common layer: the middle layer, a highly reusable module, is considered as a component (similar to one of the same style sections in the website ).

Modular layer:Split the elements in the page into small modules with relatively independent functions and styles.Similar to a house (website), different doors, windows, and windows have different small components (common). It is best for one person to manage this layer in a unified manner.

The common layer is website-level. different websites have different common layers, while the same website has only one common layer.

3: Page layer: page-level style, top level. There is no need for reusability. (just like the painting in the room, different rooms will have different pictures .)

3) how to divide the CSS Module

In a word: the principle of encapsulation, multi-purpose combination, and less inheritance.

Extract the similar parts and further split them into smaller modules.

Principles:

1:Do not include the same part between modules. If the same part exists, extract it and split it into an independent module.

2: The module should be as simple as possible to provide reusability while ensuring the minimum number of modules.

 

4) CSS naming

1: English

2: camel naming method (uppercase letters starting from the second word, such as dropmenu and subnavmenu)

3: Mark the name (-or _ such as drop-menu, sub_nav_menu)

The camel naming method and the underlined naming method can clearly distinguish words to improve readability. We recommend that you use these two methods in combination.Generally, the camel naming method is used to distinguish different words and dashes are used to indicate subordination.

4: Sub-selector: Misuse of sub-selector is prone to risks of conflict. To reduce risks, it is not recommended to use sub-Selector easily.

Summary: The base layer and the common layer are common and are generally the responsibility of one person. There is no conflict. Many people on the page layer work together and are prone to conflict. When naming CSS, if the module appears multiple times, it should be classified as the common layer, without the need to consider the conflict problem. If the number of occurrences is small, it is classified as the page layer.

5: collaboration between multiple people on the page layer can easily lead to naming conflicts. To solve this problem, generally, each person will assign an identifier and add the prefix to the name to solve the problem.

 

5) Multi-Purpose Combination and less inheritance

The idea of inheritance is to split a complex and variable class into several complex but stable sub-classes. First, define an abstract parent class. The parent class has almost all the methods and attributes. The Child class inherits the parent class and adds new methods and attributes as needed, overwrite the methods and attributes that change with the parent class.

Disadvantage: if inheritance is used, a class needs to be redefined for any small change, which may easily lead to explosive growth of classes and produce a large number of sub-classes with slight differences.

The idea of combination is to divide a complex class into components that are easy to change and relatively stable, and split the components that are easy to change, each possible change is designed as a separate class, and there is no inheritance relationship between classes, following the "single responsibility" principle of object-oriented design. the instances of these easy-to-change classes are assigned to the subject class as an attribute to realize the combination of classes.

You can use a combination to greatly reduce the number of classes.
Note: margin is a special style. Adjacent margin-left; margin-right do not overlap, but adjacent margin-top; margin-bottom may overlap, therefore, do not mix adjacent labels. Use margin-top or margin-bottom.

 

6) Low Weight Principle

The label weight is 1, the class weight is 10, and the ID weight is 100.

When there is a conflict, the style with the highest weight will be selected. When the weights are the same, the proximity principle is defined as recent, and the CSS weight should be as low as possible.

 

7) CSS sprite-combines multiple background images of a website into a large image.

It can solve the problem that the background image is instantly blank when the label hover is in the status.

Each time an image is loaded, an HTTP request is sent. An Image requires an HTTP request. The more HTTP requests there are, the more requests there are to access the server. The higher the server pressure, CSS Sprite can also reduce the pressure on servers

1: it can only be used as the background image background-Image

2: it cannot be used for images tiled either horizontally or vertically. As for the reason, you can test it on your own.

 

8) haslayout ---- A proprietary attribute of IE browser, used as the parsing engine of CSS. Sometimes the webpage runs normally under ff, but it is not normal under IE, often because haslayout is not triggered.

It 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 intra-row elements (you can change the display attribute to block-level and intra-row elements)

Block-level elements: You can set the width and height. Margin padding is used normally and occupies only one row.

In-row element: the width and height cannot be set. Margin padding produces the margin effect in the horizontal direction, while the vertical direction does not produce the margin effect in the same row.

Display: inline-block, block-level element in the row. You can set width and height, margin, and padding, but not exclusive to a row (not supported by IE6/7, which can be solved by triggering haslayout)

 

10) Relative, absolute and float

1: The Left top right bottom Z-index attribute is activated only when the position attribute is set. Otherwise, the position attribute is invalid.

2: Setting position to relative or absolute can change the position of an element in the Document Stream. Although the webpage looks like a two-dimensional structure, it also has a Z axis. By default, all elements are on the Z-index: 0 layer ---- This isDocument Stream.

3: If no position is set, the default position of the website is static.

4: Setting position to relative or absolute will make the element "float", that is, when Z-index> 0, it will change the Document Stream under normal circumstances.

Position: relative --- retains the placeholder position on the Z-index: 0 layer.

Position: absolute --- it is completely out of the Document Stream and does not retain the placeholder. This will usually overwrite the following elements.

Their left, bottom, and top. Right values are relative to the ancestor element whose position has been recently set. If none of them are set, you want

5: float: it can also change the Document Stream, but it will not go up. It will only change the normal Document Stream arrangement at Layer Z-index: 0, affecting the surrounding elements.

 

11) horizontal center

1: horizontal center of text, images, and other row elements ------ text-align: The Center attribute can be resolved inText, image, and line elementHorizontally centered.

2: horizontal center of block-level elements with fixed width ----- margin: 0 auto;

3: horizontal center of block-level elements with uncertain width

A:Table label implementation ---- the table itself is not a block-level element. If the width is not set, its width is "lifted" by the width of the internal element. You only need to set margin: 0 auto can be centered (for example, paging <Table> <tr> <TD> <ul> <li>)

Disadvantage: Added non-semantic tags, deepening the number of nested layers of tags.

B:The label to be centered is converted to an in-row element, and text-align: center is set on the parent label. disadvantage: conversion to an in-Row Element may impose some restrictions.

C:Set float, position: relative; left: 50% for the parent tag, and set position: relative; left:-50%; for the Child tag.

12) vertical center

1: the parent tag is uncertain. The child tag is the vertical center of the text, image, and block-level elements. ------ center padding is implemented by setting the same top and bottom margins for the parent tag.

2: The height of the parent label is determined, and the text in a single line is vertically centered -------- line-heiht.

3: The height of the parent label is determined. multiple lines of text, images, and block-level elements are vertically centered.

A:Vertical-align attribute: when the parent element is TD or th, the modified attribute will take effect. Later, it will be verified and will be valid for inline-block and other inline elements.For block-level elements, you can set display: Table-cell to activate this attribute to make it valid..

B:You can set top: 50% and top:-50% for both parent and child elements. You also need to set position: relative; position: absolute;

 

13) grid layout

A page is often divided into several parts. It is best to present the content to the user first, so that the visual effect is better and the network speed is fast.

In the design process, the HTML tag of the subject content should be loaded before other content (that is, the HTML tag of the subject content should be placed first)

 

14) Z-Index

This attribute is triggered after position is set. The larger the Z-index is, the closer the element position is to the top. You can also set it to a negative number. In this way, the element is under the body.

 

Reprinted please indicate the source

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