Discussion on CSS Management Optimization

Source: Discussing CSS management and optimization
Bishua Translator

More and more large websites are paying attention to and using CSS. It is clear that they have objections to managing multiple complex CSS files. The following is the first part of the second series. The first part focuses on the management style and summarizes feasible solutions. In the second part, we will compare the above conclusions.
The powerful CSS technology has been widely used in recent years. Thanks to wired redesign (and later high profile redesigns ..., More organizations) and CSS Zen Garden (Zen garden ).
In addition, more and more designers are learning CSS and making work easier and easier, or are they?

Is it easy?
Once someone understands and uses CSS technology, few people think that CSS is more difficult to use for website layout and definition than to use table tables. However, it is a daunting task to manage large-scale dynamic and complex website styles.

Compression prohibited
Before proceeding, I must clarify a point of view. In the past, when I wrote a gzipping CSS article, we emailed or blog to "If your CSS file is too large, you don't know what you should do without compressing them. So, let's take a look at the list below and study how to make CSS files smaller.

Name	CSS file size (KB)	Note
Http://www.mezzoblue.com/	20kb	325 lines of CSS style code
Http://www.stopdesign.com/	42.75kb	1200 Lines of CSS style code
Http://www.wired.com/	27.28kb	1014 lines of CSS style code
Espn.go.com	20.81kb	799 lines of CSS style code
Http://www.blogger.com/	26.52kb	1200 Lines of CSS style code
Http://www.travelocity.com/	31.79kb	400 lines of CSS style code

The preceding figure shows detailed data about the CSS file size of a Website Based on the CSS layout. It defines the CSS file size of the entire website. Write a single line for each CSS Tag style code.
The CSS files of the above websites are larger than 20 KB. If the CSS style code you write reaches 1000 lines, should you delete the broken lines and spaces in the code, or you should handle the big and complex styles. The size of the CSS file is a problem and will be a problem for future maintenance.
However, how long will it take for you to manage and maintain CSS after the website goes online?
For some online websites, their CSS remains unchanged.
I know that I will not update and maintain the CSS files of the website until there is a problem with the website. I believe that Doug's website will not change the CSS too much before they design a new version. What will happen to sites like http://www.travelocity.com? Or do you have to update the website for a period of time for special publicity?
In fact, CSS of some websites is not static. For large websites (or simple websites with complex structures), they are CSS files with concise code, comments, and organized order.

Conclusion: Compile the easy-to-manage CSS
After reviewing the CSS files of the above websites, one thing becomes clearer and clearer. There are several conclusions that we should pay attention to when writing CSS at the beginning, how should we write CSS styles that are easy to manage and maintain.
1. inherit styles and reuse them?
2. How do you manage hacks compatible styles?
3. Should you optimize the online CSS file in one row while writing multiple lines?
4. For ease of management and maintenance, do you divide your style files into multiple files? (See digital-web, bleach)
Let's take a look at each conclusion and summarize it to develop a feasible solution.

Inheritance and reuse
Davd made a detailed analysis in his article "inheritance and reuse. In fact, inheritance and reuse are in the same category. Where to set the style depends on the actual project. However, in the scope of this article, reuse is often used when managing large and complex styles.

Manage compatible styles
This is important. When using CSS to build a website, it is inevitable to use a compatible style. Integrated web design: Strategies for long-term CSS hack management is a very useful article. I think the three suggestions in this article are important.
1. Familiar with CSS and compatible styles
2. Comments, comments, and comments
3. adopt correct repair methods
With the above three suggestions, the first one will make it easier to explain and fix as few compatible styles as possible (understanding your compatible CSS styles means you should know when to use them. This makes it easier to manage the CSS styles you define.

Optimize multiple rows into one row, and divide CSS styles based on functional requirements
I put the two together because they both need to weigh the pros and cons. If we want to make styles easier to manage, we need to add code and increase the request burden of the browser, such as using additional styles, blank spaces, and broken lines.

Hard to handle?
Some people think this is not important. The extra style sheet means adding server requests, but it is not a problem for the multi-threading browser. At the same time, CSS software, like topstyle, can easily compress your files into a single row, so you can use multi-row versions at work, it is not difficult to use a single-line version when it is uploaded to the server; you may even have some small script tools to help you (by optimizing your code into a single line, you can upload it ).

Let's take a look at the real situation.
Remember, here we will discuss how to make it easier to manage large website files. Define a style for a complex structure page (Multi-topic, multi-layer navigation). A two-dimensional table means that you may need to use 4-5 files: color, navigation, structure, form, table, and so on.
In addition to the above, when we open the ESPN homepage, there will be a brief disconnection, you may think that this is caused by additional requests. Every website will have basic updates every day (there will be more detailed style sheets every week, sometimes even every day ), at the same time, you will also find it painful to upload files to the server to make them smaller.

What is the inspiration for us?
Recall what we have discussed. The CSS style for convenient management of large websites should be:
1. In general, the CSS should be reused during compilation.
2. Good CSS comments
3. For compatible styles, a separate compatible style file is required.
4. More than one CSS file or several CSS files are easier to maintain and manage
5. the CSS is multiline and disconnected locally, but the CSS uploaded to the server should be optimized to one line.
From the above list, it is not difficult to see that a well-organized style file will increase the CSS file and code, and increase the server request burden. However, we all know that once the CSS style is parsed and downloaded for the first time, it will be cached locally, which reduces repeated requests to the code.

Rational use of Shen Yu code
What should we do with the rational use of Shen Yu code? It directly affects the style management and maintenance methods. Well, let's take a look at the several management optimization CSS explanations described in the "Practical CSS management and optimization" article.

Discussion
Please use the following message area to discuss the list of problems mentioned in this Article. Before leaving a message, please read "Practical CSS management and optimization ", your comment may be more appropriate than the one mentioned above.

Original Chinese: Discussion on CSS Management Optimization
Discussing CSS management and optimization
Reprinted please note the above information to show respect for the author and the translator. Thank you!