efficient, maintainable css
Post on 28-Jan-2015
132 Views
Preview:
DESCRIPTION
TRANSCRIPT
CSSefficientmaintainable, modular
Here are some quick tips for creating efficient,
maintainable CSS.
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
2. Avoid using header styles as 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
4. Avoid using multiple CSS files, or use a script to combine
all CSS files into one.
<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;}
6. Use multiple selectors 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
8. Avoid !important as it is often unnecessary.
p { margin: 0 !important; }
Avoid
9. Avoid complex selectors. Try to be only as specific as
needed.
.nav ul li a { margin: 0; }
.nav a { margin: 0; }
Avoid
Preferred
10. Avoid universal selectors due to performance issues.
.nav * { margin: 0; }
Avoid
11. Avoid qualifying selectors as 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
13. Avoid IDs. Where possible, use classes instead.
#header { ... }
.header { ... }
Avoid
Preferred
14. Try not to use 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
Optimisation
15. Use a CSS minifier to reduce your overall CSS file
size:
http://refresh-sf.com/yui/
16. Optimise images as much as possible
17. Where possible, combine images into sprites.
http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
18. Where possible, use CSS3 instead of images to reduce
server requests and page size.
p { background: url(round-corners.png); }
p { border-radius: 10px; }
Avoid
Preferred
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley
top related