Use CSS to create websites based on web standards

Since reading Mr. zeldman's masterpiece "Designing with web standards", the Chinese version of "website reconstruction" (version 2nd), I have been deeply impressed and have strengthened my idea of using web standards, develop and practice our projects. However, it is far from enough to know what web standards are and how to apply them to actual projects. You must learn and apply each part of the Web Standard one by one, and break through each other to discover their essence! For Web developers like me who know this truth and conduct targeted learning and practices, I believe we will certainly gain more, at the same time, it makes a little contribution to the application of Web standards in China! (Well, this may be a bit of a boast, but it is indeed the ideal of most of our software practitioners .)

Now is the era of Web 3.0 and even, the era of XHTML, XML, CSS, ecmascript and Dom. Although they are not the final technology, they are combined into a solution --We plan to build a backward compatible website and a necessary technical basis for websites that comply with web standards.We should not only achieve more user support and access, but also establish a long-term, beautiful webmaster time to attract their attention. I believe that learning to use CSS to improve our website is a good way to attract their attention and a fashionable development trend in the web era. Next I will only talk about my experience with CSS technology.

To become a CSS expert, it is far from enough to be proficient in CSS selectors. It also focuses on the overall planning of the work, master the work flow, and improve the maintainability and efficiency of the style sheet. CSS can be used to create a website that we want, and CSS is a pleasure. So how should we create a more attractive style sheet? What features should your style sheet have? By studying and combining my own work experience, I have summarized a set of good methods for creating exquisite style sheets.

1. Do not Mark CSS too much

Linking or importing a style sheet sounds like a confusing task. I have seen many website development projects with neat and well-organized CSS documents, but slowly, because it may not be able to quickly update in a short period of time, or I am too lazy to manage it again, this makes the previously created exquisite style sheet junk. If we work on a large website that requires hundreds of content to be published. Due to limited time, you need to nest or arrange CSS for quick modification or update. Over time, this habit persists until one day you are told that the website will be completely overturned and re-designed (but the content remains the same) and you only have one week to create (including testing ). In general, updating a style sheet is a very simple method. Unless you modify the scattered area of the website for a long time, you cannot have a general grasp of the structure of the style sheet.

Linking or importing your style sheet is not random. Create a clean and tidy style sheet and keep it up to make your work happier. Note: If you try to create a new style sheet every time you update or add new content, you must be in trouble. Excessive links and imported style sheets make it difficult to eliminate bugs and make it difficult to maintain style sheets. It is understandable that a larger website creates different styles. Be careful not to go to extremes. Adding many style sheets will add more HTTP requests and may affect subsequent work.

2. clear and easy-to-understand semantic definitions

In addition to selecting the most appropriate and meaningful elements, you must also determine the value of the selected class and ID attribute. Clearly defined maintenance can be simplified and can be understood by members in the group. See this definition:

. L10k {color: #369 ;},. left-blue {color: #369;}. If I do it, I may know what it means, but others may not understand it. Even if I know what it means today, can I still know what it means many years later? It is recommended that you do not add such names as colors or long-width dimensions to the class attributes. More appropriate naming rules are as follows:. Work-description {color: #369 ;}

3. Know when to add conditional comments and application skills

ManyArticleI have written some tips on problem solving. Conditional comments are a good way to control ie release. I agree that conditional comments are much better than just messing around in your CSS document, but recently I 've begun to realize that there is a lot of evidence that this is not the best solution. If you want to set the minimum height of an element, but IE6 does not execute it, even if you know the height you can use, it will be processed in the same way. Create a style sheet and add conditional comments to your logo. Do you need to follow this rule for all your needs? Keep the rules at the lowest height and height together, and select a tip in the same CSS document. Will this be better? In this case, I think it is very difficult to use this method.

4. Apply CSS to a webpage and try to use an external style sheet.

Advantages? We all know that, of course, one thing is undeniable and can be implemented to the maximum extent.CodeReuse and optimize the configuration of website files.

Well, the above are some of my personal opinions. I will continue to summarize the experience of other technologies in the future. I hope you will give more comments. Your suggestions are the motivation for my challenge! Thank you.