CSS Best practice
maxdesign
7,370 views
30 slides
Jul 06, 2010
Slide 1 of 30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
About This Presentation
A quick presentation on some tips for writing better CSS.
Slide Content
CSS
BEST PRACTICE
BEST PRACTICE
Best practice
“Best practice” is a very loose
and often poorly defined term.
and often poorly defined term.
“Best practice” often comes down
to personal opinion.
to personal opinion.
“Best practice” can depend on the
team environment you are
working in.
team environment you are
working in.
“Best practice” may also depend
on the applications you have to
work with.
on the applications you have to
work with.
Your personal “best practices”
may change radically over time!
may change radically over time!
With that in mind, here are some
tips that may help you when
setting up CSS files in the future.
tips that may help you when
setting up CSS files in the future.
Applying CSS
1. Avoid using inline styles as
they are hard to maintain and
increase file size.
<body>
<h2 style=“color: red;”>
!Heading here
</h2>
Avoid
they are hard to maintain and
increase file size.
<body>
<h2 style=“color: red;”>
!Heading here
</h2>
Avoid
2. Avoid using header styles as
they are also hard to maintain
and increase file size.
<style>
p { color: red; }
</style>
Avoid
they are also hard to maintain
and increase file size.
<style>
p { color: red; }
</style>
Avoid
3. Avoid using @import within the
HTML as this will slow down IE
browsers.
<style>
@import "a.css";
</style>
Avoid
HTML as this will slow down IE
browsers.
<style>
@import "a.css";
</style>
Avoid
4. Avoid using multiple CSS
files, or combine all CSS files
before final production.
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grids.css">
<link rel="stylesheet" href="text.css">
<link rel="stylesheet" href="modules.css">
<link rel="stylesheet" href="colors.css">
Avoid
files, or combine all CSS files
before final production.
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="grids.css">
<link rel="stylesheet" href="text.css">
<link rel="stylesheet" href="modules.css">
<link rel="stylesheet" href="colors.css">
Avoid
Writing CSS rules
5. Use multiple declarations
where possible
p
{
! margin: 0 0 1.5em;
!background: green;
}
where possible
p
{
! margin: 0 0 1.5em;
!background: green;
}
6. Use multiple selectors
where possible
h1, h2, h3, h4, h5
{
!color: #666;
!margin: 0 0 .5em;
}
where possible
h1, h2, h3, h4, h5
{
!color: #666;
!margin: 0 0 .5em;
}
7. Use shorthand properties
where possible
body
{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
body { margin: 20px 10px; }
Avoid
Preferred
where possible
body
{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
body { margin: 20px 10px; }
Avoid
Preferred
8. Avoid !important as it is often
unnecessary - especially when
you understand the cascade.
p
{
!margin: 0 !important;
}
Avoid
unnecessary - especially when
you understand the cascade.
p
{
!margin: 0 !important;
}
Avoid
9. Avoid complex selectors
(taxing for browsers). Try to be
only as specific as needed.
#navigation ul li a { margin: 0; }
#navigation a { margin: 0; }
Avoid
Preferred
(taxing for browsers). Try to be
only as specific as needed.
#navigation ul li a { margin: 0; }
#navigation a { margin: 0; }
Avoid
Preferred
10. Avoid universal selectors.
.nav * { margin: 0; }
Avoid
.nav * { margin: 0; }
Avoid
11. Avoid qualifying selectors as
this is often unnecessary.
div.nav { }
.nav { }
Avoid
Preferred
this is often unnecessary.
div.nav { }
.nav { }
Avoid
Preferred
12. Avoid IE-proprietary filters
as they slow page performance.
filter:Alpha(Opacity=40);
-ms-filter: "Alpha(Opacity=40)";
Avoid
as they slow page performance.
filter:Alpha(Opacity=40);
-ms-filter: "Alpha(Opacity=40)";
Avoid
13. Avoid IDs. Where possible
use classes instead.
#header { ... }
.header { ... }
Avoid
Preferred
use classes instead.
#header { ... }
.header { ... }
Avoid
Preferred
14. Try not to use too many
font-size declarations.
h1 { font-size: 200%; }
.nav { font-size: 80%; }
.widget { font-size: 70%; }
.intro { font-size: 110%; }
.sidebar { font-size: 85%; }
Avoid
font-size declarations.
h1 { font-size: 200%; }
.nav { font-size: 80%; }
.widget { font-size: 70%; }
.intro { font-size: 110%; }
.sidebar { font-size: 85%; }
Avoid
Optimisation
15. Some people like to use a
CSS minifier to reduce your
overall CSS file size:
http://refresh-sf.com/yui/
CSS minifier to reduce your
overall CSS file size:
http://refresh-sf.com/yui/
16. Optimise images as much as
possible
possible
17. Where possible, combine
images into sprites.
images into sprites.
18. If possible, use CSS3 rules
instead of images to reduce
server requests and page size.
p { background: url(round-corners.png); }
p { border-radius: 10px; }
Avoid
Preferred
instead of images to reduce
server requests and page size.
p { background: url(round-corners.png); }
p { border-radius: 10px; }
Avoid
Preferred
Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 7,370
- Slides 30
- Favorites 25
- Age 5628 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
27 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
32 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
25 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
29 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
25 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
25 views