Reading the beauty of refactoring

Haha, I am a. Net programmer. I am very interested in page design because I am specialized in web design. I recommend that you write the "Beauty of refactoring" file. The beauty of Reconstruction


The core of web standards is the seemingly significant change from HTML to XHTML. Web standards are more about the revolution of ideas, the reconstruction of ideas, rather than the technology, which is almost all reflected in XHTML.
Data and structure cannot be separated, and data that is separated from the structure is almost unusable. The plain data needs to be formatted in XHTML or XML to display its structure. I will focus on it here Structure. In my understanding, the structure is currently divided into two parts. One is Semantic Structure, And second Code structure. The semantic structure is generated by semantics, while the code structure is program-oriented. XML has a perfect code structure
CSS is relatively unimportant. In the Web 2.0 era, data is followed by users. The data here includes the structure, semantic structure, and code structure.
CSS is a concentrated learning task. I think it will be proficient for a month. But it does not mean that your page can be very beautiful. It is a design that has nothing to do with CSS. Do you dare to say that you are proficient in design for one month? After six years of design, I still feel that the design is too short and difficult!
I think div is the most widely used layout element, such as "using Div instead of table for layout", "Practical CSS + Div layout", etc. There are too many ideas, many people use Dreamweaver to define Div as a layer and use it according to the concept of Photoshop layer ...... A friend simply calls Div and span as the auxiliary layout element.
What should I do? Although I would like to say that DIV is not a layout element and no tag is used for layout, is it true? I don't know. Almost everyone promotes divs in a layout, either 'folk 'or 'official'. However, if we look for the root cause, div is a structured tag in Chinese, is a block-level element. Well, let's first look at the semantics of Div, Division (separated). By semantics, it is used to separate the two parts. Then let's go back to W3 to see how to define the DIV and Span: The DIV and span elements, in conjunction with the ID and class attributes, offer a generic mechanic For adding structure to statements.These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
Have you noticed the rough sentence above? W3 is not for layout, but for structure. It is a structure! A code structure is generated (defined) by separation. I think the structure and layout should be two concepts. Perhaps, because the table is indeed used for layout, this deep-rooted layout idea is naturally passed on to the DIV, which I have understood for a long time. But now I want to say that this is definitely an error and, This is an extremely serious error !!!This is purely personal opinion, and I have chosen it myself. <Div>
<H3> <span> User Logon </span> <Div>
<Label for = "name"> User Name </label>
<Input id = "name"/>
</Div>
<Div>
<Label for = "PW"> password </label>
<Input id = "PW"/>
</Div>
<P> <button/> </P>
</Div>

As mentioned in [complex forms], we will analyze in detail how div is modularized in small places. Actually, it is very simple. H3/lable/P is a semantic structure. Then, the user name and the corresponding input box are obviously an inseparable whole. So, div marks it as a block, the corresponding password is partially the same. Together with the title and button, the two constitute an inseparable login whole, Div. This provides a good Semantic Structure and code structure. A good code structure not only facilitates the fixing of XHTML, but also facilitates the program to operate nodes. It also provides a high degree of freedom for CSS. In the above example structure, I only need to give the outermost Div A class, such as "loginarea ". So:
I can define it layer by node/path:. loginarea label {}. loginarea input {}. loginarea Div label {}. loginarea Div input. If you need to perform horizontal login, you only need to define a key point:. loginarea Div {float: Left}. If you want to remove this key point vertically, modular login is that simple. In this way, you can save writing a lot of classes, especially for some seemingly complicated structures, which are actually modular and simple in the module. A path is defined in the past, there is no need for class, and style conflicts and interference will not be caused. CSS is also readable. Of course, the CSS skills will be involved here. I think the most important thing about CSS skills is to analyze the page. The page analysis is good. The written CSS is simple and clear, making full use of tags and more for extension, otherwise, the complicated and lengthy class may feel that the tag is not enough and the damage structure is added. I have written 48 k CSS for the complex form system, and haven't made the final optimization yet. The total number of images is only 5 k, and all images are in Lossless PNG format. There are dozens of modules in the entire system, including unlimited menus, trees, tabs, pop-up, complex forms, contracts, frames, IFRAME, reports, and controls, the full display of CSS and images can be within 50 kb. In this project, four programmers develop all the front-ends by myself. For three months, no matter what the performance of the programmers is, I can do it by playing around. In the middle and late stages, I still felt that the design provided by the company was not good, and I spent one day re-designing. In less than two days, I wrote another CSS, the entire system has changed and the previous design has not been lost. If the function remains the same, the interface is changed greatly, and a large system is only a few days away, and programmers don't have to worry about it. This is one of the power of web standards! (Because it is an intranet application, I almost did not consider and take care of browser compatibility, no need, it is also a quick factor)
Let's talk about the difference between Div and span. In The Big Aspect, div is classified into structural module, while span is classified into text module ). In a small aspect, div is block-elements (Block-level element), and span is inline-elements (intra-Row Element ). In all structural modules, div is the only semantic fuzzy model. In all text modules, span is the only semantic fuzzy model.
HTML is a performance-oriented language, while XHTML is a structure-oriented language!