"Writing high-quality code web front-end development manual" Reading notes-high-quality CSS

1. Quirks mode and DTD

Standard mode: Browser according to specification performance page

Quirks mode: Simulates old browser behavior to prevent old sites from working (in order to be compatible with old-fashioned browser code), Firefox will parse the Web page according to standard mode if it is omitted to write the DTD (document type definition) statement, but it will trigger the weird mode in IE.

The difference between the two models is relatively large, the typical is the analysis of the box model of IE; in standard mode, the width of the page element is determined by the addition of the width of padding, border, and width, while in the weird mode, the width itself includes the widths of padding and border.

2, how to organize CSS?

by function: Font.css color.css layout.css, etc.

Divided by block: Head.css foot.css sidebar.css main.css, etc.

Author's suggestion: Base.css + common.css +page.css

The base layer provides a CSS reset function (overriding the browser default style) and a generic atomic class (text, positioning, length, width, margin), highly portable

Common layer is the site level, different sites have different common layer, the same site has only one common layer; a highly important module in a website called a component

The page layer is at the top level and provides the style

3. Modular CSS

"Writing high-quality code web front-end development manual" Reading notes-high-quality CSS