From the div box model, we will discuss how to write maintenance css code, divcss

From the div box model, we will discuss how to write maintenance css code, divcss

We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on. Among the many language design patterns, I could not find any information about the CSS design patterns. Even if I found similar content on the Internet, I found that it was just like nothing. After discovering the vast number of articles, I still found nothing, which directly led to the impulse to write a CSS design pattern. So far, I wrote this article, describing any improper content, I would like to ask you to share your valuable experience with us.

In the write page, the width, margin, and padding CSS attributes are one of the most frequently used attributes. However, according to my point of view, many people, even the majority of front-ends, have little confidence in writing these three attributes, so that compatibility and flexibility cannot be balanced, leading to a sharp increase in development and maintenance costs in the future, the Code continues to grow, overwrite the style, and then fix one Bug after another. In this case, it is wise to use a reasonable and efficient CSS design mode:Width, margin, and padding(Hereinafter referred to as the three-Permission separation mode ). A front-end UI framework that can improve development efficiency by 500%!

What is the three-Permission separation mode:

Before explaining this mode, you must first understand what the box model is. You can refer to the box model of Firebug below:

Note: In the figure, the color of margin is white (essentially transparent ). Margin is special. It does not affect the size of the box, but it affects other content related to the box. Therefore, margin is an important component of the box model.

The size of the box itself is calculated as follows:

Width: width + padding-left + padding-right + border-left + border-right
Height: height + padding-top + padding-bottom + border-top + border-bottom

We can see from the figure that Width (total physical width)/Height (total physical height) is determined by the sum of Width/Height, padding, and border. However, once the simple box model involves CSS, there will be no small accident.

Assume that a box with a width of PX and a height of 80 PX is required, and a text section is put in it. The text is separated by 10 PX. In general, Html and CSS are written as follows:

HTML code:

. Code

1. <Div class = "box">
2. We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on.
3. </Div>

 

CSS code:

. Code

1. . Box {width: 280px; height: 60px; padding: 10px ;}

 

To analyze this CSS code, because it must meet the PX Width and the text interval is 10 PX, so width (300px) = Width (280px) + padding (10px) X 2. If a change is required after a while and the frame with the 1px color # ccc needs to be added to the Box, we will find the CSS again, start to modify it, and add a boder: 1px solid # ccc;: front-end UI framework that can improve development efficiency by 500%!

CSS code:

. Code

1. . Box {width: 280px; height: 60px; padding: 10px; border: 1px solid # ccc ;}

 

Test it later. Thanks! It seems a problem. Oh, because the border is added, the width of the 2px pixel is increased, so the 2px is subtracted.

. Code

1. . Box {width: 278px; height: 58px; padding: 10px; border: 1px solid # ccc ;}

 

Test and solve the problem. Just as the designer was excited about preparing for the rest, according to the latest requirements, he hoped that the text and margin would be extended, and the top and bottom margins would be 10px, and the left and right sides would be changed to 15px. Continue modification:

. Code

1. . Box {width: 268px; height: 58px; padding: 10px 15px; border: 1px solid # ccc ;}

 

After "precise" calculation, the above CSS result is finally obtained. The number of pages to be modified is growing, and the code is becoming more complex and the computing workload is growing, you can only be complacent about your "professional" skill that is accurate to 1 px, and then have to get tired of traveling and wide and high computing on various pages. This is one code that only you can understand!

How can we get rid of such invalid code problems? The CSS three-Permission separation mode is the best solution.

The core of the CSS three-Permission separation mode is to completely separate the width, margin, and padding CSS attributes. One class can only have one of the three attributes, by adding an additional tag, you can use multiple classes to control the appearance of elements and remove the coupling between the three elements.

Take the preceding example as an example. Rewrite the box with a width of PX and a height of 80 PX. The text is separated by 10 PX. In the three-Permission separation mode, the statement is as follows:

Html code:

. Code

1. <Div class = "box">
2. <Div class = "roundBox">
3. We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on.
4. </Div>
5. </Div>

 

CSS code:

. Code

1. . Box {width: 300px; height: 80px ;}
2. . Box. roundBox {padding: 10px ;}

 

Here, the width, height, and spacing values are exactly the same as the values required, and do not need to be calculated. Next, we encountered a problem of modifying the Box by adding a frame with a 1px color of # ccc. We only need to modify it like this: a front-end UI framework that can improve development efficiency by 500%!

. Code

1. . Box {width: 300px; height: 80px ;}
2. . Box. roundBox {padding: 10px; border: 1px solid # ccc ;}

 

Add a border directly to the internal label class, and add the border attribute directly. If you need to extend the text and margin, the top and bottom margins are 10px, and the left and right margins are 15px.

. Code

1. . Box {width: 300px; height: 80px ;}
2. . Box. roundBox {padding: 10px 15px; border: 1px solid # ccc ;}

 

Note: In the above example, we can see that the padding and border are consistent in the "width possession" nature (from a certain point of view, setting border to transparent and then setting a certain width is a disguised padding ), therefore, these two attributes can be written in the same class. They are similar in nature and do not need to be separated.

We can see that the use of the three powers separation mode to write code is concise and efficient, and there is a qualitative leap from readability and maintainability.The only difference is to add an extra label internally to ensure that the padding/border will not interfere with the width, removing the coupling between the two, which is also a cost for maintainability.

In the preceding example, another property, Margin, is ignored. The position of Margin in the separation of three powers is not as obvious as the coupling strength between width and padding, but in my opinion: the separation of Margin is the most important part of the three powers separation model. Why is Margin so important here? Because it can be seen that a front-end developer is skillful-code reusability.

When it comes to code reusability, any computer language will elaborate, and CSS code reusability is no less important to a front-end than JavaScript refactoring. The reusability of CSS directly affects the reusability of HTML code.

Looking back at the code above, the box here is only a small part of a page. Looking at the entire website, there will be no or impossible page requiring only one module. Every time a module is written, it will be integrated, maintained, and developed with various pages in the future.

Continue with the above example. Now we have completed this module and started page integration. Assume that the interval between the positions of this module and the left is 10 PX, and the interval between the above modules is 15 PX. This may be the case: a front-end UI framework that improves development efficiency by 500%!

. Code

1. . Box {width: 300px; height: 80px; margin: 15px 0 0 10px ;}
2. . Box. roundBox {padding: 10px 15px; border: 1px solid # ccc ;}

 

The writing method here was originally not at great fault. Since the importance of the Margin separation was proposed, of course it would not be so simple as to confuse it.Remember: The Code of each module you write may be reused on another page (Project) in the future. Even I have seen that a module is repeatedly reused by several different pages.

Here, let's continue. Assume that this module needs to be used in another place, where the design position must be 0 PX at the same interval as above, 5px on the left. The content structure is completely consistent. How can you solve this problem?

In this case, some people will turn a blind eye to the original code and directly rewrite a new HTML and CSS. Let alone, I have met you. The second method may modify HTML and CSS as follows:

HTML code:

. Code

1. <Div class = "box anotherPlace">
2. <Div class = "roundBox">
3. We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on.
4. </Div>
5. </Div>

 

CSS code:

. Code

1. . Box {width: 300px; height: 80px; margin: 15px 0 0 10px ;}
2. . Box. anotherPlace {margin: 0 0 0 5px ;}
3. . Box. roundBox {padding: 10px 15px; border: 1px solid # ccc ;}

 

Add a combiner selector to overwrite the original margin attribute. This is a clever method. If this module is reused multiple times, add multiple combiner selectors, I used similar methods to fix various bugs today. A front-end UI framework that can improve development efficiency by 500%!

Maybe the above method can solve similar problems, but as a person who likes nothing to worry about something, I always think something is wrong.Under constant thinking, we finally find that this is not a real reuse, but a "Repair". From a certain point of view, it is just a "patch" for this module ".The integration selector is not a small patch embedded into different pages, but there will still be so much code written, which is not ideal for reuse.

The ideal reuse means that without adding any code, we can use the original code to completely complete all modules. Although it is just an ideal state, we can keep approaching this goal. After studying some CSS libraries, I found that many of them coincide with my own ideas. Margin separation is one of them. Let's take a look at the following code snippets:

CSS code:

. Code

1. . M10 {margin: 10px}
2. . M15 {margin: 15px}
3. . M30 {margin: 30px}
4. . Mt5 {margin-top: 5px}
5. . Mt10 {margin-top: 10px}
6. . Mt15 {margin-top: 15px}
7. . Mt20 {margin-top: 20px}
8. . Mt30 {margin-top: 30px}
9. . Mt50 {margin-top: 50px}
10. . Mt100 {margin-top: 100px}
11. . Mb10 {margin-bottom: 10px}
12. . Mb15 {margin-bottom: 15px}
13. . Mb20 {margin-bottom: 20px}
14. . Mb30 {margin-bottom: 30px}
15. . Mb50 {margin-bottom: 50px}
16. . Mb100 {margin-bottom: 100px}
17. . Ml5 {margin-left: 5px}
18. . Ml10 {margin-left: 10px}
19. . Ml15 {margin-left: 15px}
20. . Ml20 {margin-left: 20px}
21. . Ml30 {margin-left: 30px}
22. . Ml50 {margin-left: 50px}
23. . Ml100 {margin-left: 100px}
24. . Mr5 {margin-right: 5px}
25. . Mr10 {margin-right: 10px}
26. . Mr15 {margin-right: 15px}
27. . Mr20 {margin-right: 20px}
28. . Mr30 {margin-right: 30px}
29. . Mr50 {margin-right: 50px}
30. . Mr100 {margin-right: 100px}

 

The above is actually a code excerpt from a CSS public file. The idea is to introduce these public CSS classes and define Margin separately. You can use the abbreviated name to remember the attributes. For example, mt15 indicates margin-top: 15px. Let's see how to use it. A front-end UI framework that can improve development efficiency by 500%!

In the past, when the module was integrated into the page, it had to be 15 PX away and 10 PX left away. The CSS library was written like this:

HTML code:

. Code

1. <Div class = "box mt15 ml10">
2. <Div class = "roundBox">
3. We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on.
4. </Div>
5. </Div>

 

CSS code:

. Code

1. . Box {width: 300px; height: 80px ;}
2. . Box. roundBox {padding: 10px 15px; border: 1px solid # ccc ;}

 

Remove unnecessary combine selectors and select CSS attributes that can be highly reused. You may not think it makes much sense here, but if you need to put this module on another page, as shown in the preceding figure, the interval between the top and the top is 0, which is 5 PX away from the left. This function is used to directly modify the HTML code without any CSS modifications, high reuse of modules:

HTML code:

. Code

1. <Div class = "box ml5">
2. <Div class = "roundBox">
3. We often see a variety of design patterns books on the market, Java design patterns, C # design patterns, Ruby design patterns, and so on.
4. </Div>
5. </Div>

 

In this way, do you still think that the original selector method is correct. I personally think:Margin is the biggest killer that hinders module reuse, because any component will add the Margin attribute to separate itself from others and directly copy the original code, the previously applied attributes of Margin have become a hindrance to the position of new components. Timely separation of Margin can effectively remove the coupling between components and Margin to achieve reuse.

This is the full picture of the three separation modes. The attributes width, margin, and padding are completely separated, greatly improving code reusability and maintainability, and removing coupling between them, it lays a solid foundation for future development and maintenance and is also the advantage of CSS design patterns.

Of course, the design model also has two drawbacks:

Complexity: The cost of maintainability is always required, that is, the Code may become more complex and more difficult for new users to understand. In the separation of three powers mode, it is necessary to consider and standardize the import of the Public CSS reuse module and write multiple classes to merge instead of using a single class.

Performance: Most design patterns may drag down the code performance, which may be negligible or unacceptable, depending on the specific requirements of the project. The three-Permission separation mode requires an additional internal tag to separate the padding attribute. A front-end UI framework that can improve development efficiency by 500%!

It is easier to implement the design mode, but it is more difficult to know when to use the mode. You should try to ensure that the selected mode is the most appropriate and do not sacrifice performance excessively. This is of great help to individual development and even to the development and maintenance of a team. I personally think that the use of the three powers separation mode is far better than the disadvantages. I hope you can understand his thoughts and functions, he is used in team development to maintain him. The real application of the Three-Permission separation mode can help you and your team develop more robust code.

After writing so much, I only hope that you can understand that using a reasonable CSS design pattern can help us optimize code. The ultimate goal is to ensure the efficiency and maintainability of CSS development and maintenance, the charm lies in this.

CSS + DIV write box model Diagram

There are two web box models:
1: Standard W3C box model; 2: IE box model (default model of IE browser ).
In the two different model Web pages, the display effects of elements defining the same CSS attributes are different. The following uses a formula to distinguish the two different box models.
1: Standard W3C Box Model
Width = width + (padding-left) + (padding-right) + (margin-left) + (margin-right) + (border-left) + (border-right)

Height = height + (padding-top) + (padding-bottom) + (margin-top) + (margin-bottom) + (border-top) + (border-bottom)
2: IE Box Model
Width = width + (border-left) + (border-right)
Height = height + (border-top) + (border-bottom)
This model is the default box model of IE browser. You can also change it. Add the following code at the top of the page:

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">

A div + css box model, common template sample

Code can be run directly
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "content-Type" content = "text/html; charset = UTF-8"/>
<Title> New Document </title>
<Link rel = "stylesheet" type = "text/css" href = "css/style.css"/>
<Script src = "js/dialog. js" language = "JavaScript" type = "text/javascript"> </script>
<Meta name = "Generator" content = "EditPlus">
<Meta name = "Author" content = "">
<Meta name = "Keywords" content = "">
<Meta name = "Description" content = "">
<Style>
Div, img, a, body, ul, li, span, p {margin: 0; padding: 0 ;}
. Clear {clear: both ;}
. Ban {
Width: 960px;
Height: 40px;
Background-color: red;
Border: 1px blue solid;
Margin: 10px 0;
Padding: 10px 10px;
/* The actual height of ban is 40 of height + 2 of border (1px) + 20 of padding (10px) = 62px; the width is the same */
}
. Menu {
Width: 960px;
Height: 40px;
Background-color: blue;
Border: 1px red solid;
Margin: 20px 0;
Padding: 10px 10px;
}
/* The top and bottom margins between ban and menu should be 10 + 20 = 30, but because of the browser's margin bug, the value between the two is greater than the margin, therefore, 20 */
. Left {
Width: 150px;
... The remaining full text>