Hanging out on w3ctech, I accidentally saw the topic "file organization in website reconstruction", so I wanted to write my own understanding and ideas about css organization, as shown below:
1. Category
1.1 website Channels
| -- Reset layer: includes resetting the style and some common style names, for example, fl is float: left, tc is text-align: center;
| -- Base layer: includes the header, menu, footer, and some common components, such as popup, tip, and banner;
| -- Channel layer: Common channel layer, that is, the second-level column of a website, such as forum and comic
| ---- Page layer: subject, the main body of this channel is divided into page1-a, css, page1-b, page1-c...
1.2 activity and topic categories. Different from website channels, the main content of the activity page is relatively fixed and the launch time is short. Therefore, the activity is divided into modules and modules are loaded as needed. For example:
Activity-Comment module events-comment.css, activity-vote ranking events-vote.css, activity-register module events-registration.css, activity-Paging module events-page.css.
2. layer example
2.1 The css structure of a level-2 channel, such as a manke channel, is
| --Reset.css
| --Base.css
| --Make.css
2.2 large second-level channel, such as an animation channel, contains three sub-channels. Its css structure is
| --Reset.css
| --Base.css
| --Comic-public.css
| ----Comic.css
| ----Comic-cartoon.css
| ----Comic-book.css
2.3 general activities, including registration, comments, and voting modules (Note: The base layer in the website channel class is not referenced here)
| --Reset.css
| --Events-registration.css
| --Events-comment.css
| --Events-vote.css
3. Teamwork
For example, if engineer A and engineer B develop pk (level 2 channel) at the same time, the development process is as follows:
Step 1: complete.
Step 2: Conflict. In order to reduce conflicts, engineer A's css is prefixed with a, such. pk-a-title ,. pk-a-main ,. pk-a and so on.
4. Style Merging
In the example above, 2 must reference at least four css. If other applications are added, the number of css files is very large. How can this problem be solved?
Load a normal number of css files in the QA phase, merge the styles before going online, and compress them.
Recommended tools: "Style File merging tool mergeCSS". B