1、 Use css abbreviations
Using abbreviations can help reduce the size of your CSS files and make them easier to read. Please refer to Summary of Common CSS Abbreviation Syntax for the main rules of css abbreviation, which will not be described here.
2、 The unit is explicitly defined unless the value is 0
Forgetting to define the units of size is a common mistake for new CSS users. In HTML, you can only write width=100, but in CSS, you must give an accurate unit, such as width: 100px/width: 100em. There are only two exceptions to not defining units: row height and 0 value. In addition, all other values must be followed by the unit. Note that no space should be added between the value and the unit.
3、 Case sensitive
When using CSS in XHTML, the element names defined in CSS are case sensitive. To avoid this error, I recommend that all definition names be in lowercase.
The values of class and id are also case sensitive in HTML and XHTML. If you must mix case and case, please make sure your CSS definition is consistent with the tags in XHTML.
4、 Unqualify elements before class and id
When you define a class or id for an element, you can omit the previous element definition, because the ID is unique in a page, and the class can be used multiple times in the page. It doesn't make sense for you to limit an element. For example:
div#content { }
fieldset.details { }
Can be written as
#content { }
.details { }
This can save some bytes.
5、 Default
Generally, the default value of padding is 0, and the default value of background color is transparent. But in different browser The default value may be different. If there is any conflict, you can define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as follows:
* { margin:0; padding:0; }
6、 There is no need to repeatedly define inheritable values
In CSS, the child element automatically inherits the attribute values of the parent element, such as color typeface And others, which have been defined in the parent element, can be directly inherited in the child element, and there is no need to repeat the definition. Note, however, that the browser may override your definition with some default values.
7、 Recent priority principle
If there are multiple definitions of the same element, the definition closest to (the smallest level) is the most preferred. For example, there is such a piece of code
Update: Lorem ipsum dolor set
In the CSS file, you have defined the element p and a classupdate
p { margin:1em 0; font-size:1em; color:#333; }
.update { font-weight:bold; color:#600; }
In these two definitions, class=update will be used because class is closer than p. You can refer to the W3C's Calculating a Selector's Specificity for more information.
8、 Multiple class definitions
A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is # 666; The second style has a 10 px border.
.one{ width:200px; background:#666; }
.two{ border:10px solid #F00; }
In the page code, we can call
The final display effect is that the div has both a # 666 background and a 10px border. Yes, it's OK. You can try it.
9、 Use descendant selectors
CSS beginners do not know that using sub selectors is one of the reasons that affects their efficiency. Subselectors can help you save a lot of class definitions. Let's look at the following code:
<div id=subnav>
<ul>
<li class=subnavitem><a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected><a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem><a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>
The CSS definition of this code is:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
You can replace the above code with the following method.
<ul id=subnav>
<li><a href=#> Item 1</a></li>
<li class=sel><a href=#> Item 1</a></li>
<li><a href=#> Item 1</a></li>
</ul>
The style definition is:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
Using sub selectors can make your code and CSS more concise and easier to read.
10、 No need to quote the background image path
In order to save bytes, I suggest not to add quotation marks to the background image path, because quotation marks are not necessary. For example:
background:url(images margin:0 auto; }
However, IE5/Win cannot display this definition correctly. We use a very useful technique to solve this problem: use the text align attribute. Like this:
body { text-align:center; }
#wrap { width:760px; margin:0 auto; text-align:left; }
Text align: center of the first body; The rule defines that all elements of the body in IE5/Win are centered (other browsers just center the text), and the second text align: left; Is to place the text in # warp to the left.
15、 Import and hide CSS
Because older browsers do not support CSS, a common practice is to use the @ import technique to hide CSS. For example:
@import url(main.css);
However, this method does not work for IE4, which gives me a headache for a while. Later, I wrote in this way:
@import main.css;
In this way, CSS can also be hidden in IE4. Hehe, it also saves 5 bytes. For a detailed description of @ import syntax, see the Center's css filter chart
16、 Optimization for IE
Sometimes, you need to define some special rules for IE browser bugs. There are too many CSS tricks here. I only use two of them, regardless of Microsoft Whether to better support CSS in the upcoming beta version of IE7, these two methods are the most secure.
1. Annotation method
(a) Hide a CSS definition in IE. You can use child selector:
html>body p { }
(b) The following writing method can only be understood by IE browser (hidden from other browsers)
* html p { }
(c) Sometimes, if you want IE/Win to be effective and IE/Mac to be hidden, you can use the backslash technique:
* html p { declarations }
2. Method of conditional comments
The other method that I think can stand the test more than CSS Hacks is to use Microsoft's private attribute conditional comments. With this method, you can define some styles for IE independently without affecting the definition of the main style sheet.
17、 Debugging skill: how big is the layer?
When debugging CSS errors occur, you should act like a typesetter, analyzing CSS code line by line. I usually define a background color on the problematic layer, so that you can clearly see how much space the layer occupies. Some people suggest using border, which is generally OK. But the problem is that sometimes border will increase the size of elements, and border top and border bottom will destroy the value of the vertical margin, so it is safer to use background.
Another frequently problematic attribute is outline. The outline looks like a boeder, but it does not affect the size or position of the element. Only a few browsers support the outline attribute. All I know are Safari, OmniWeb, and Opera.
XVIII CSS code writing style
When writing CSS code, everyone has their own writing habits for indentation, line breaking, and space. After continuous practice, I decided to adopt the following writing style:
selector1,
selector2 { property:value; }
When using union definitions, I usually write a separate line for each selector, so that I can easily find them in the CSS file. Add a space between the last selector and the curly braces {, and write a separate line for each definition. The semicolon is directly behind the attribute value. Do not add a space.
I'm used to adding a semicolon after each attribute value. Although the rule allows that the semicolon can not be written after the last attribute value, if you want to add a new style, it is easy to forget to add a semicolon, resulting in an error, so it is better to add them all.
Finally, the closed curly braces} write a separate line.
