Deep analysis and selection of the "tips and Tips" tab in CSS

High-quality CSS

Weird mode and DTD

I don't know if you can use the developer tools when using IE8/9/10, but you don't see the following options:

Among them, quirks is a weird mode. The so-called weird mode is a mode generated to be compatible with older ones that can be browsed normally. Many of its parsing methods do not conform to the standard, as a result, there is no way for several major portal websites to treat this strange pattern. However, you don't have to worry about this mode, because the old browser users should be absent? (For example, ie4 and 5), but you are writing the front-endCodeYou must also pay attention to prevent the browser from parsing your code in weird mode! Here we need to mention the DTD. The entire process of DTD is document type definition. The Chinese name is the document type definition. By defining the correct DTD, we can ensure the browser resolution method. Here are some common DTD documents in HTML (For details, refer to the document of another student in the garden.Article<! Doctype> deep tag analysis and selection)

 For strict HTML 4.01 <!  Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd"  >  Transition type for HTML 4.01  <!  Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"  >  Strict type for XHTML 1.0  <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  >  For transition of XHTML 1.0 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 

But with the development of HTML, I personally recommend the latest and most concise usage:

<! Doctype HTML>

I found that many large websites started to use this DTD, and at least the code automatically generated in mvc3 was also the DTD. Some time ago, I accidentally found that NetEase mailbox was using HTML5 semantic tags.

CSS layering

The author recommended his preferred CSS organization method: base.css?common.css=page.css, which divides the style in the website into the above three categories by function. These three are not parallel, but stacked structure:

Page

Common

Base

1.The base layer provides the CSS reset function and atomic classes with the smallest granularity. This layer has nothing to do with the specific UI. The base layer does not actually use our own wheel. You can check out the CSS reset and CSS base of Yahoo cloud UI at: http://yuilibrary.com/yui/css /. I personally think we can just move it over.

2.The common layer is located in the middle and provides component-level CSS classes. Currently, most programming systems are developed based on the object-oriented thinking. In fact, a large part of them is to improve code reusability. CSS also includes exceptions such as the common layer, we should think about how to reuse code as much as possible. The common layer is the website sector. different websites have different common layers. The same website has only one common layer. Here is a Netease homepage. I believe you will soon understand the general meaning of the common layer.

3.The page layer is located on the top layer and provides page-level styles. Each page can have its own page-level CSS. In the hosts file, you can use comments on the page to write data in parts to facilitate maintenance, as shown below:

 
/* Homepage */. test {}. test1 {}/* about us */. test2 {}. test3 {}/* Contact Us */. test4 {}. test5 {}
 

CSS namespace

Hey, there is usually a namespace in the background language. Why does it also exist in CSS? Imagine if many people are working on the development front-end, if engineer a is on a certain page. in the name of test, engineer B uses the same name. If the same page uses both CSS, the conflict arises.

Therefore, in order to standardize front-end development, the author first recommends a combination of camper naming and underlined naming:

 
. Timelist-lastitem is obvious, ". timelist-lastitem" is ". timelist". lastitem"
 

Therefore, since dashes can determine the subordination, we can promote this method to this website. In the base layer and the common layer, because they are used globally, no prefix is added, just like the page layer, you can add a prefix to it as follows:

 <  Div  Class = "Box"  >  <  Div  Class  = "Box-HD"  > </  Div  >  <  Div  Class  = "Box-BD"  > </  Div  >  < Div  Class  = "Box-FT"  > </  Div  >  </  Div  > 

The above are the notes for this issue. Please wait for the next timeCourse Notes on Web Front-end development and cultivation-CSS: "noble"