Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to make the weight of css become more friendly related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will get something after reading this article on how to make the weight of css more friendly, let's take a look at it.

Tip 1: styles always appear as a specific combination of attributes

A good example is the combination of color and bakground-color. Unless you only make minor adjustments, you need to adjust them together. When you add a background color to an element, it may not contain any text, but it may have some child elements. So, when we set the foreground color (color) and the background color (background-color) together, we can always make sure that these elements don't encounter any readability and contrast problems. The next time we change the background color, we don't have to look around for the text color that needs to be changed, because they all appear together in a combination.

Tip 2: use dynamic values, such as currentColor and em

Sometimes the text color is also used on other properties. For example, on fill in the border, box-shadow, or SVG icons. There is an alternative to defining the same color, and you can use currentColor directly. By default, color is inheritable, and you only need to modify it in one place to change the color of other properties.

Similarly, using em units for the font-size attribute allows you to change only the font-size of the root to change the box model size of the element.

Tip 3: use the inherit attribute value to inherit its parent element style to override the UA native style.

For form controls such as button and input, different browsers have their own styles (UA styles). We can use inherit to inherit its parent element style, overriding the browser's UA style.

Button

Input

Select

Textarea {

Color:inherit

Font-family:inherit

Font-style:inherit

Font-weight:inherit

}

The above sample code is taken from sanitize.css, and normalize.css is also used in this way. If you don't use it in this way, you have.

You can also try to automatically match colors directly using the currentColor attribute described earlier on elements such as input [type = "range"], input [type= "radio"], and input [type = "checkbox"]. Maybe you don't need to change anything, you can turn a bright color system into a dark color system.

Tip 4: every time you write CSS, you want to get back to the top of the tree as much as possible. In other words, go back to: root.

For example, our website has a sidebar, to which we would like to add a short personal introduction. The structure of its HTML might look like this:

CSS writes like this:

.Bio {

Font-size:.8em

Line-height:1.5

Color:#888

}

It works well in this way, and there is no problem with the style. However, the sidebar also has a navigation nav, and it is quite possible that some of them are the same. In our example, font-size and color are both the same. Let's extract these attributes from nav and .Bio and add them to their parent element, .sidbar:

.SideBar {

Font-size:.8em

Color:#888

}

It turns out that line-height:1.5; has been set up in .posts. It seems that the entire page uses the same row height, so we can move the line-height in .Bio and .posts to the root element:

: root {

Line-height:1.5

}

This may seem like CSS common sense, but he doesn't pay much attention to the same thing as the definition of sibling elements. This also allows you to find that some of the code is duplicated. In fact, this is not scary, because we just need to take some time to ReFactor the code, but this keeps the CSS code processing healthy.

This is the end of the article on "how to make the weight of css more friendly". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to make the weight of css more friendly". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.