Three stages of modular development:
The first stage: In a CSS file in a number of pages in their own custom sequence from top to bottom writing style, basically regardless of the common style, to complete the design as the primary purpose.
The second stage: extracting common styles from different pages, such as common colors, icons, buttons, etc., to enable the reuse of some basic elements.
The third stage: the extraction of common functional modules, such as navigation, copyright information, to achieve the reuse of some common modules. Object-oriented CSS has two main principles:1. Embodied in the modular thinking can be understood as, 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 is more so, 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. 2. Separation of layout and content, in a layout where there is no need to place a certain content, which in turn can be understood as the flexibility and reusability of the module. adhere to the principles of Team Collaboration Development specification: This specification can include file directory structure, file and style naming specification, Picture Sprite specification, module partitioning and invocation specification, such as our rules for file directory depth, common style usage rules, module style name uniqueness provisions, Module file name and style name must be consistent rules and so on, to ensure that all the output of the module is uniform and normative. The principle of dividing the module according to the form of structure: this and the modular programming have 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 put, which modules look like the structure, we can classify them as a module, to the right of the microblogging module example, "may be interested in" and "Recommended Application" module appearance is the same, is the left one picture, the right text and function buttons, then they are the same style module. The principle of module robustness: Adhere to semantics, reduce unnecessary nesting, and simplify the code as much as possible. Semantic and code simplification is an important aspect of evaluation quality, but whether the code takes into account the rationality of data traversal, whether to take into account the operability of the DOM node, whether to consider the extension caused by the anti-damage row, more can reflect a page building engineer level. Module Adaptive principle: Refers to any one module, as far as possible to achieve the width and height of the self-adaptation, 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 work of the page is an important premise. 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 the Web page is from top to bottom flow layout (multi-column structure can also be considered as the flow layout in each column), so we can set a unified preset Margin-bottom for each module, to achieve the purpose of uniform spacing, Avoid some modules setting the top margin, and some modules setting the bottom margin of the case occurs.
Front-end development: modularity-efficient refactoring
