1. Use css abbreviations
Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviation, please refer to "Common CSS Abbreviation Syntax Summary", which will not be described here.
2. Define the unit clearly unless the value is 0
Forgetting to define the units of a dimension is a common mistake among newbies to CSS. In HTML you can just write width=100, but in CSS you have to give an exact unit, for example: width: 100px width:100em. There are only two exceptions for not defining units: row height and 0 value. In addition, other values must follow the unit. Be careful not to add spaces between the value and the unit.
3. Case sensitivity
When using CSS in XHTML, element names defined in CSS are case-sensitive. To avoid this error, I recommend using lowercase for all definition names. The values of class and id are also case-sensitive in HTML and XHTML. If you must write mixed case, please carefully confirm that your definition in CSS is consistent with the tags in XHTML.
4. Cancel the element restrictions before class and id
When you write to define a class or id for an element, you can omit the previous element qualification, because the ID is unique in a page and the class can be used multiple times in the page. It makes no sense for you to qualify an element. For example:
div#content { /* declarations */ }
fieldset.details { /* declarations */ } |
can be written as
#content { /* declarations */ }
.details { /* declarations */ } |
This saves some bytes.
5. Default value
Usually the default value of padding is 0, and the default value of background-color is transparent. But the default value may be different in different browsers. If you are afraid of conflicts, you can define the margin and padding values of all elements to be 0 at the beginning of the style sheet, like this:
* {
margin:0;
padding:0;
} |
6. No need to repeatedly define inheritable values
In CSS, child elements automatically inherit the attribute values of the parent element, such as color, font, etc., which have been defined in the parent element, can be directly inherited in the child element without repeated definition. But be aware that the browser may override your definition with some default values.
7. Recent first principle
If there are multiple definitions of the same element, the closest (minimum level) definition will be given priority. For example, there is this 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;
} |
Of these two definitions, class=update will be used because class is closer than p. You can check out W3C's "Calculating a selector's specificity" to learn more.
8. Multiple class definitions
A tag can define multiple classes at the same time. For example: We first define two styles, the first style has a background of #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 it like this. The final display effect is that this div has both a #666 background and a 10px border. Yes, it is possible to do this, you can try it.
9. Use descendant selectors
CSS beginners don't 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 take a look at the following code:
〈div id=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Item 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Item 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉 |
The CSS definition for this code is:
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } |
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 { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ } |
Use subselectors to make your code and CSS more concise and easier to read.
10. There is no need to add quotes to the background image path. In order to save bytes, I recommend not to add quotes to the background image path, because the quotes are not necessary. For example:
| background:url(images/***.gif) #333; |
can be written as
| background:url(images/***.gif) #333; |
If you add quotation marks, it will cause some browser errors.
11. Group selectors
When some element types, classes, or ids have some properties in common, you can use group selectors to avoid repeated definitions multiple times. This can save quite a few bytes.
For example: to define the font, color and margin of all titles, you can write:
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
} |
If there are individual elements that need to define independent styles during use, you can add new definitions or overwrite old definitions, for example:
h1 { font-size:2em; }
h2 { font-size:1.6em; } |
12. Specify link styles in the correct order
When you use CSS to define multiple state styles of a link, pay attention to the order in which they are written. The correct order is: :link :visited :hover :active. The first letter extracted is LVHA, which you can remember as LoVe HAte (like to hate). Why is it so defined? You can refer to Eric Meyer's "Link Specificity".
If your users need to use keyboard control and need to know the focus of the current link, you can also define the :focus attribute. The effect of the :focus attribute also depends on the position where you write. If you want the focused element to display the :hover effect, you write :focus before :hover; if you want the focus effect to replace the :hover effect, you put :focus After :hover.
13. Clear float
A very common CSS problem is that when floating is used for positioning, the underlying layer is covered by the floating layer, or the sub-layers nested in the layer exceed the scope of the outer layer.
The usual solution is to add an extra element behind the floating layer, such as a div or a br, and define its style as clear: both. This method is a bit far-fetched, but fortunately there is a good way to solve it. Please refer to this article "How To Clear Floats Without Structural Markup" (Note: This site will translate this article as soon as possible).
The above two methods can solve the problem of floating overflow very well, but what if you really need to clear the layer or the objects in the layer? A simple method is to use the overflow attribute. This method was originally published in "Simple Clearing of Floats" and has been widely discussed in "Clearance" and "Super simple clearing floats".
Which of the above clear methods is more suitable for you depends on the specific situation and will not be discussed here. In addition, some excellent articles have made it very clear about the application of float. It is recommended that you read: "Floatutorial", "Containing Floats" and "Float Layouts"
14. Horizontal centering
This is a simple trick, but it’s worth saying again because I see so many newbie questions asking this: How to horizontally center CSS? You need to define the width of the element, and define the horizontal margin, if your layout is contained in a layer (container), like this:
undefined
You can define it to be horizontally centered like this:
#wrap {
width:760px; /* Change to the width of your layer*/
margin:0 auto;
} |
But IE5/Win cannot display this definition correctly. We use a very useful trick to solve it: use the text-align attribute. Like this:
body {
text-align:center;
}
#wrap {
width:760px; /* Change to the width of your layer*/
margin:0 auto;
text-align:left;
} |
The first body's text-align:center; 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 center the text in #warp to the left.
15. Import and hide CSS
Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
However, this method didn't work for IE4, which gave me a headache for a while. Later I wrote it like this:
In this way, CSS can be hidden in IE4. Haha, it also saves 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle'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 hacks here. I only use two of them, regardless of whether Microsoft is better in the upcoming IE7 beta version. With support for CSS, both methods are the safest.
1. Annotation method
(a) To hide a CSS definition in IE, you can use a child selector:
html>body p {
/* Definition content */
} |
(b) The following writing method can only be understood by IE browser (hidden from other browsers)
* html p {
/* declarations */
} |
(c) Sometimes, you want IE/Win to be active but IE/Mac to be hidden, you can use the backslash trick:
/* */
* html p {
declarations
}
/* */ |
2. Method of conditional comments
Another method, which I think is more time-tested than CSS Hacks, is to use Microsoft's private attribute conditional comments (conditional comments). Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:
undefined
17. Debugging skills: How big is the layer?
When debugging CSS errors, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of elements, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.
Another property that often causes problems is outline. Outline looks like boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute, the only ones I know of are Safari, OmniWeb, and Opera.
18. CSS code writing style
When writing CSS code, everyone has their own writing habits regarding indentation, line breaks, and spaces. After constant practice, I decided to adopt the following writing style:
selector1,
selector2 {
property:value;
} |
When using union definitions, I usually write each selector on its own line so they are easier to find in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.
I am used to adding a semicolon after each attribute value. Although the rules allow that the semicolon does not need to be written after the last attribute value, if you want to add a new style, it is easy to forget to add the semicolon and cause an error, so you still add it. Better.
Finally, the closing brace } is written on a line by itself, with spaces and newlines to aid readability.
