Detailed explanation of CSS principles for front-end development

This article mainly introduces relevant information about the detailed explanation of CSS principles for front-end development. Friends in need can refer to

Detailed explanation of CSS principles for front-end development

People who are engaged in Web front-end development have dealt with CSS a lot. Some people may not know how CSS works. How does the written CSS be parsed by the browser? When this becomes a bottleneck for us to improve CSS level, should we know more about it?

　 1. Browser Development and CSS

Web browsers mainly connect to web servers through the HTTP protocol to obtain web pages. HTTP allows web browsing The server sends data to the web server and retrieves the web page. Currently the most commonly used HTTP is HTTP/1.1, which is fully defined in RFC2616. HTTP/1.1 has its own set of standards that Internet Explorer does not fully support, but many other modern web browsers fully support these standards. The location of the web page is indicated by the URL (Uniform Resource Locator), which is the address of the web page; anything starting with http: means logging in through the HTTP protocol. Many browsers also support other types of URLs and protocols, such as ftp: for FTP (File Transfer Protocol), gopher: for Gopher and https: for HTTPS (HTTP encrypted with SSL).

Early web browsers only supported a simplified version of HTML. The rapid development of proprietary software browsers has led to the creation of non-standard HTML code. But as HTML grew, it gained many display features in order to meet the requirements of designers. As these capabilities increase, foreign languages ​​for defining styles make less and less sense.

The original proposal of CSS was proposed by Hakun Lee in 1994. BertBos was designing a browser called Argo, and they decided to work together on CSS.

There had been some proposals for style sheet languages, but CSS was the first to include the idea of ​​"cascading". In CSS, a file's styles can be inherited from other style sheets. The reader can use his or her own preferred style in some places and inherit or "layer" the author's style in other places. This layering method allows both the author and the reader to flexibly add their own designs and mix their own preferences. .

In early 1997, W3C organized a working group specifically responsible for CSS, and its leader was Chris Lilley. This working group began discussing issues not covered in the first edition, which resulted in the publication of the second edition requirements in May 1998. As of 2007, the third edition is not yet complete.

2. How the browser renders and loads the page

Why do some websites load very slowly when they are opened, and the entire page is loaded? Pages are displayed simultaneously, while some websites are displayed gradually from top to bottom? To understand this, you can start with the following general process:

1. The order of browser downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are performed at the same time. of.
　2. When rendering to a certain part of the page, all parts above it have been downloaded (this does not mean that all associated elements have been downloaded).
　3. If you encounter a semantically interpretable tag embedded file (JS script, CSS style), then the IE download process will enable a separate connection for downloading.
　4. And perform parsing after downloading. During the parsing process, stop downloading of all downward elements of the page.
　5. After the style sheet is downloaded, it will be parsed together with all previously downloaded style sheets. After the parsing is completed, all previous elements (including previously rendered ones) will be re-rendered.
　6. If there is redefinition in JS or CSS, the later-defined function will overwrite the previously-defined function.

The key points here are the three points 2-5. Rendering efficiency is related to the following three points:

　1. Query positioning efficiency of CSS selector
　2. Browser renderingmodeand algorithm
　3. To The size of the rendered content

　 3. What is CSS and the advantages of CSS

　What is CSS?

1. CSS is the abbreviation of Cascading Style Sheets.

2. CSS language is a markup language that does not require compilation and can be directly interpreted and executed by the browser (it is a browser interpreted language).

3. In standard web design, CSS is responsible for the presentation of web content (XHTML).

4. The CSS file can also be said to be a text file, which contains some CSS tags. The CSS file must use css as the file name suffix.

5. We can change the overall presentation of the web page by simply changing the CSS file, which can reduce our workload, so it is a required course for every web designer.

6. CSS is produced and maintained by the W3C CSS Working Group.

Use CSS+p to reconstruct web pages. Compared with the traditional TABLE web page layout, it has the following three significant advantages:

　1. Separate performance and content. Separate the design part and put it in a separate style file, and only store text information in the HTML file. Such pages are more friendly to search engines.
　2. Improve page browsing speed. For the same page visual effect, the page capacity reconstructed using CSS+p is much smaller than the page file capacity encoded by TABLE. The former is generally only 1/2 the size of the latter. The browser doesn't have to compile a lot of lengthy tags.

　3. Easy to maintain and revise. You can redesign the entire website by simply modifying a few CSS files.

4. Browser CSS matching principle

Browser CSS matching does not search from left to right, but from right to left to search. For example, as mentioned before, p#pBox p span.red{color:red;}, the browser's search sequence is as follows: first search for all span elements with class='red' in the html, and after finding them, search whether there are any in their parent elements. p element, and then determine whether there is a p element with the id pBox in the parent element of p. If both exist, the CSS will match.

The advantage of the browser searching from right to left is to filter out some irrelevant style rules and elements as early as possible. Firefox calls this search method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rules. The key above is span.red.

　

5. Optimize your CSS

The so-called efficient CSS is to allow the browser to do as little as possible when looking for elements matching style. Search, here are some common inefficient mistakes we make when writing CSS:

1. Do not use the tag name

# before the ID selector ## Normal way of writing: p#pBox

Better way of writing: #pBox

Explanation: Because the ID selector is unique, adding p will add unnecessary unnecessary CSS matching.

2. Do not use the tag name

before the class selector. General writing method: span.red

A better way to write it: .red

Explanation: Same as the first one, but if you define multiple .red and the styles are different under different elements, they cannot be removed, such as your css The definition in the file is as follows:

　p.red{color:red;}
　　span.red{color:#ff00ff}

If it is defined in this way, do not remove it, otherwise it will be confusing, but it is recommended It is best not to write like this

3. Use hierarchical relationships as little as possible

General writing: #pBoxp.red{color:red;}

Better way to write: .red{..}

4. Use class instead of hierarchical relationship

General way to write: #pBox ul li a{display:block; }

Better way to write: .block{display:block;}

5. In CSS rendering efficiency, the efficiency of id and class is basically the same

　class will be
cached

in the first load, which will have a better effect in cascading. It will be better to use id in the root element (id has a subtle speed advantage ).

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

The above is the detailed content of Detailed explanation of CSS principles for front-end development. For more information, please follow other related articles on the PHP Chinese website!