Is CSS modularized?

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.