Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
4. 1. Avoid using inline styles as
they are hard to maintain and
increase file size.
Avoid
<body>
<h2 style=“color: red;”>
! Heading here
</h2>
5. 2. Avoid using header styles as
they are also hard to maintain
and increase file size.
Avoid
<style>
p { color: red; }
</style>
6. 3. Avoid using @import within
the HTML as this will slow down
IE browsers.
Avoid
<style>
@import "a.css";
</style>
7. 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
22. 17. Where possible, combine
images into sprites.
http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
23. 18. Where possible, use CSS3
instead of images to reduce
server requests and page size.
Avoid
p { background: url(round-corners.png); }
p { border-radius: 10px; }
Preferred