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

This article will explain in detail what is the weight distribution of the commonly used sorting methods in Css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Sort by:

1. Display and float by type, positioning, size, font, etc.

2. Arrange them in alphabetical order, the advantage is that the rules are simple

3. Arrange the character length defined by the style according to the defined length

Each has its own advantages and disadvantages. In practical application, the first one is recommended. But it is also difficult to rely solely on front-end engineers to do this during the writing process, you can write in the most efficient way during the writing process, and use the tool to sort the css when submitting the code. It not only improves the efficiency, but also facilitates the subsequent code reading and maintenance. One free tool is CSScomb.

Make rational use of the weight of css to improve code reusability

What is the weight, that is, the priority of many type selectors in css, the style with high priority will override the style with low priority. For the more specific rules of weight, you can refer to the data, which will not be repeated here.

Teach you how to define the appropriate selector according to the weight of the selector:

(1) avoid using ID selector as much as possible

Two identical ID cannot be defined in a page, and the weight of the ID selector is very high. If you want to override the element style that uses the ID selector, you must add a new selector to its element, or use it! Important, the result will be more style code that cannot be reused. The best practice is to use selectors with lower weights as the base style as much as possible.

(2) reduce the level of sub-selector

It is also a process of reducing the overall weight of the sub-selector. At the same time, the fewer the levels, the less the dependence on the html structure. Another reason for excessive levels of Css is the abuse of tools such as sass and less, which I was aware of at the beginning of my use, because you can use nesting and references to define styles, which saves yourself a lot of effort, but the file has to be compiled eventually, and we don't have to type so much code over and over again, but there will still be a lot of code generated, so While making it convenient for yourself, you should still pay special attention to reducing the selector level.

(3) use the combined css class selector

In this way, developers do not have to consider the problem of css style coverage, avoid the process of calculating selector weights, and improve the reusability of the code. the concept of combination is to separate the variable part from the stable part in a complex parent class, the stable part is divided into several simple classes, and there is no inheritance between classes, which can also reduce the dependence on html structure. The role of improving code reusability.

Chengdu Twilight Technology Co., Ltd. tell me how to be compatible with IE browser?

IE browsers of IE8 and below have always been a pain in the hearts of front-end developers. In order to be compatible with the extra code they add to become hack code, people often don't want to write that code. Here are some practices that are compatible with IE browsers.

(1) be familiar with the common style compatibility problems in IE browsers

One is the bug of the browser itself, and the other is not compatible with or does not support standards.

(2) separate style compatibility codes

Organize code files according to different versions of the browser, then use judgment statements to load on demand

Em, px or%?

The reason for talking about this topic is that nowadays there are more and more page functions and more and more devices are used to access the page, and the layout of the page is quite a challenge. the size of the elements in the page and the font, the size of the picture are also closely related to the layout. In view of this, front-end developers began to pay attention to how to improve the page layout, the core idea is to set the size and font size of the page elements to relative values. Font relative units include: em, ex, ch, rem. There is no need to repeat more, there is more information to explain. Here are a few best practices:

(1) set the relative size as far as possible

The so-called setting relative size does not mean that the overall layout of the page is adaptive, the overall size can be fixed size or adaptive size, depending on the design of the page.

(2) absolute size is used only when the size of the element is predictable.

For example, the design requires the use of absolute width, such as the overall width, sidebar width, the height of the head and footer of the page is fixed, in the display of pictures, videos, the appropriate fixed size will allow these multimedia elements to get the best results.

(3) use em to set the font size

Using px to set font size is not scalable, and using percentage to set font size is not in line with the habit. The best way is to use em to set font size, but with the increase of font setting levels, this method increases the cost of maintenance. For this, css3 introduces rem units, which are calculated relative to the font size of the root element, which avoids this problem. At present, except IE8 and below. It is supported by most browsers.

This is the end of this article on "what is the weight distribution of the commonly used sorting methods in Css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

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.