1. Use Reset but not Global Reset
The default attributes of different browser elements are different. Reset can reset some default attributes of browser elements to achieve browser compatibility. However, it is important to note that global Reset is not used:
*{ margin:0; padding:0; }This is not only because it is a slow and inefficient method, but also because some unnecessary elements reset the outer margin and the inner margin. Reset is not invariable, but also needs to be modified according to the different needs of the page in order to achieve browser compatibility and operational convenience.
Reset is usually used as follows:
/** Clear the inside and outside margins**/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements Structural elements */
dl, dt, dd, ul, ol, li, /* list elements List elements */
pre, /* text formatting elements Text format elements */
form, fieldset, legend, button, input, textarea, /* form elements Form Elements */
th, td, /* table elements Table element */
img/* img elements Picture element */{
border:medium none;
margin: 0;
padding: 0;
}
/** Setting default fonts**/
body,button, input, select, textarea {
font: 12px/1.5 'Song style',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** Reset list elements**/
ul, ol { list-style: none; }
/** Reset hyperlink elements**/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** Reset Picture Elements**/
img{ border:0px;}
/** Reset table elements**/
table { border-collapse: collapse; border-spacing: 0; }2. Good naming habits
Undoubtedly messy or semantically naming code will drive anyone crazy. Code like this:
.aaabb{margin:2px;color:red;}I don't think even beginners will name a class like this in the actual page, but have you ever thought that such code is equally problematic:
<h1>My name is <span>Wiky</span></h1>The problem is that if you need to turn all the original red fonts into blue, the modified style will write like this:
.red{color:bule;}Such a name would be confusing, and it would be troublesome to change the sidebar, which is also called. leftBar, to the right. So, try not to name a class or id by using the characteristics of the element (color, location, size, etc.). You can choose meaningful names such as: navigation {__________ } sidebar { } Poswrap { }
In this way, no matter how you modify the style that defines these class es or id s, it does not affect the relationship between them and HTML elements.
There is another case, some fixed style, after definition will not be modified, then you do not have to worry about the naming of the situation just said, such as:
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}So for such a paragraph:
<p class="alignleft">I am a paragraph! </p>
If you need to change this paragraph from left alignment to right alignment, you just need to change its className to alignright.
3. Code abbreviations
CSS code abbreviations can improve the speed of your code writing and streamline the amount of your code. There are many abbreviated attributes in CSS, including margin, padding, border, font, background and color values. If you learn code abbreviations, the original code is as follows:
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}It can be abbreviated as:
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}4. Inheritance by CSS
If multiple child elements of the parent element in the page use the same style, it is better to define the same style on their parent element and let them inherit these CSS styles. In this way, you can maintain your code well and reduce the amount of code. So the original code is as follows:
#container li{ font-family:Georgia, serif;....... }
#container p{ font-family:Georgia, serif;....... }
#container h1{font-family:Georgia, serif; .......}It can be abbreviated as:
#container{ font-family:Georgia, serif; }You can merge multiple CSS selectors into one if they share the same style. Not only is the code concise, but it also saves you time and space. Such as:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }It can be merged into:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }6. Appropriate code comments
Code annotations make it easier for others to read your code, and a reasonable organization of code annotations can make the structure clearer. You can choose to add a directory at the beginning of your stylesheet:
/*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */
So the structure of your code is clear at a glance, and you can easily find and modify the code.
For the main content of the code, it should be properly divided, and even annotate the code where necessary, which is also conducive to team development:
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* Setting font color */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; } 7. Sort your CSS code
If the attributes in the code can be sorted alphabetically, it will be faster to find modifications:
/*** Style attributes sorted alphabetically***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}8. Keep CSS Readable
Writing readable CSS will make it easier to find and modify styles. For the following two cases, which is more readable, I want to make it clear.
/*** Write one line per style attribute***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** All style attributes are written on the same line***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }For some selectors with fewer style attributes, I write a line:
/*** Less selector attributes written on the same line***/
div{ background-color:#3399cc; color:#666;}This rule is not mandatory, but no matter which way you write it, my advice is to always keep the code consistent. More attributes can be written in separate lines, less than three attributes can be written in one line.
9. Choose better style attribute values
Some attributes in CSS use different attribute values. Although the effect is similar, there are differences in performance. For example, border:0 sets border to 0px. Although it is not visible on the page, browsers still render border-width/border-color according to the default value of border, that is, they have occupied memory value.
border:none sets border to "none" and browsers will not render when parsing "none", that is, they will not consume memory value. So it is recommended to use border:none in general.
Similarly, the display:none hidden object browser does not render, and does not occupy memory. visibility:hidden.
10. Use external style sheets
This principle has always been a good design practice. Not only can it be easier to maintain and modify, but more importantly, using external files can improve page speed, because CSS files can generate caches in browsers. CSS built into HTML documents is downloaded with HTML documents in each request. Therefore, in practical applications, it is not necessary to build CSS code into HTML documents:
<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>Or:
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >Instead, import an external stylesheet:
<link rel="stylesheet" type="text/css" href="css/styles.css" />11. Avoid using CSS expressions
CSS expressions are powerful (but dangerous) ways to dynamically set CSS properties. Internet Explorer has supported CSS expressions since version 5. In the following example, using CSS expressions, you can switch background colors every hour:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );As shown above, JavaScript expressions are used in expression. CSS attributes are set based on the results of the JavaScript expression.
The problem with expressions is that they have more computational frequencies than we think. Not only when the page is displayed and scaled, but also when the page scrolls or even moves the mouse, it will be recalculated. Adding a counter to a CSS expression can track the expression's computational frequency. Moving the mouse freely on the page can easily achieve more than 10,000 computations.
If you have to use CSS expressions, be sure to remember that they have to be computed thousands of times and may have an impact on the performance of your pages. So avoid using CSS expressions when you have to.
12. Code Compression
When you decide to deploy a website project on the network, you need to consider compressing CSS, removing comments and spaces, to make the page load faster. Compress your code with tools
It can simplify CSS code and reduce file size to achieve higher loading speed.