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

This article will explain in detail what are the suggestions for writing CSS code efficiently, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

1. basic principle

1.1 put CSS at the head of the HTML page

Because the browser needs to render the page after all the stylesheets have been loaded, the page will remain blank until the stylesheet is loaded, so you need to place the stylesheet in the header.

@ import is equivalent to putting tags at the bottom of the page, so you should avoid using @ import for performance optimization.

1.2 avoid using CSS Expressions

Expression is only supported by IE, and its execution is much more frequent than most people think. It is performed not only when the page is rendered and resized (resize), but also when the page is scrolled (scroll), even when the mouse is scrolled over the page. Add a counter to the expression and you will know that the execution of expression is quite frequent. Scrolling the mouse can easily cause expression to be executed more than 10000 times.

1.3 CSS shorthand

1.3.1 abbreviation of hexadecimal color values

CSS

/ * Not recommended * /

Color: # eebbcc

/ * Recommended * /

Color: # ebc

1.3.2 shorthand of attribute values

CSS

Margin-top: 2px

Margin-right: 5px

Margin-bottom: 2em

Margin-left: 15px;-> > margin: 2px 5px 2em 15px

Border-width: 1px

Border-style: solid

Border-color: # 000-> > border: 1px solid # 000

Font-style: italic

Font-variant: small-caps

Font-weight: bold

Font-size: 1em

Line-height: 140%

Font-family: sans-serif;-> > font: italic small-caps bold 1em 140% sans-serief

Background-color: # f00

Background-image: url (background.gif)

Background-repeat: no-repeat

Background-attachment: fixed

Background-position: 00;-> > background: # f00 url (background.gif) no-repeat fixed 00

List-style-type: square

List-style-position: inside

List-style-image: url (image.gif)-> > list-style: square inside url (image.gif)

1.4 try to extract similar parts

CSS

.class1 {position: absolute; left: 20px; top: 30px;}

.class2 {position: absolute; left: 20px; top: 30px;}

.class3 {position: absolute; left: 20px; top: 30px;}

.class4 {position: absolute; left: 20px; top: 30px;}

.class5 {position: absolute; left: 20px; top: 30px;}

.class6 {position: absolute; left: 20px; top: 30px;}

->

.class1 .class2 .class3 .class4 .class5 .class6 {

Position: absolute; left: 20px; top: 20px

}

two。 Key points

2.1 use lowercase only

CSS

Home

2.2 No extra spaces (underlined)

CSS

What?_

Yes please.

2.3 use utf8 coding

In html:

XML/HTML

In css:

CSS

@ charset "utf-8"

2.4 use html5 document types

XML/HTML

2.5 validate HTML and CSS documents

Verify HTML

Verify CSS

2.6 make the document semantic

2.7 Multimedia (multi-terminal) compatibility

CSS Code

2.8 do not use entity references

CSS Code

The currency symbol for the Euro is "& eur;".

The currency symbol for the Euro is is "stupid".

2.9 use id and class with semantics

CSS Code

/ * Not recommended: meaningless * /

# yee-1901 {}

/ * Not recommended: presentational * /

. button-green {}

.clear {}

/ * Recommended: specific * /

# gallery {}

# login {}

.video {}

/ * Recommended: generic * /

.aux {}

.alt {}

2.10 Units with zero values omitted

CSS Code

Margin: 0

Padding: 0

2.11 omit the starting zero

CSS Code

Font-size: .8em

2.12 try to avoid CSS hacks

Try a different solution

2.13 add a semicolon to the declaration at the end

Although omitting the end semicolon can omit one byte, it is very bad for team maintenance, and the loss outweighs the gain.

CSS Code

/ * Not recommended * /

.test {

Display: block

Height: 100px

}

/ * Recommended * /

.test {

Display: block

Height: 100px

}

2.14 efficiency of selector

The browser parses class "from right to left", for the following rules

CSS Code

# god > li {font-weight: bold}

The browser looks for all the "li" nodes on the page before making a further decision: if the id of its parent node is "god", the match is successful. It can be seen that the matching of CSS selectors is much slower than we thought, and the performance problems of CSS can not be ignored.

2.15 descendant selector

CSS Code

# toc li {font-weight: bold}

This efficiency is slower and much slower than the previous "child selector". The browser first facilitates all the "li" nodes, and then traces its parent node step by step to the root node of the DOM structure (document). If there is a node whose id is "toc", the match is successful, otherwise continue to find the next "li" node.

2.16 avoid global selectors as much as possible

CSS Code

[hidden= "true"] {.} / * A universal rule * /

The matching rule here is obvious: find all the nodes on the page, and if any node has a "hidden" attribute and its attribute value is "true", the match is successful. This is the most time-consuming and laborious match, and all nodes on the page need to be matched, and this rule should be avoided as much as possible.

It's the same with asterisks.

CSS Code

# god li *

First find all the elements on the page, then match the elements in your ancestors that contain li, and then look among these elements for elements whose parent element's id is god.

Therefore, for global selectors, only one usage is recommended:

CSS Code

* {margin: 0; padding: 0; / * etc. * /}

2.17 avoid tag+id or class+id

CSS Code

Button#goButton {...};-> > # goButton

.fundation # testIcon {...};-> > # testIcon

2.18 about tag+class

CSS Code

Button.indented {...}-> .button-indented {...}

Programmers often prefix a Class with a tag name (Tag Name) to locate the node more accurately and quickly, but this is often less efficient. Because the class on the page should be unique globally, locating a node with a unique Class name is often faster than combined positioning. In fact, this approach can also avoid style failure caused by the development and modification of the type of page elements (Tag), so that the style and elements are separated, and the two are maintained independently.

2.19 minimize the number of rules

You can consider writing the hierarchy into a class, but it's troublesome when the hierarchy changes.

CSS Code

Span [mailfolder= "true"] > table > tr > td.columnClass {...}

->

.span-mailfolder-tbl-tdCol {...}

2.20 avoid overly long class naming

Consider abbreviations.

CSS

OcHeroImage

OcEmailAddress

If you find it difficult to understand, you can add a hyphen or comment

CSS

Oc-HeroImage

Oc-EmailAddress

Despite semantic considerations, naming should be as short as possible, as long as it is easy to identify

CSS

HeroImg

EmailAddr

2.21 there should be no spaces in the file name

A) A file name with spaces will be treated as two keywords by Google, which may lead to more search results and more traffic, which is a good thing

B) having spaces means that quotation marks cannot be omitted, with an extra two bytes

C) spaces are automatically converted to% 20 by browsers, which may not be supported by older browsers. If% 20 is hard-coded into URL, there are two more characters in each instance.

CSS Code copies content to the clipboard

Input {background: url ("/ images/shadow background.gif");}

2.22 omit the quotation marks of URI

CSS

@ import url (/ / www.google.com/css/go.css)

2.23 avoid descendant selectors as much as possible

CSS

Treehead treerow treecell {...}-> treehead > treerow > treecell {...}

Descendant selector is a relatively time-consuming selector. Generally speaking, its use in CSS should be avoided, and if it can be replaced by child selector, it should be done as much as possible.

2.24 make full use of inheritance mechanism

Color

Font

Letter-spacing

Line-height

List-style

Text-align

Text-indent

Text-transform

White-space

Word-spacing

CSS

# bookmark > .menu-left {list-style-image: url (blah)}

->

# bookmark {list-style-image: url (blah)}

2.25 be sure to compress before release

You can use YUI Compressor or similar software to compress and release.

3. Advanced skills

3.1 protocols for omitting embedded resources

You can avoid mixed content problems (mixed content issues) and reduce file size.

CSS

/ * Not recommended * /

.example {

Background: url (http://www.google.com/images/example);

}

/ * Recommended * /

.example {

Background: url (/ / www.google.com/images/example)

}

3.2 omit the optional label

The HTML5 specification specifies some tags that can be omitted to reduce file size.

XML/HTML

Spending money, spending bytes

Sic.

Saving money, saving bytes

Qed.

3.3 File structure

Since resources such as images are generally only used by CSS files, the image folder can be placed in the same level directory of CSS files, so that relative paths can be used to save bytes.

CSS

Input {background: url ("images/shadow background.gif");}

3.4 folder naming

Usually a folder is named as the plural of the resources it represents

Images

Assets

Fonts

In fact, it is not necessary to use the singular form to save a lot of bytes, especially when the structure of each project is similar.

Img

Asset

Font

For the following code that contains 58 bytes:

CSS

Input {background: url ("/ images/shadow background.gif");}

After optimization, it becomes 52 bytes, that is, 10% compression:

CSS

Input {background: url (img/shadow-background.gif);}

If you are using abbreviations, you can further reduce:

Input {background: url (img/shadow-bg.gif);}

If a project has hundreds of such lines of code, it will save hundreds of bytes. If the site visits too much, you can save an objective number of bandwidth resources.

3.5 semicolon at the end of the declaration

As mentioned earlier, removing the semicolon declared at the end saves bytes, but is not good for maintenance. You can consider removing it during the compression release phase.

CSS board

.clear {clear:both;}

.clear {clear:both}

3.6 shorthand for background color

Background color shorthand can also save bytes, but use it with caution, because omitted default properties overwrite previous attributes.

3.7 filter shorthand

CSS

Selector {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=65)"

Filter: progid:DXImageTransform.Microsoft.Alpha (Opacity=65)

}

The version of filter is below IE8, the version of-ms-filter is above IE9, and YUI will compress it to:

CSS

Selector {

-ms-filter: "alpha (opacity=65)"

Filter:alpha (opacity=65)

}

Due to the widespread use of YUI and the powerful power developed by the community, it shows that this writing method has been deeply tested and can be safely used.

3.8 Gzip Compression and CSS Writing

Goolge recommends writing CSS rules in alphabetical order for easy maintenance. Other companies have their own norms. From the point of view of Gzip compression, the Gzip compression ratio can be increased as long as the writing order is consistent throughout the document.

Background: fuchsia

Border: 1px solid

-moz-border-radius: 4px

-webkit-border-radius: 4px

Border-radius: 4px

Color: black

Text-align: center

Text-indent: 2em

3.9 fewer requests are more important than smaller sizes

Files can be merged appropriately, leaving only the basic hierarchy.

XML/HTML

What are the suggestions for efficient writing of CSS code to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it 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.