CSS modularization (3) CSS Organization

3. CSS Organization

The so-called benevolent and wise, so how to organize CSS can have a variety of angles, for example, by function: In the ghost file; or by block: Put the head CSS in head.css, the bottom in foot.css, and the side bar in sidebar.css. The main body is in main. Organization Methods from different perspectives have their own principles and advantages and disadvantages.

Here we recommend a method to organize CSS: base.css + common.css + page.css. All the styles in the website are divided into three categories by function: base.css, common.css, and page.css. In general, the final performance of any web page is achieved by the three. These three are not parallel structures, but stacked structures ,.

3.1 Base Layer

This layer is located at the bottom of the three and provides css reset function and the minimum granularity generic class-atomic class. This layer is referenced by all pages and is the bottom layer of the page style dependency. This layer has nothing to do with the specific UI, No matter what style of design can be referenced, so the base layer should strive to be simplified and general. If the css control page style is used as a metaphor for building a house, the core function of this layer is to lay a foundation for the house css reset, and prepare sufficient bricks (atomic classes) for building a house. Because almost all houses require Foundation and bricks, the basc layer is highly portable. Websites of different design styles can use the same base layer. For this layer of content is very small, so you can simply put it in a file, such as base.css.

The base.css layer is relatively stable and basically does not require maintenance.

Example: see the file for base.css recommended by YUI.

3.2 Common Layer

This layer is in the middle and provides component-level CSS classes. When talking about components, you have to mention "modularization ". "Modularization" can be considered in terms of style and behavior. The common layer is related to the modularization of style. Today, the main focus is on css modularization. We can split the elements in the page into small modules with relatively independent functions and styles. Some of these modules are rarely repeated, and some are repeated, we can regard a large number of repeated "modules" as a component. We extract as many components as possible from the page and place them on the common layer, which is equivalent to the Model in the MVC mode. To ensure reusability and flexibility, M needs to encapsulate the internal implementation as much as possible to provide flexible interfaces for the parts that may change frequently. The common layer technique will be introduced below.

The common layer is like the doors and windows used for building a house. Doors and windows of different styles are used in different houses. The number and location of doors and windows used in different rooms can be different, but the style is the same. Doors and windows have their own small components, such as glass, door bolts, door frames, door panels, and key holes. Doors and windows can be moved and increased or decreased as a whole, but the structure of the doors and windows is relatively stable. A house of different styles is like a website of different styles. The doors and windows used by the House are like the UI components used by the website. It is best to keep doors and windows consistent with the style of the entire house. Similarly, it is best to keep the style of the UI components consistent with that of the website. The UI component is a unit in the website and can be highly reused within the website, but different websites may use different UI components.

Therefore, the common layer is website-level. different websites have different common layers. The same website has only one common layer. You need to determine the size of your website. In teamwork, it is best for one person to take charge of the common layer and manage it in a unified manner.

3.3 Page Layer

Highly Reusable Modules in websites are regarded as components and placed on the common layer. Non-highly reusable modules can be placed on the page layer. The page layer is located at the highest level and provides page-level styles. Similar to building a house, the page layer is like a decorative painting in the room. The decorative painting posted in different rooms is different. It is not like bricks, and all houses are the same: it is not like doors and windows, it is the same in the same house, it has no requirements for reusability, can be posted according to the needs of the layout of each room.

The page layer is page-level, and each page may have its own page layer css.