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

CSS rules are not fully written example analysis, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

From the rules of CSSLint, we can peep into many interesting CSS details, which can help us better understand CSS and write more compatible CSS code.

This is just a guide, not a standard.

Possible / potential errors in writing

Here are some rules for CSS writing that can potentially lead to unexpected errors.

Note the size of the box (Beware of box model size)

The rule is mainly about the height and width of the box, considering the following situation:

.mybox {border: 1px solid black; padding: 5px; width: 100px;}

The element width of mybox may be mistaken for 100px. But in fact, the width is 112px. This is because the width of the box is ultimately the sum of the widths of content, padding, and border.

Suggested way of writing:

.mybox {box-sizing: border-box; border: 1px solid black; padding: 5px; width: 100px;}

Recommended rules:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Specify box-sizing when width is used with border, border-left, border-right, padding, padding-left, padding-right attributes

Specify box-sizing when height is used with the border,border-top,border-bottom,padding,padding-top,padding-bottom property.

Display match attribute (display-property-grouping)

Some rules may not be valid when the element sets a different display.

When display:inline, the width, height, margin-top, margin-bottom, and float attributes will not take effect, because the inline element box model is not a standard box model, and these attributes will not take effect.

Of course, not only the above display:inline, but also some, specifically

Recommended rules:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Display:inline is not used with width, height, margin, margin-top, margin-bottom, float

Display:inline-block is not used in conjunction with float

Display:block is not used in conjunction with vertical-align

Display:table-* is not used with margin or float.

Duplicate attributes are not allowed (duplicate-properties)

This is easy to understand and does not allow duplicated attributes to appear in the same style rule. For example:

.mybox {width: 100px; width: 120px;}

Of course, there are exceptions, and defining the same property can be used to implement some progressive enhancements, for example:

.mybox {background: # fff; background: rgba (255,255,255,0.5);}

For browsers that do not support RGBA color display, the first defined rule background: # fff will be used back.

Not recommended writing:

/ * properties with the same value * / .mybox {border: 1px solid black; border: 1px solid black;} / * properties separated by another property * / .mybox {border: 1px solid black; color: green; border: 1px solid red;}

Allowed to write:

/ * one after another with different values * / .mybox {border: 1px solid black; border: 1px solid red;}

Recommended rules:

Attributes with the same value are not allowed to appear twice

The same attribute is not allowed to appear twice and is separated by at least one other attribute.

Null rules are not allowed (empty-rules)

An empty rule does not contain any attributes (no style attributes are defined), as follows:

.foo {}

The emergence of empty rules may be caused by refactoring styles and forgetting to delete redundant code. Eliminating empty rules reduces the size of the style file and simplifies the style information to be processed by the browser.

Recommended rules:

1. Empty style rules are not included in the code

Use known attributes (known-properties)

There are more and more attributes available to CSS, and this rule detects whether the attribute name is correct. This rule checks the name of each attribute used to ensure that it is a known attribute.

Of course, browser-specific attributes that start with the-prefix are ignored because prefixes are added to individual browser version attributes, and these attributes do not have a reference standard.

This rule checks not only the attribute name, but also whether the value corresponding to the attribute matches it.

Recommended rules:

two。 Standard attributes and attribute values are used in the style

Compatibility does not allow negative text indentation (Disallow negative text indent)

This rule is intended to identify potential problems with the use of text-indent in CSS code.

Negative indentation of text is usually used as an auxiliary purpose to hide text on the screen. One of the scenarios used is as an image replacement technique, using negative text indentation to ensure that screen readers can read the data even if the text is not displayed on the screen.

This technique usually uses large negative unit values, such as-999px or-9999px, as follows:

.mybox {background: url (bg.png) no-repeat; text-indent:-9999px;}

This technical indentation allows background images to be displayed to ordinary users, while ensuring that screen readers can successfully parse inline text messages.

When negative indentation of text is used in landscape view pages, it can cause some trouble because a long horizontal scroll bar appears. This problem can be resolved by adding direction:ltr, as follows:

.mybox {background: url (bg.png) no-repeat; + direction: ltr; text-indent:-9999px;}

Recommended rules:

1. When using negative text indentation, use it with direction: ltr.

Use browser compatible prefixes (Require compatible vendor prefixes)

Browser compatibility prefixes are a problem caused by the evolution of attributes from proposal to standard.

Take gradient gradient as an example. In December 2011, the standard definition of CSS gradient was not yet finalized, that is, many different versions of browser prefixes were needed to implement color gradients across browsers. There are five different browser prefixes for CSS gradients.

-ms-linear-gradient and-ms-radial-gradient for Internet Explorer 10 +

-moz-linear-gradient and-moz-radial-gradient for Firefox 3.6 +

-o-linear-gradient and-o-radial-gradient for Opera 11.10 +

-webkit-linear-gradient and-webkit-radial-gradient for Safari 5 + and Chrome

-webkit-gradient for Safari 4 + and Chrome (aka "Old WebKit")

This rule requires us to define all browser prefixes when using gradients.

Of course, the standard is now unified, and today, we write CSS to add browser prefixes that are almost no longer manual. Autoprefixer should be used to liberate productivity, and there are some similar prefix compatibility issues, such as display: flex, etc., which can be viewed by clicking:

Expand and view it is recommended to append multi-kernel prefixes

With the development of CSS, this table certainly can't cover it all, so the best way is to autoprefixer, using tools to add browser prefixes.

Recommended rules:

1. Try to use autoprefixer to compile your CSS code and use tools instead of manually adding browser prefixes.

Use alternate color values (Require fallback colors)

This rule is intended to ensure that the appropriate colors are displayed on all browsers. It is recommended that when using the CSS3 color representation rgba (), hsl (), and hsla (), use a backup color to ensure that the color value is displayed properly in a lower version browser, like this:

.mybox {color: red; color: rgba (255,0,0,0.5);}

Recommended rules:

Specifies the color property, and when rgba (), hsl (), hsla () color values are used, the color color format for legacy browsers is used before the property is defined.

No longer use the hack method for older versions of IE

In the early years, the old version of IE browsers still had to be compatible, and there would be a lot of *, _, and so on in our CSS code, like this:

{background-color:yellow\ 0; / * ie8*/ + background-color:pink; / * ie7*/ * background-color:pink; / * ie7*/ _ background-color:orange; / * ie6*/}

Today, when IE8- is gradually retiring from the stage of history, if the business has completely abandoned IE8-, then these hack methods for IE should no longer be used.

Recommended rules:

1. No longer use +, _, *,\ 0 and other hack methods for IE

CSS performance does not use too many web fonts (Don't use too many web fonts)

It's easy to understand that the advent of @ font-face allows users to use any font without having to stick to one of the "web-safe" fonts.

However, the font file itself is very large, and some browsers will not render the font file in real time when downloading the font file, which brings hidden trouble to the display performance while using the network font.

Therefore, it is recommended that it is not easy to use @ font-face to use web-fonts too much.

Recommended rules:

Use less than 5 web font @ font-face references.

5 this number is recommended by CSSLint, and I think this value should be lower in actual use.

Do not use @ import

The @ import command is used to reference other CSS files in the CSS file, as follows:

@ import url (more.css); @ import url (andmore.css); a {color: black;}

When the browser parses this code, it starts downloading the specified file after each @ import, thus stopping the execution of the later code.

In other words, the browser will not download other style files at the same time until the file specified by @ import is downloaded, thus losing the advantage of downloading CSS in parallel and causing the page to flicker.

Recommended rules:

1. Do not use @ import in CSS code

Of course, @ import here means that compiled CSS files do not appear, and uncompiled CSS files are not subject to this restriction.

Use attribute Selector (Disallow selectors that look like regular expressions) with caution

After the update of the CSS3 property selector, CSS has a capability similar to regular matching. For more information on the property selector, please see: deep Mining of the CSS property Selector [3], like this:

[attr | = val]: select an element whose value of the attr attribute is val or whose value begins with val- (note that the "-" here is not an error, it is used to handle language coding).

[attr^ = val]: select the element whose value of the attr attribute begins with val (including val).

[attr$=val]: select an element whose value of the attr attribute ends with val (including val).

[attr*=val]: select the element that contains the substring val in the value of the attr attribute (a substring is only part of a string, for example, "cat" is a substring of the string "caterpillar"

Select an img tag that contains the title attribute and contains the element with the class name logo.

Img [title] [class~=logo] {...}

While the attribute selector brings convenience to matching, because these complex attribute selectors have to match the corresponding attribute values through calculation over and over again, so as to ensure that the final display effect is correct. To do this, CSS takes more time to calculate the display of the entire page.

Recommended rules:

1. Use property selectors as little as possible, and if you are sure you want to use them, you should be aware that this selector is more expensive than some regular selectors

Use the wildcard character * (Disallow universal selector) carefully

The universal selector (*) matches all elements. Although you can easily select a set of elements at a time, it can cause performance problems if you use it as the core part of the selector (the rightmost part of the selector location). For example, the following rule forms should be avoided:

.mybox * {background: # fff; color: # 000; background: rgba (255,255,255,0.5);}

The browser's rule for parsing CSS parses the selector from right to left, so this rule will first match all the elements in the document. Then check one by one to see if these elements match the next rule that starts on the right, that is, whether you have an ancestor style mybox. The more complex the selector that contains *, the longer it takes to parse.

Recommended rules:

1. The universal selector * should be used with caution and, if necessary, should be avoided to the far right of the selector.

Use undefined attribute selectors (Disallow unqualified attribute selectors) with caution

HTML5 allows you to create custom attributes in the HTML tag. However, similar to the previous rule, such as [type=text], all elements are matched first, and then the attributes are checked. This means that undefined property selectors have the same performance problems as generic selectors.

Similar to generic selectors, performance problems can occur when a property selector is not defined as the core part of the selector (the rightmost part of the selector). Like this:

.mybox [type=text] {background: # fff; color: # 000; background: rgba (255,255,255,0.5);}

Recommended rules:

1. Try to avoid placing the property selector on the far right of the selector.

Use abbreviated attributes (Require shorthand properties)

This rule recommends that when file size can be reduced by shorthand attributes, abbreviations should be used as much as possible, like this:

.mybox {margin-left: 10px; margin-right: 10px; margin-top: 20px; margin-bottom: 30px;}

Should be replaced by:

.mybox {margin: 20px 10px 30px;}

Recommended rules:

1. When the file size can be reduced by shorthand attributes, you should use the abbreviations of attributes as much as possible.

Duplicate background picture definition (Disallow duplicate background images) is not allowed

If you have multiple styles that need to use the same background image, it is best to declare a generic style class that contains the address of the image. Then add this class to the elements you need to use. Take a look at the following code:

.heart-icon {background: url (sprite.png)-16px 0 no-repeat;} .task-icon {background: url (sprite.png)-32px 0 no-repeat;}

The background image address is repeatedly defined in both classes. It results in redundant code and increases the cost of modification.

If you need to change the name of the picture, it is easy to forget to change the address of two pictures in the file at the same time. A better way is to extract a picture address class as a reuse class, and then add this class to the original HTML element. Like this:

.icons {

Background: url (sprite.png) no-repeat

}

. heart-icon {

Background-position:-16px 0

}

. task-icon {

Background-position:-32px 0

}

A B

Recommended rules:

1. When you need to use duplicate background pictures, you should define a common class for reuse

Maintainability and repeatability (Maintainability & Duplication) use floating float (Disallow too many floats) as little as possible

The float attribute is a popular way to implement multi-column layouts in CSS. In a project, float elements are used to create different page layouts. If you change the layout at this time, it will make the CSS code very fragile and difficult to maintain.

Today, we have a better way to achieve grid layout: flex and grid.

Recommended rules:

1. Use float for page layout as little as possible, and if compatibility allows, use display: flex or display: grid instead

Do not use too many font size declarations (Don't use too many font size declarations)

A maintainable site usually has a common font set. The size of a certain type of font often defines an abstract class that represents its meaning so that it can be applied to various usage scenarios of the site.

If the common class is not extracted. It will result in frequent use of font-size when writing CSS to make the element size display as expected. This brings a problem. When the font size of the design changes, we need to change the font size of all designs in the style. When extracting a common class, the global adjustment can be achieved only by changing the size defined in the class. Like this:

.small {font-size: 8px;} .medium {font-size: 11px;} .large {font-size: 14px;}

When using the above classes in your project, you can ensure that the font size is consistent throughout, but also limit the number of times font-size appears in the CSS file. If you need a certain type of font size, you only need to change the setting of the font size in one place to achieve the effect that you need to modify in many places before.

Recommended rules:

1. Do not use too many font size declarations, but reuse font sizes by defining different types of font classes

Minimize the use of ID selectors for style definition (Disallow IDs in selectors)

One of the benefits of CSS is that style rules can be reused in multiple places. When you start using the ID selector, you inadvertently limit the style to a single element. Suppose your code is as follows:

# header a {color: black;}

This style will only work with the a tag when ID is header. But suppose now that you want to use the same style in another module on the page, you can only redefine another class to achieve the same effect, as follows:

.callout a {color: black;}

If you think about it, in fact, here, the original intention is that only one style is enough:

.callout a {color: black;}

Finally, you may no longer need to use an ID selector and replace its effect with a class selector. After you discard the ID selector, you will maximize the reuse capacity of CSS.

Recommended rules:

Use ID selectors for style definition as little as possible

There are no best rules, only appropriate rules.

There have been many different views on the standard of writing and naming of CSS. The best way to deal with the so-called specification is not to follow others and use it, but to combine the actual situation and needs, learn from each other's strong points to offset their weaknesses, and take its essence to discard its dross.

After reading the above, have you mastered the method of example analysis with incomplete writing of CSS rules? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.