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

Recently, the boss bought us some technical books. In fact, he seldom moved a book and read it completely. Every time he reads electronic files, he also looks at this chapter in a guerrilla fashion, among the five books, I picked a relatively thin book named "Writing high quality ".CodeThe Web Front-end development practices are good. It shows how to write high-quality code from an overall architecture, and focuses on some important technical points in detail, it gives us a complete feeling of looking down on web development from a very high place. Thanks to the boss for making constant progress. The following are my notes during reading.

Chapter 1: Starting from website Reconstruction

There is nothing to say. From a bad old web page instance, we need to separate the structure, style, and behavior of the Web, such as HTML files, CSS files, and JS files.

Summary: HTML tags are only responsible for carrying content, style to CSS, and behavior to JavaScript. "Simplified, reusable, and orderly ".

[Compared with my previous projects, I often write some click events and Mouseover events directly into HTML tags. In fact, it is better to put them in JS and directly document them. getelementbyid (""). onclick () {}, or associate with the jquery click event]

Chapter 2: Teamwork

To refine a line, you must first pass ten lines

"I often hear friends who are working on front-end development complain that there are too many things to learn. I want to learn something from the east, the West, and everything, but they are not refined. So some people think that '10 rows is better than a fine line ', in the front-end field, this sentence does not work. For the front-end, you will not be able to work well if you fail to get through 10 lines." I have a sense of accomplishment. O (distinct _ distinct) O ~

This chapter mainly describes the front-end languages that need to be understood. html and CSS must be proficient and important. js and the architecture Div + CSS, Ria rich media applications, jquery, Yui, PS, AI Design, and so on.

Note the following for development between teams:

1: Increase code readability ---- Comments

2: reusability-Maintenance of Public and Private Components

3: there is a conflict between Redundancy and streamlining-whether to choose centralization or decentralization (in a reasonable front-end architecture, CSS and JS will extract public components, and how to organize them should be weighed. The perfect solution does not exist, you can only find the best balance between Redundancy and streamlining)

4: preliminary ideas are very important.

5. formulate specifications

6: the greatest difficulty in teamwork is not technology, but people.

Chapter 3: high-quality html

Finally, we have some practical technologies.

1) Tag semantics: everyone knows.

2) label Layout

Disadvantages of table layout webpage: 1. Large code size and chaotic structure. 2: unclear tag semantics and unfriendly to search engines

CSS layout (div + CSS): It weakens the label layout capability and places the layout completely in the style for control, while the label restores the original semantics. Compared with table layout, it has the advantages of less code, simplified structure, and clear semantics.

Summary: In the layout process, the HTML structure is the focus, and CSS is used to modify the structure. The correct method is to first determine the HTML, determine the semantic tag, and then select the appropriate CSS.

3) determine whether your tag has good semantics.:

After finishing a page, remove the style and check whether the webpage structure is organized and well organized.Readability.

The purpose of "CSS nude day" is to remind everyone of the importance of choosing the appropriate HTML Tag. ------------ Apparently, this is the first time I heard about it.

4) Example of title and content

This instance uses HTMLSilent labels----- Div is separated from the span range for architecture. The correct method is generally to use H2, P, A for architecture.

Note:When the labels on the page cannot meet the design requirements, the non-semantic labels such as Div and span will be added as appropriate to assist in implementation.

5) forms and tables

Form

Generally, the content that requires direct submit must be placed in the form.ClearSyntax: Generally, form fields must be wrapped with fieldset labels and legend labels to describe the purpose of the form. If you do not want the default style that comes with it, you can set border: none; do not want to display: none.

The label Label must be used for the plain text corresponding to each input tag, and the corresponding label and input must be associated by setting the ID attribute for the input and "for = someid" in the label.

Table

Although table is not recommended for layout in CSS layout, it is the best choice for displaying two-dimensional data.

Table is generally used. I often use its <Table> <tr> <TH> <TD> label. Other labels can be used when necessary. caption is used for table titles, the header is surrounded by thead, the body is surrounded by tbody, and the tail is surrounded by tfoot

Summary: some issues that should be paid attention to in semantic tags

1: use as few non-semantic tags as possible Div and Span

2: The semantics is not obvious. P and Div are both available. We recommend that you use P as much as possible because of the upper and lower spacing and good readability. (Depends on the situation)

3: Do not use pure style labels, such as B, Font, and U, and directly write them into CSS settings.

 

Reprinted please indicate the source

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