CSS stacked style modularization makes later maintenance easier

Source: Internet
Author: User

  Fire Station Building Institute (Bkjia.com) CSS tutorialToday, I will focus on the benefits of modular development for future maintenance!

First of all, you can read this article from ghost Brother,

There are not many advanced things. In your work, when you apply div + css operations, you should gradually think about how to improve efficiency, how to be compatible, and how to refine the code, how to Make later maintenance easier. You may want to refactor what you have previously written every time. This is a good idea and a good performance, because you are constantly improving. The idea of modularization will surely be understood by you in your gradual progress!

Here we will focus on the benefits of modular development for future maintenance! At work, I made a website, such as a structure.

First of all, I would like to talk about it. (note, it's not an apprentice in my company.) I am a very arrogant and tedious person. These two adjectives are not appropriate. This is not the case. The next day, he asked me to change the positions of B and C. I said no problem. Open css and change the left values of side_list and side_content. He is still arrogant. On the fourth day, he asked me to replace B1. I said no problem. Open css and change the top values of sub_list_1 and sub_list_3. On the sixth day, he asked me to put B1 under C and center it. Okay, I open html and cut sub_list_1 in the file to the bottom of side_content.

In the process of doing this, I just wrote one for them because the two modules have the same hx! Important.

Of course, this is only one of the benefits of modular design.

Note:

A. Priority of the same label in the upper and lower-level module.
B. Priority of global style and module style.
C is highly scalable.
D. Try to make the modules with the same labels parallel.
E. Optimize Your global style to make the module code more concise.

In my case, the layout of the cut graph is a person, so there is no name conflict problem. The modular design can also avoid this problem when multiple people collaborate. This effectively prevents naming and style conflicts.

The third note mentioned above is excellent scalability. In many cases, for example, layout has three elements, A, B, and C, and layout has 10 PX edges, is it expressed by padding in layout or by margin in child elements? Of course, different situations are different!

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.