CSS also needs refactoring

Initially exposed to the CSS object-oriented, is the project CSS more than 8,000 lines, lack of constraints and management, in the near future or not far away, there are urgent requirements need to be reconstructed. CSS object-oriented and modular.

The CSS code encountered the problem:

Reusability is poor, look at a CSS name, it is difficult to say which modules may be referenced to it, which CSS is used as part of the Web page;

As a result, no one dared to modify and delete, the latter style only stacked on top;

Afraid of CSS duplicate name, s1, S2, T1, T2 such naming began to appear, this is tantamount to quench thirst, no one knows what these styles are doing;

As a result, the CSS is getting bigger;

The idea of doing hi-fidelity artwork and business developers is completely different, and we see CSS definitions and naming of various styles;

Sometimes, you will encounter CSS conflicts, all this, or it boils down to that sentence: complexity is the root of all software problems.

The principle of CSS refactoring:

Vertical modularity: From large to small set up CSS module files, such as: public----portal-----------content;

Horizontal modularity: Suitable for a number of high-independence components, such as player module, pop-up layer module;

Provide instructional CSS: for example, to prepare several sets of list type display style, the whole system of the list display all collapsed to this place, the future skin replacement, comparison and modification, to a considerable extent to facilitate the art;

CSS Thumb principle: If the two styles in the same functional area are similar, keep only one!

The frame (column) uses the grid to control the width, while the content control height, when the page is composed of several columns, each column width can be fixed or fixed by the channel, but the height needs to depend on the content.

CSS itself is support for inheritance and modularity, in addition to HTML pages, it can be easier to do style and extended style of use.