Mistakes in making Div + CSS web pages

The spring breeze of "Web page reconstruction" swept across the north and south of the river, and the Internet was a breeze. "Div + CSS" has become a "fashion" for making web pages ", all websites that are difficult to count have begun their "Web page reconstruction ".

The following describes the methods of thinking that conform to the standards. Many of them are detours that I have taken and hope to help my sisters who have just come into contact with the web standards:

1. "SaveCode"Marketing means, not purpose

"Using Div layout can save more code than table layout," I have seen this in many books and websites. This statement is true. "Saving code" is indeed one of the benefits of Web Page standardization. However, remember that it is only "one benefit", not "the only benefit", but not the purpose. "Saving code" is more about the marketing means we use to persuade stubborn bosses. The only purpose of Web Page standardization is "separation of Structure and Performance", rather than saving code to save code. I used a unified class because the content on the sidebar and even the subject is in the same form (so far, some books are taught in this way), which saves more code than naming IDs, however, the cost of doing so is that the Code loses a good structure. The consequence of losing a good structure is: 1,Source codeNo readability; 2. Unknown maintenance costs are added to the website. Imagine that when a piece of content changes its form as needed, such as the link color, we have to modify the page source file and add additional classes, the workload is much larger than the need to adjust the ID group. In the long run, the structure will get worse and worse, forming a vicious circle that is hard to be reversed.

There is also a situation where the ID name is also a mistake I have made. At that time, in order to "save code", the main menu was named "mm", the second menu was named "m2", and the third menu was named "m3", which seriously reduced the readability of the webpage, this makes it difficult for other colleagues to take over, but it saves them trouble. Similarly, the naming of files and folders should not be simplified. For example, we suggest storing images in the "I" directory in "website reconstruction". I think it is not advisable, unless you can write a detailed description of this abbreviated directory structure and ensure that every related person includes other producers, developers, or even knowledgeable bosses ...... Can understand and execute, otherwise it will only add unnecessary trouble to yourself.

2. ID is a sniper rifle and class is a double-edged sword

To make a good web page structure, both ID and class must be mastered. The so-called "both hands should be hard ". Like a sniper rifle, ID can help us precisely locate the elements we want to load styles. While class is the swordsman of Chivalrous people, it is easier to use it with confidence, the combination of the two can achieve a well-structured and rich page. However, there is a wrong idea that IDS can be completely replaced by classes. In fact, many web page source codes do. In this case, we can open the entire class and cannot find an ID. There are many reasons for this phenomenon. However, the deep-rooted concept of "class = CSS" passed down in the table age is the root cause. Indeed, the class is more flexible than the ID, but it must be realized that the class is far less effective for building a good web page structure than the ID. The forced uniqueness of ID makes it easy for us to retrieve any module we need through ID, and class does not have this advantage. Although we can define a unique class name for the module, the premise is that only the producer can change the webpage style. Otherwise, the previous class will be applied directly if the style is the same, the result is that more than a dozen modules on the webpage are called "gonggao" or "Xinwen", so that a large amount of HTML comments have to be added to differentiate them, this result is obviously not what we want. Furthermore, as mentioned above, the code saved by the general class has to be squandered in every individually defined class.

The ID is a sniper rifle, and the class is a double-edged sword.
 

3. Not all contents require Div as a "Container"

Does the main menu use <Div id = "mainnav"> <ul> or <ul id = "mainnav">? This is a game issue. No one can give a clear answer to this question, even me. It is true that when <Div id = "mainnav"> only contains one <ul> element, this div is somewhat redundant, A single layer of tags means a change of one layer (some people also set span in tag ). The inherent advantages of Div without any original attributes are incomparable to those of other labels. I just want to explain one thing, that is, we should be aware that there is a <ul id = "mainnav"> <ul> In addition to <Div id = "mainnav">, it also has good structure and semantics, and saves a layer of nesting. When we don't need to work hard for the gorgeous artist, can we make the structure more simple?

This proposition can also be extended to "not all content requires block elements as containers", "Not all links require other elements as containers ", for example, many pages have "more ". Some people write "<Div class =" more "> <A>", and others write <p> <A> or <strong> <A>. When these "containers" only contain one <A> tag, are they necessary? Does writing <a class = "more"> damage the structure? Does it lack semantics? Will the layout be affected? For another idea, you may have different gains.

4. "separation of Structure and Performance" is also achieved at work"

Many experts on the Internet suggest this, that is, to open the editor, write the complete structure, and then write the performance in CSS, try not to change the structure that has been written.

However, it is difficult for people who take reading books as their primary learning methods, because most of the books on standards are taught by hand, that is, they must be a combination of structural performance and step by step. Although some books have suggestions in this regard, a few short words are far less subtle than the course of reading. When the production staff can have a good grasp of the structure, writing the structure and performance will not have a big impact on the results. However, in my experience, structure separation is much more efficient than writing structures at the same time, and it is not easy to omit elements on the page.

Of course, the so-called "separation of Structure and Performance" does not completely ignore performance. To ensure both performance and performance, we must ensure that the structure is not damaged, the CSS selector can select as many content as possible. Adding a class or using tags is a wise place. I believe everyone has their own experience. When combined with different design drafts, you sometimes need to make corresponding changes. However, these changes should have the same premise-without compromising the structure and readability of the Code.

Then, you must realize that any visual tool is a devil. The effects presented under their visual interfaces are often different from those of real browsers. What we really want to be compatible with is the browser, not the visual interface of the editor.

5. CSS is not omnipotent, and it is not impossible without CSS.

Compared with the css1.0 era, CSS can accomplish more things today. However, the demand is always ahead of the technology, and CSS cannot complete all the presentation layer work on the webpage, sometimes we have to combine JavaScript or other languages to achieve some results. In other cases, the js method is much simpler than CSS alone, and the code structure is better-the most typical example is the drop-down menu. In these cases, we need to persuade ourselves or the boss and the customer to adopt a simpler and more reasonable approach. Because Dom is also an important component of Web Page standards, we do not use JavaScript to reduce the efficiency of our web pages or stop standards. On the contrary, this is the biggest misunderstanding of Js. Speaking of this, we have to mention that in today's era, we require every profession to learn more relevant knowledge than ever before. Designers must understand interaction and production, you must understand the design andProgram, Especially front-end technologies such as Js. Only in this way can you and your colleagues cooperate better and your personal development prospects become brighter.

no css indicates that when the CSS file loading fails due to various unknown reasons on our website, it is the best time to test the quality of our code. Without CSS, if the web page still maintains good readability, this result is far more proud than the W3C verification.