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

In this article, the editor introduces in detail "what are the skills for writing css", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the skills for writing css" can help you solve your doubts? let's follow the editor's ideas slowly to learn new knowledge.

Technique one

Whenever you write CSS, you want to go 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.

Technique two

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.

Skill three

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.

Technique 4

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. 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.

After reading this, the article "what are the skills for writing css" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, 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.