Tips for making CSS more weight-friendly

Source: Internet
Author: User
In this article, I'll use some examples to show you some of the tips of CSS, to let you know how CSS cascade (CASCADE) can be more friendly, reduce unnecessary requirements, and thus reduce the weight of the problems.

Tip: Styles always appear as a combination of specific attributes

A good example is the combination of color and bakground-color. Unless you only tweak them, you need to adjust them together. When you add a background color to an element, it may not contain any text, but there may be some child elements. So, together we set the foreground color and background color (background-color), and we can always be sure that these elements don't experience any legibility or contrast issues. The next time we change the background color, there is no need to look around for the text color that needs to be modified, because they all appear together in a combination.

Tip Two: Using dynamic values, such as CurrentColor and EM

Sometimes the text color is also used on other properties. For example, border, Box-shadow, or the fill on the SVG icon. There is an alternative to defining the same color, and you can use CurrentColor directly. By default, color can be inherited, and you can change the color of other properties only if you modify it in one place.

Similarly, using EM units for the Font-size attribute allows you to modify only: root font-size can change the size of the box model of the element.

Tip Three: Use the Inherit property value to inherit its parent element style to override the UA style.

form controls, such as button and input, will have their own style style (UA style) for each browser. We can override the browser's UA style by inheriting its parent element style using inherit.

Button,input,select,textarea {    color:inherit;    Font-family:inherit;    Font-style:inherit;    Font-weight:inherit;}

The example code above is taken from Sanitize.css, Normalize.css, and so on. If you are not using this, you have ...

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

Tip Four: Whenever you write CSS, you want to go back to the top of the tree as much as possible. In other words, back to: root.

For example, our site has a sidebar that wants to add a brief personal introduction to this sidebar. The structure of its HTML might look like this:

<body>    <main class= "Posts" >    <aside class= "SideBar" >        <nav class= "NAV" >        <p class= "Bio" >

The CSS is written like this:

. Bio {    font-size:. 8em;    line-height:1.5;    Color: #888;}

This kind of writing works, and there is no style problem. However, the sidebar also has a navigation nav, and it is possible that some of them have the same style. Font-size and color are the same in our example. Let's take these attributes from Nav and. Bio, and add them to their parent elements. In sidebar:

. 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 is using the same row height, then we can put the. Line-height in bio and. Posts are moved to the root element:

: root {    line-height:1.5;}

This may seem like a CSS common sense, but he will not focus too much on sibling elements to define the same thing. This also lets you find that some code produces duplicates. It's not scary, because we just have to take the time to refactor the code, but that keeps the CSS's code-handling health state.

Write styles on tree branches instead of writing styles on leaves

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.

Tags Index: