CSS Tutorial: Writing easy to manage CSS

More and more large Web sites began to focus on, using CSS, for the management of multiple complex CSS files is obviously a challenge. Here is the first part of the two series, the first part of which we focus on the management style of view, and based on the conclusion of a workable solution. In the second part, we will compare the above conclusions.
Powerful CSS technology has been widely promoted in recent years. Thanks to Wired redesign(as well as the later high profile redesigns..., more organizations ) and CSS Zen Garden (Zen Garden).
In addition, there are more and more designers to enhance the learning of CSS, and through learning to make the work easier, simple, or they are themselves?

Is it easy?
Once someone understands and uses CSS technology, few people think that using CSS for site layout and definition is more difficult than using a table Form. However, the management of large dynamic, complex web site styles is obviously a daunting task.

Suppress compression
Before I go any further, I must clarify one point. When I was writing a gzipping css article, everyone through the mail or blog to "If your CSS file is too large, you do not know what to do when you do not crazy to compress them" published their views. So, let's look at the list below and examine how to make the CSS file smaller.

name	CSS file Size (KB)	Notes
Www.mezzoblue.com	20KB	325 line CSS Style code
Www.stopdesign.com	42.75KB	1200 Line CSS style code
Www.wired.com	27.28KB	1014 Line CSS Style code
Espn.go.com	20.81KB	799 Line CSS Style code
Www.blogger.com	26.52KB	1200 Line CSS style code
Www.travelocity.com	31.79KB	400 line CSS style code

Above is the application CSS layout, defines the website the CSS file size detailed data, it is defines the entire website the CSS file size. Each CSS tag style code is written in a single line.
The above Web site's CSS files are greater than 20Kb, if you write CSS style code to 1000 lines, whether you should delete the code break, space, or you should deal with those large and complex style. The size of the CSS file is a problem and is a problem for future maintenance.
But when the website is online, how often do you really manage and maintain CSS?
For some of the online after the site, their CSS basically remain unchanged.
I know that I will not update and maintain the CSS file of the website before the site has any problems. I'm sure Doug 's website won't be too big for CSS before they redesign it. Like www.travelocity.com Web site and what is it? Or for special publicity, you have to update the site for a period of time content?
In fact, some of the Web site's CSS is not immutable. For large Web sites (or simple Web sites but structurally complex) they are code-concise, annotated, well-organized CSS files.

Conclusion: Writing CSS that is easy to manage
With the above site CSS file review, one thing becomes more and more clear. There are several conclusions that we should be aware of when we first write CSS, how we should write CSS styles that are easy to manage and maintain.
1 . Inherit style and reuse?
2. How will you manage hacks compatibility style ?
3, you should be online CSS file optimization in one line, and in the writing can be more than line?
4, in order to ease the management of maintenance, you will be your style file into multiple files? (See Digital-web, Bleach)
Let's take a look at each conclusion and make a workable plan by summarizing it.

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

Manage compatible styles
This point of view is more important. When using CSS to build a Web site, it is unavoidable to use a compatible style. integrated Web design:strategies for long-term CSS Hack Management is a very useful article, I think the article gives us three suggestions is more important.
1, the CSS and compatibility style at your fingertips
2, notes, notes, notes
3, adopt the correct method of repair
Using the above three suggestions, the first one lets us try to use less compatible styles (knowing your compatible CSS styles means you should know when to use them) and they are easy to explain and easy to fix. So that you can define the CSS style easier to manage.

Multi-line optimization to one line and partitioning of CSS styles based on functional needs
I put these two together because they all need to weigh the pros and cons. If we want to make the style easier to manage, we need to add code and add to the browser's request, such as using extra styles, blanks, and breaking lines.

Is it difficult to handle?
Some people think these are not important. The extra stylesheet means adding server requests, but it's not a problem for multi-threading browsers. At the same time, CSS software like TopStyle is easy to compress your files into a single line, so when you work with multiple lines of version, when uploaded to the server with a single version is not a difficult thing; even you'll have some small scripting tools To help you (optimize your code to a single line and you can upload it).

Look at the real situation.
Remember, here we are talking about how to make large Web site files easier to manage. Defining styles for complex structure pages (multiple themes, multiple layers of navigation), multiple stylesheets means you may need to use 4-5 files: color, navigation, structure, forms, tables, and so on.
In addition to the above mentioned, when we open the ESPN homepage there will be a short break, you may think that this is due to the additional request. Every site will have a basic update every day (probably every week will have a finer style sheet, sometimes even updated every day), and you will find it painful to upload files to the server.

Give us the revelation?
Looking back at what we've discussed, a CSS style that is easy to manage for large Web sites should be:
1, generally speaking, the writing of CSS needs to reuse
2, a good CSS annotation description
3. For compatible styles, a separate compatible style file is required
4, more than one CSS file or several CSS files easier to maintain management
5, CSS Local is multiline, break, but upload to the server on the CSS should be optimized for one line.
It is not difficult to see from the above list that well-organized style files will add CSS files and code, while increasing the server request burden. However, we all know that once the CSS style has been downloaded for the first time, it will be cached locally, thus easing repeated requests for code.

Reasonable use of the settlement code
How do we do that in terms of reasonable use of the residual code? It can directly affect the way we maintain the style management. OK, let's take a look at the " Practical CSS Management and Optimization " article that describes several management optimization CSS tutorial.

Discuss
Please use the message section below to discuss the list of issues mentioned in this article, please skim " practical CSS Management and optimization " before leaving a message, your comments may be more appropriate than the above.

on the optimization of CSS management
English Original:discussing CSS Management and optimization