Front-End Development Layering

1. The Three-Layer CSS Structure

• base: Basic Styles

Site-level, most basic, and most universal styles. Sites with different styles and content can share base styles.

Base is atomic and indivisible, such as highly compatible flex, clearfix, etc.

Reset is parallel to base as a basic style component; alternatively, a simple reset can be placed within the base layer.

• common: Common Styles

Module-level, custom style modules that can be reused across various pages.

Provides more complex style modules on top of the base layer, such as calendars, popups, etc.

• page: Page Styles

Page-level styles that do not require reuse.

Specific to individual pages, adding unique styles like specific colors, fonts, hacks, etc.

Reasonable layering effectively improves style reusability. Final styles can be changed by simply overriding a rule from a lower layer in a higher layer. Furthermore, it enhances maintainability as each layer has a clear responsibility. New styles are categorized appropriately, and final styles are implemented in HTML through class combinations.

The base and common layers should be managed and maintained by a small number of people and should not change frequently, though they can be extended. Developers directly implement page-layer styles based on UI design drafts to achieve visual effects. When writing page-layer styles, they can also be organized according to the three-layer structure, for example:

/* base */
body {
    background-color: #eee;
}
h1 {
    border-bottom: 1px solid #ccc;
}
/* common */
.panel {
    border: 1px solid #ddd;
}
.line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* page */
h1 span {
    border: 1px solid red;
    border-raduis: 3px;
}
.panel .line {
    line-height: 1.5em;
}

The key to writing page-layer styles is determining the common-layer styles—that is, how to divide modules. Extract similar parts from design drafts and abstract them into modules. Reasonable module division requires balancing the common and page layers as well as considering extensibility. If the common layer is too bloated, the page layer may have very few lines of code; if the common layer is too simple, the page layer may need a large number of descendant selectors. The principle is to provide more extensibility under the premise of maintaining simplicity to adapt to potential changes.

2. The Three-Layer JS Structure

• base: Basic Utility Library

Extends the JS API with new, more user-friendly interfaces.

Since native APIs are relatively weak, more interfaces can be extended in the base layer, such as getElementsByClassName, trim, etc.

• common: Component Library

Provides custom components or encapsulated functional modules, such as calendars, Ajax, cookies, etc.

It can also provide components frequently used in projects, such as pull-to-refresh, infinite scroll, etc.

• page: Page Scripts

Scripts written for specific business logic that do not require reuse.

Usually corresponds to HTML; i.e., each HTML file corresponds to one page-layer JS file.

The role of JS layering is reflected in progressive enhancement, gradually strengthening the native API to make page-layer development more convenient. A vivid metaphor for this: native JS APIs are like a pothole-filled (browser compatibility issues) country road (few low-level native JS API functions). Adding the base layer is equivalent to leveling and widening the road, while the common layer is like paving it with a layer of asphalt. After that, page-layer development becomes smoother and easier.

The only difference between the base and common layers is that common-layer components are larger in scale. Both must address compatibility issues. The common layer provides more powerful modules on top of the base layer. Parts that can be reused across pages in the page layer should also be added to the common or base layer (depending on scale).

In practice, the three-layer JS structure is used less frequently because of powerful third-party libraries like jQuery and YUI, which provide both base and common layer functionalities. In such cases, the three-layer structure can still be used to organize page-layer code, extracting reusable parts into the project's base and common layers. Once the base and common layers are established, the third-party libraries become foundational components parallel to the base layer.