This article summarizes some common CSS techniques to lay the foundation for website reconstruction. I hope you can learn something useful.
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 "CSS Basic Syntax".
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 ;100, but in CSS you have to give an exact unit, like: " width:100em. There are only two exceptions where you can leave the unit undefined: line height and 0 value. Otherwise, All other values must be followed by the unit. Be careful not to add spaces between the value and the unit.
3. Case sensitive
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 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;
}