'Writing High-Quality Code - How to Practice Web Front-End Development' Reading Notes_html/css_WEB-ITnose

Foreword

In the past two weeks, I have participated in the company's new project, using closed development (project members develop in the conference room), working overtime until late at night , so I don’t have the time and energy to write an original blog. Today I will share my reading notes on "Writing High-Quality Code - How to Practice Web Front-End Development".

Text

If you want to master one line, you must first understand ten lines.

In the field of front-end development, it is very necessary to have one specialty and multiple abilities.

Table layout disadvantages:

Large amount of code and confusing structure;

The tag semantics are unclear and not useful for search engines. friendly.

css layout: div css, or (x)html css.

Small amount of code, streamlined structure, and fresh semantics.

The less code, the browser download time will be shorter;

The clear semantics will be more friendly to search engines.

First determine the html, determine the semantic tags, and then choose the appropriate CSS.

The browser will give a default style based on the semantics of the tag.

A simple way to judge whether the semantics of web page tags is good is to remove the style and see whether the web page structure is well organized and orderly, and whether it is still readable.

Test whether the CSS settings in the web page are disabled in DevTool? Test the effect of w3c official website after removing the style.

tag, search engines are more sensitive to it, especially h1 and h2.

When the tags on the page cannot meet the design needs, non-semantic tags such as div and span will be appropriately added to assist the implementation.

The table layout is suitable for displaying two-dimensional data.

Some other issues that should be paid attention to with semantic tags:

Use as few semantic tags divs and spans as possible.

In places where the semantics are not obvious and you can use either p or div, try to use p, because p has upper and lower spacing by default, and the readability is better after de-styling, which is beneficial for compatibility with special terminals .

Instead of using pure style tags, such as b, font, u, etc., use css settings instead. Text that needs semantic emphasis can be included in the strong or em tags.

There is no perfect solution to the problem of too scattered and concentrated files. We need to make appropriate compromises based on the actual situation.

css rest:

Not recommended * { margin: 0; padding: 0 }, the recommended ones are listed. It is also not recommended to write: {margin:0; padding:0; color:#000; font-size:12px;}, because this will destroy the inheritance of CSS.

.fl { float: left; display: inline } where display: inline is to solve the double margin bug of IE6.

.zoom { zoom: 1 } is a proprietary attribute of IE, in order to trigger IE's hasLayout. When zoom is invalid, you can set "position: relative" to trigger hasLayout.

Supplement:

Reset browser default style, recommended: https://github.com/necolas/normalize.css

Split modules:

Try not to include the same parts between modules. If there are the same parts, they should be extracted and split into an independent module.

Modules should be as simple as possible while keeping the number as small as possible to improve reusability.

Camel case is used to distinguish words, and underlining is used to indicate affiliation. For example: .timeList-lastItem.

Learn this style of naming:

.fr { float: right; }

.w25 { width: 25%; }

Use composition more and inheritance less.

When there is a conflict between style settings, the style with higher weight will be used.

The weight of html tag: 1, the weight of class: 10, the weight of ID: 100.

When the weights are the same, the nearest definition principle will be used.

In order to ensure that the style can be easily overridden and improve maintainability, the weight of the CSS selector should be as low as possible.

CSS hack methods are usually selector prefix method and style attribute prefix method.

The four states of the tag are defined in order, l(link)ov(visited)e h(hover)a(active)te, which is the love hate principle.

Block-level elements and inline elements:

Block-level elements can set width and height attributes, but inline elements have no effect on setting width and height attributes.

Block-level elements can set margin and padding attributes. Inline elements set the horizontal direction of margin and padding, that is, -left and -right are valid, and the vertical direction -top and -bottom are invalid.

Switch block-level elements and inline elements by modifying the display attribute.

hasLayout:

is a proprietary attribute designed by IE browser to parse the box model. It was originally designed to be used for blocks. For level elements, if hasLayout of inline elements is triggered, the inline elements will have some characteristics of block-level elements.

display: inline-block

An inline block-level element, which has the characteristics of block-level elements: you can set the width, height, margin and The padding value also has the characteristics of inline elements: it does not occupy an exclusive line.

will trigger hasLayout. Vertical alignment can be solved by setting *vertical-align: -10px.

In order to make E6, IE7 and other browsers compatible with display: inline-block, there are also certain problems:

It can only implement display: inline-block for inline elements; it cannot be Block-level elements.

*vertical-align is a hack for IE, which is also unfriendly. Try not to use hacks if you can.

Although IE6 and IE7 do not support CSS setting to display: inline-block, in fact the CSS parsing engines of IE6 and IE7 still have display: inline-block. For example, both img tags and button tags have display : Inline-block feature, you can set the width and height without occupying an exclusive line.

float

will change the normal document flow arrangement and affect surrounding elements.

position: absolute and float: left or float: right will implicitly change the display type. No matter what type of element it was before (except display: none), the element will be displayed in display: inline-block mode. : You can set the width and height. The default width does not occupy the parent element.

Centered

Horizontally centered
(1) Horizontal centering of inline elements such as text and pictures: set text-align to the parent element : center
(2) Horizontal centering of block-level elements with determined width: Set margin-left: auto and margin-right: auto
(3) Horizontal centering of block-level elements with uncertain width:
I. Use the table package and set margin: 0 auto; Advantages: Clever approach. Disadvantages: Added unsemantic tags and deepened the nesting levels of tags.
II. Use display: inline/inline-block; Advantages: Simple and clear, clear structure. Disadvantages: After using inline, it becomes an inline element and lacks certain features, such as: width, hieght...
III. Use position: relative, set float, position: relative and left: 50% for the parent element, and set float, position: relative and left: 50% for the child element. Set position:relative and left:-50%. Advantages: Clear structure. Disadvantages: position:relative will bring some side effects.

Vertical centering
(1) Vertical centering of text, pictures, and block-level elements whose parent element height is uncertain: Set the same top and bottom padding to the parent container to achieve this.
(2) Vertical centering of a single line of text determined by the height of the parent element: line-height: height of the parent element.
(3) Vertically center multi-line text, pictures, and block-level elements whose parent element height is determined:
I. Using table wrapping, disadvantages: adding unsemantic tags and increasing the number of nesting levels.
II. For IE8 and Firefox that support display: table-cell, use display: table-cell and vertical-align: middle to achieve centering. For IE6-7 that does not support it, use a specific format hack: give parent and child two layers The elements are set to { *position: absolute; *top: 50% } and { *position: relative; *top: -50% } to achieve centering. Disadvantages: Using it for hacking is not conducive to maintenance. Setting position: relative; position: absolute; brings some side effects.

Grid layout

No matter who is left or right in style between sidebar and main, in the html tag, make sure that the main tag is in the sidebar was loaded before.

Only the outermost container is given a specific width, the width of all other containers is set as a percentage ?? Grid layout.

z-index

The z-axis is activated after the element sets position to absolute or relative.

Setting negative margins can cause the positions of adjacent elements to overlap. Which one floats on top depends on the order in which the html tags appear. The tags that appear later float on top of the tags that appear first.

For the select occlusion problem under IE6, you can use an iframe of the same size to cover the select.

In order to avoid the overlap problem of the upper and lower margins of components and the bug caused by IE's hasLaout, all modules use margin-top to set the upper and lower margins, except for special needs.

Javascript

Using anonymous functions to wrap scripts can effectively control global variables and avoid potential conflicts.

To prevent JS from causing conflicts, you need to avoid the proliferation of global variables, make reasonable use of namespaces, and add necessary attention to the code.

DOMReady is more suitable to call the initialization function than window.onload.

Call the init function at the end of the page, that is, before the