pk10在线平台计划群

15171869989
Click to make a consultation call
Yichang Website Construction
Click to make a consultation call
Your current location: Home > News articles > Knowledge

Yichang Website Construction Shares 12 Tips for Optimizing Style Sheets in Website Making

Time: 2019-09-12 17:34:20

Writing good CSS code can help increase the speed of your page. Essentially, the fewer CSS rules the engine needs to parse, the better the performance. MDN categorizes CSS selectors into four main categories, as shown below.
1.ID rules
2.Class rules
3. Labeling rules
4. General rules
The general understanding of power starts with Steve Souders' "Advanced Performance Website Construction Advanced Guide" published in 2009. Although the book is more detailed, you can also view the complete reference list here, See "Best Practices for Efficient CSS Selectors" in Google for more details.
In this article, I want to share some simple examples and strategies I use in writing high-performance CSS. These are all inspired by an efficient CSS strategy written by MDN and follow a similar pattern.
First, avoid excessive restraint
A general rule, don't add unnecessary constraints.
code show as below:
// bad
ul # someid {..}
.menu # otherid {..}
// Ok
#someid {..}
#otherid {..}
Worst offspring selectors
Not only the performance is low, but the code is very fragile. The html code and the css code are severely coupled. When the html code structure changes, the CSS must be modified. This is so bad, especially in large companies, who often write html and css are not the same person.
code show as below:
// Sucks
html div tr td {..}
Avoid chained (intersection) selectors
This is similar to the case of over-constraints. It is wiser to simply create a new CSS class selector.
code show as below:
// bad
.menu.left.icon {..}
// Ok
.menu-left-icon {..}
Fourth, adhere to the KISS principle
Imagine we have the following DOM:
code show as below:
<ul id = "navigator">
<li> <a href="#"> Twitter </a> </ li>
<li> <a href="#"> Facebook </a> </ li>
<li> <a href="#"> Dribbble </a> </ li>
</ ul>
Here are the corresponding rules ...
code show as below:
// bad
#navigator li a {..}
// Ok
#navigator {..}
Five, use compound (compact) syntax
Use compound syntax whenever possible.
code show as below:
// bad
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: # 000;
background-image: url (../ imgs / carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
// Ok
.someclass {
padding: 20px 10px 20px 10px;
background: # 000 url (../ imgs / carrot.png) repeat-x bottom;
}
Avoid unnecessary namespaces
code show as below:
// bad
.someclass table tr.otherclass td.somerule {..}
//Ok
.someclass .otherclass td.somerule {..}
Avoid unnecessary duplication
Combine as many rules as possible.
code show as below:
// bad
.someclass {
color: red;
background: blue;
font-size: 15px;
}
.otherclass {
color: red;
background: blue;
font-size: 15px;
}
// Ok
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}
Keep your rules as simple as possible
Based on the above rules, you can further merge duplicate rules in different classes.
code show as below:
// bad
.someclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 16px;
}
.otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 8px;
}
// Ok
.someclass, .otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
}
.someclass {
font-size: 16px;
}
.otherclass {
font-size: 8px;
}
Avoid ambiguous naming conventions
It is best to use semantic names. A good CSS class name should describe what it is rather than what it looks like.
10. Avoid!
In fact, you should be able to use other quality selectors as well.
Eleven, follow a standard declaration order
Although there are some common ways to arrange the order of CSS properties, here is a popular way I follow.
code show as below:
.someclass {
/ * Positioning * /
/ * Display & Box Model * /
/ * Background and typography styles * /
/ * Transitions * /
/ * Other * /
}
Twelve organized code formats
The readability and maintainability of the code are directly proportional. Here is the formatting method I followed.
code show as below:
// bad
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}
// Ok
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}
// good practice
.someclass {
background-image:
linear-gradient (# 000, #ccc),
linear-gradient (#ccc, #ddd);
box-shadow:
2px 2px 2px # 000,
1px 4px 1px 1px #ddd inset;
}
Obviously, only a few rules are described here, which are the rules that I try to follow in my own CSS in the interests of more efficiency and maintainability. If you want to read more, I recommend reading MDN's Guide to Writing Efficient CSS and Google's Optimized Browser Rendering

Yichang Lizhi Network Technology Co., Ltd.

Provide high-end corporate website construction services for enterprises

Phone: 15171869989

Ranch
Article Information
About Lizhi Network
our case
service support
contact us

15171869989

Lizhi Network Service Hotline

Consulting Tel: 15171869989

鄂ICP备09002921号 Copyright © 2009-2019 gszc114.cn Lizhi Network Technology Co., Ltd. All rights reserved. ICP 09009021 Website security detection platform