1. CSS order

# First of all, it is stated that the way the browser reads css is from top to bottom. We generally write CSS and as long as the elements have these attributes, we will achieve the desired effect. However, this will have a certain impact on future maintenance and the rendering efficiency of the browser. So how should we write the order of CSS? Are there any certain norms?

First of all, we know that CSS properties are divided into several categories according to characteristics;

1. Specify element characteristics, such as display, position, float, These attributes will determine its layout method

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

3. Specify the element’s own effect, such as font-size, color, background, etc. These attributes will determine the effect of the element

In fact, when we finish classifying the properties of CSS, we will get an obvious answer. We can imagine ourselves using 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 with a font size of 10px, a line height of 12px, a width of 30px, and a height of 30px. The display mode is inline style

When we start reading When it comes to attributes, it will be difficult for us to locate the element because we don't know the characteristics and display method of the element. When I read the last line, I discovered that it turned out to be an inline element, and the definition of width and height would be invalid, so this CSS writing order 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, the display mode is inline-block mode, the distance is 20px, the width is the same as the parent element, the height is 20px, the color is white, the font size is 10px

This way of writing can follow a We render in a way that is easy to understand

Summary: The recommended specification when we write CSS is to first write the attributes that affect the display characteristics of the elements, then write the attributes that affect the position of the elements, and finally Writing internal attributes of elements

2. Writing css that triggers highlighting when clicking or hovering

When the mouse hovers, we often add elements that need to be changed An active class name, and then write the attributes we need to change in active

For example:

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

When we click on an element, we need the background color of .content From black to white, adding the active class name to .content will achieve our expected effect. However, sometimes we have to change more than one element's attributes when clicking. We may have this situation

We need to know what to do if the icon font of the element and the span element become larger and the other becomes red when we click on an element with a class name of .click. We can do this

<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?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.icon-font&#39;).addClass(&#39;icon-active&#39;);
　　　　$(&#39;.text&#39;).addClass(&#39;text-active&#39;)
　　})
</script>

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

In fact, careful friends may have discovered that I have A .parent tag, we can add the active class name code to the .parent tag 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?1.1.11"></script>
<script>
　　$(‘.click’).click(function() {
　　　　$(&#39;.parent&#39;).addClass(&#39;active&#39;);
　　})
</script>

In this case, we only need to change the last part of the css element Add the active class name to the nearest outermost layer, and then set the style of the descendant elements under this class name, so that we only need to add an active class name to achieve the desired effect

The above is the detailed content of What should you pay attention to in the order of writing css?. For more information, please follow other related articles on the PHP Chinese website!