Tips for css writing and tips for css writing

Tips for css writing and tips for css writing
I. css Sequence

First, we declare that the browser reads css in the top-down mode. We generally write css as long as the element has these attributes, it will achieve our expected results, but this will have a certain impact on future maintenance and browser rendering efficiency, so how can we write the sequence of css? Is there a certain specification?

First, we know that css attributes are divided into several categories by features;

1. Specify element features, such as display, position, and float. These attributes determine the layout mode.

2. Specify the space occupied by the element, such as line-height, margin, padding, width, and height. These attributes determine the size and position of the element.

3. specify the effect of an element, such as font-size, color, and background. These attributes determine the effect of the element.

In fact, when we classify the css attributes, we will get a very obvious answer. We can imagine that we can use css to draw the element in the order of writing, for example

 

p.detail {  font-size: 10px;  line-height: 12px;  width: 30px;  height: 30px;  display: inline;        }

 

Description: This is an element font. The font size is 10px. The Row Height Is 12px. The width is 30px. The display mode is inline.

When we start to read attributes, it is difficult to locate the elements, because we do not know the characteristics of the elements and display methods. When I read the last line, I found that this is an inline element, and the definition of width and height will be invalid. Therefore, this css writing sequence is not recommended.

p.detail {  display: inline-block;  margin-top: 20px;  width: 100%;  height: 20px;  color: #fff;  font-size: 10px;}

Description: This is an element. It is displayed in inline-block mode. The width is 20 PX away from it and the width of the parent element is 20 PX. The color is in the White font and the size is 10 PX.

This way of writing can be rendered in a way that we can easily understand.

 

Conclusion: when writing css, we recommend that you first write the attributes that affect the element display characteristics, then write the attributes that affect the element position, and finally write the internal attributes of the element.

 

Ii. Click or hover to trigger css writing for highlighting

When the mouse hover is used, we often add an active class name to the element to be changed, and then write the attributes we need to change in the active class.

For example:

.content {  background: black;  }.active {  background: white;}

When we click an element, we need. the background color of content changes from black to white. adding an active class name to content will achieve our expected results. However, when we click it, we do not only need to change the attribute of an element, but this may happen.

When you click an element named. click, the element icon font and the font of the span element become larger and red. What should we do?

<div class="parent"><div class="icon-font"></div><span class="text"></span></div><div class="click"></div><style>　　.icon-active{　　　　font-size: 40px;　　}　　.text-active{　　　　color: red;　　}</style><script src="jquery.js"></script><script>　　$(‘.click’).click(function() {　　　　$('.icon-font').addClass('icon-active');　　　　$('.text').addClass('text-active')　　})</script>

This can achieve our expected results, but this is the Association Reaction of the two elements. If there are three or more elements, we will need more code,

In fact, a careful friend may find that I have a. parent label. we can add the active class name code to the. parent label as follows:

<div class="parent"><div class="icon-font"></div><span class="text"></span></div><div class="click"></div><style>　　.active .icon-font{　　　　font-size: 40px;　　}　　.active .text{　　　　color: red;　　}</style><script src="jquery.js"></script><script>　　$(‘.click’).click(function() {　　　　$('.parent').addClass('active');　　})</script>

　　

In this case, we only need to add the active class name to the outermost layer of the css element, and then set the style of the child element under the class name, in this way, we only need to add an active class name to achieve the expected effect.