Application of beautiful style sheets in XHTML CSS web page production_HTML/Xhtml_web page production

This is an article written a long time ago. Now it seems that the ideas in it are worth learning. While studying cases at jb51.net, you can also learn some theoretical knowledge. It will be a breakthrough in your knowledge. help. Come on everyone!

Ever since I read Mr. Zeldman’s masterpiece "Designing with Web Standards"; the Chinese version is "Website Reconstruction" (2nd Edition), I have a deep feeling and it has strengthened my idea of ​​using web standards. Develop and implement our projects. But just knowing a little about what web standards are and how to apply them to actual projects is not enough. You must learn and apply each component of web standards one by one, and break them down one by one to discover their essence! For web developers and designers like me, if we understand this principle and carry out targeted study and practice, I believe we will gain more, and at the same time, we can make a contribution to the application of web standards in China! (Haha, this may be a bit bragging, but it is indeed the ideal of most of us software practitioners.)

Now is the era of web2.0 or even 3.0, the era of XHTML, XML, CSS, ECMAScript and DOM. Although they are not the final technology, they combine to become a solution - the basis for our planning to build a backward-compatible website, and it is also the necessary technical foundation for making a website that complies with web standards. We not only want to gain more user support and visits, but also build a long-lasting, beautiful website to attract their attention for a long time. I believe that learning to use CSS to improve our website is a good way to attract their attention, and it is also a fashionable development trend in the web2.0 era. Below I will only talk about the experience I gained from CSS technology.

To become a CSS expert, it is not enough to just be proficient in using CSS selectors. It also lies in the overall planning of the work, mastering the workflow and improving the maintainability and efficiency of the style sheet. We can use CSS to create the wonderful websites we want, and writing CSS is a pleasure in itself. So how should we create a more attractive style sheet? What features should your style sheet have? Through learning and combining with my own work experience, I have summarized a set of good methods for making beautiful style sheets.

1. Don’t let CSS have too many tags

Linking or importing style sheets may sound like a clueless task. I have seen many website developers have neat and well-organized CSS documents, but slowly, because they may not be able to update quickly in a short period of time, or are too lazy to manage them, the exquisite style sheets created previously become Became garbage. If we work on a huge website that needs to publish hundreds of pieces of content. Because time is limited, you need to make quick changes or updates by nesting or arranging CSS. Over time, this habit continues until one day you are told that the site is going to be completely redesigned (but the content will still be the same) and you only have a week to create it (including testing). Generally speaking, updating the style sheet is a very simple method. Unless you make modifications to scattered areas of the website for a long time, you will not have an overall grasp of the website style sheet structure.

Linking or importing your stylesheet is not arbitrary. Create a clean style sheet and maintain it, and you'll be happier at work. Note: If you try to create a new stylesheet every time you update or add new content, you are definitely asking for trouble. Too many links and imported style sheets make it difficult to eliminate bugs and make the style sheet difficult to maintain. It is understandable for larger websites to create separate style sheets for different parts. Just be careful not to go to extremes. Adding a lot of style sheets will increase more http requests and may affect subsequent work.

2. The semantic definition is clear and easy to understand

In addition to selecting the most appropriate and meaningful elements to express, you must also select the class and id attribute values. Being clearly defined makes maintenance easier and everyone on the team will understand it. Look at this definition:

　.l10k { color: #369; } , .left-blue { color: #369; } , if it was made by me, I might know what it means, but it may not be the same as others. Got it. Even if you know its meaning today, can you guarantee that you will still know its meaning many years from now? It is best not to add color or length and width dimensions to the class attributes. A more appropriate naming convention: . work-description { color: #369; }

3. Know when to add conditional comments and application techniques

Many articles have written about problem-solving techniques. Conditional comments are a good way to control IE publishing. I agree that conditional comments are much better than messing around in your CSS document, but lately I've come to realize that there's a lot of evidence that this isn't the best solution. You want to set the minimum height of an element, but IE6 doesn't implement it, so you know that the height you can use will also be treated the same. Create a new stylesheet and add conditional comments to your markup. All you need is to follow this rule? Wouldn't it be better to keep the minimum height and height rules together and choose a trick in the same css document? In this case, I find it difficult to use this approach.

4. Try to use external style sheets when applying CSS to web pages

Are there any benefits? Everyone knows it well. Of course, one thing is undeniable. It can maximize the reuse of code and optimize the configuration of website files.
Okay, the above are some of my personal opinions. I hope friends can give me more opinions. Your suggestions are my motivation to challenge difficulties! Thanks!

The above is the application of beautiful style sheets in XHTML CSS web page production_HTML/Xhtml_ web page production. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!