The basic idea of CSS Modularization

the basic concept of modularity 1. What is a module

Modularization refers to the process of dividing a system into several modules from top to bottom by layers when solving a complex problem.
Modularity is used to segment, organize, and package software. Each module completes a specific sub-function, and all modules are assembled in a certain way to become a whole and complete the functions required by the entire system.
The module has the following basic properties: interface, function, logic, state. function, the state of the interface, etc. reflect the external characteristics of the module, logic reflects its internal characteristics. 2.HTML Page Build

Many page building engineers have gone through several stages: the first stage is to put multiple pages in a CSS file according to their own habits, order from top to bottom writing style, basically regardless of whether there is no common style, in order to complete the design presented as the primary purpose;
The second stage is to extract the common styles in different pages, such as common colors, icons, buttons, etc., to realize the reuse of some basic elements;
The third stage is to extract common function modules, such as navigation, copyright information, etc., to realize the reuse of some common modules.
The third stage of the above method already contains the idea of modularization, many teams also have a mature modular development program.

When deciding how to work with modular builds, it is helpful to follow certain principles to facilitate modularity.

An article on object-oriented CSS has pointed out that object-oriented CSS has two main principles: separate the structure from the skin,separate the content.
The first principle is embodied in the modular thinking can be understood that the module design and layout of the framework itself is separated, meaning that your module can not only for a layout and writing style, such as micro-blog such as the existence of skin-changing features of the product, if the module in different skin styles need to write a lot of styles and even modify the structure, The production of this module is a failure;
The second principle says that the layout is separated from the content, and that a location in the layout does not have to prevent only a certain content, which in turn can be understood as the flexibility and reusability of a block.

Second, adhere to the principles of team collaboration development norms. This specification can include the file directory structure, file and style naming conventions, picture Sprite specifications, module partitioning, and invocation specifications. For example, our team file directory depth rules, common style usage rules, the module's style name uniqueness, module file name and style name must be consistent rules, etc., to ensure that all the output of the module is uniform, normative.

The principle of dividing the module according to the structure presentation form. This and the modular programming has the big difference, usually in the programming development is the module function to divide, but in the page construction, sometimes the different function module renders the same style, in order to achieve the module style maximum degree of reuse, cannot divide the module according to the function, simply, which module appearance structure, We can put them into a module, to the right of the microblogging module distance, "People who may be interested" and "Recommended Application" module appearance is the same, are left a picture, the right text and function buttons, then they are the same style module.

The principle of module stability. I often ask the newcomer a question, "How do you feel about the high quality of the code you write, better than the average person." "Most people will answer to the semantics, reduce unnecessary nesting, and simplify the code as much as possible." Semantic and code simplification are an important aspect of evaluation quality, but I think the code considers the reasonableness of the data convenience, whether it takes into account the operability of the DOM node, whether it considers the damage caused by the extension, and the level of a page building engineer.

Module self-adapting principle. Refers to any one module, as far as possible to achieve the width and height of the adaptive, non-special cases do not set the width of the module, the adoption of this principle to make the module has a good Plug and Play function, is the efficient completion of the page is an important prerequisite for the work. Imagine that if each module has a width defined, you will have to redefine the properties of each module's width, height, or margin to fit the current layout on different layouts.

Margin-bottom principle. In general, the layout of a Web page is a top-to-bottom streaming layout (a multi-column structure can also be viewed as a flow layout within each column). Therefore, we can unify the preset margin-bottom for each module, achieve the purpose of uniform spacing, avoid some modules to set the top margin, some modules set the bottom margin of the situation occurs. (The left and right spacing is usually set by the style of the layout frame)

http://www.wufangbo.com/chong-gou-mo-kuai-hua/

1. Scope of the style

Scope of CSS styles:

/* Scope: Global */
p{text-indent:2em;}

/* Scope:. demo in this class *
/. Demo p{color: #000;}

In the scope of the style, we should pay special attention to the precedence of the style.

Http://www.jb51.net/article/55851.htm

Http://www.tuicool.com/articles/bINvUz2