div css achieves separation analysis of structure and performance in terms of ideas and processes_Experience exchange

Ancient topic: the separation of an ancient poem

1. Give you an ancient poem, save it as a pile of text without format, and you have to understand its content and process the structure. After using word typesetting, he had a structure
2. This structure actually includes semantics and performance
3. Use html for structuring, put aside all forms of expression, and only consider semantics
4. Use CSS Perform presentation processing, including the default presentation of html, which has a visual presentation. This presentation reflects the structure and the user experience. The user experience includes interactive layout and visual experience
　5. If you add Behavior, such as clicking the annotation serial number to slowly jump to the annotation content.

Look at the css Zen Garden again
The same 5 steps above form the first version of the CSS Zen Garden
And more of the work done by template providers is interactive lines Draft visual design. It is reflected on the web page as CSS

It can be seen that from a coding perspective
The first step is to process the content as structure and write pure HTML
The second step is to process the structure as presentation and pure CSS Writing
The third step is to add behaviors to the performance.

From a process perspective
The first step is planning documents
The second step is structural processing
The third step is interaction design (interaction style construction)
The fourth step , visual design (visual style construction)
The fifth step, style construction

Thinking in reverse
If there is no css Zen Garden, the designer designs hundreds of design drafts and then makes them Will the structure of the page and HTML be the same? By analogy, if your planning is handled by two interaction and visual designers, will the structure of the page construction be the same? The answer is definitely not the same, why not the same? The fundamental point of the discussion here is an issue that requires us to think deeply!