HTML of high-quality code, CSS articles

HTML article

1. Use semantic tags <strong><fieldset><legend><ul> more, less <div><span>
2. A way to determine whether a page label is semantically good: Remove the style and see if the page structure is still in order .
3. Div and span are added appropriately when the label in the page does not meet the design
4. Use less pure style label B font u etc, use strong em etc.
5. That is, you can use the DIV and p when possible, using P

CSS Articles

1. CSS structure

Generally divided into a base common page three levels.

Base layer: Provides a common class of CSS reset functionality and minimal granularity. By all the pages quoted, relatively stable, basic maintenance;

Common layer: Provides a component-level CSS class. This is the modular CSS class.

Split module tips: 1) modules and modules should not contain the same part, if any, should be split out to become a separate module.

2) The module should be kept as simple as possible in the minimum number of principles

Page layer: A module of non-highly reusable pages.

2. CSS namespaces

Hump naming method and underscore "-" or "_" nomenclature

In general, the Hump method is used to differentiate between different words and underscores are used to indicate subordination. such as Timelist/timelist-lastitem

By defining the class for the body, the page style is included in this class to prevent duplicate definitions

3. Multi-use combination, less inheritance

Rational use of multiple classes for definition

4. If the upper and lower margin is processed

If you are unsure of the module's upper and lower margin, it is best not to write it into the class of the module, but instead use a combination of classes to define the atomic class individually (such as mt10 for the margin-top:10px Class). Best not to mix margin-top and Margin-bottom.

5. Low weight principle-avoid too many nesting

Use fewer sub-selectors, CSS selector weights as low as possible, use class as much as possible, and use fewer IDs

6. CSS Sprite

1) only applicable to background pictures, to Settings Picture not applicable

2) Horizontal portrait is tiled picture does not apply, if is horizontal tile, Sprite diagram should be upright rehearsal, and vice versa

7. CSS hack

_ IE6 * ie6/ie7 \9 IE8; try to use less hack

8. Hover Style

L (link) ov (visited) e H (hover) at (Active) E

9. Haslayout Trigger

Zoom:1, or postion:relative;