CSS
maintainable, modular
Efficient
How many of you know CSS?
How can I make my CSS more efficient?
Were going to look at four key areas
efficient css maintainable css modular css hack-free css
Writing efficient CSS
Use external style sheets instead of inline or header styles.
Not good::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>
Not good::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>
Good::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>
Use link rather than @import for IE & NN4
Not good::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css");</style> </style> </head> <body> ... </body> </html>
Good::
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>
Use inheritance
Inefficient::
p { font-family: arial, helvetica, sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
Efficient::
body { font-family: arial, helvetica, sans-serif; }
body { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
Use multiple selectors
Inefficient::
h1 h2 h3 h4
{ { { {
color: color: color: color:
#236799; #236799; #236799; #236799;
} } } }
Efficient::
h1, h2, h3, h4 { color: #236799; }
Use multiple declarations
Inefficient::
p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; }
Efficient::
p { margin: 0 0 1em; background: #ddd; color: #666; }
Use shorthand properties
Inefficient::
body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;
Efficient::
body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }
Avoid !important
Desperate::
#news { background: #ddd !important; }
Understanding specificity::
#container #news { background: #ddd; } body #container #news { background: #ddd; }
So, how can you make your CSS easier to understand for people who maintain your website?
Writing maintainable CSS
Place a time stamp, author and notation at top of CSS files.
/* --------------------------------Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------*/
Include global color notation
/* --------------------------------COLORS Body background: #def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------*/
Use meaningful names for IDs & classes
Not good::
.green-box { ... } #big-text { ... }
Better::
.pullquote {... } #introduction {... }
Group related rules
#header #header #header #header #header
{ ... } h1 { ... } h1 img { ... } form { ... } a#skip { ... } { ... } ul { ... } ul li { ... } ul li a { ... } ul li a:hover { ... }
#navigation #navigation #navigation #navigation #navigation #content #content #content #content #content
{ ... } h2 { ... } p { ... } ul { ... } ul li { ... }
Add clear comments to your CSS files
/* --------------------------------header styles --------------------------------*/ #header #header #header #header { ... } h1 { ... } h1 img { ... } form { ... }
/* --------------------------------navigation styles --------------------------------*/ #navigation { ... }
OK, how can you manage your CSS across an entire site?
Modular CSS
An example: Your HTML pages are linking to a master CSS file
HTML files Master CSS file
Step 1 Separate into individual files
container.css HTML files
header.css
content.css
Why separate CSS files? Its easier to find rules. You can also serve specific CSS files to pages.
Step 2 Add a bridging CSS file
HTML files
Bridging CSS file
Why add a bridging file? You can add or remove files as needed without changing the HTML.
Step 3 Link to bridging file
HTML files
Bridging CSS file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css media="screen, projection"> </head> <body> ... </body> </html>
Why double media type? NN4 will not see bridging file and will therefore not crash!
Step 4 Import CSS into bridging file
HTML files Bridging CSS file
@import header.css; @import content.css; @import footer.css;
How do @imports work? This will imports all rules from one file into the other. @import cannot be read by older browsers.
Recap?
HTML files
Bridging CSS file
This concept is ideal for large sites.
header
nav Home bridge1 footer
home
header
nav Section 1 bridge2 footer
Section 1
header
nav Section 2 bridge3 footer
Section 2
Hack-free CSS
One of our biggest challenges is dealing with buggy browsers such as IE.
Many people solve the problem by using hacks.
The problem is that IE has improved its CSS support. Hacks may come back to bite!
So how do you solve the problem?
We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments.
How do conditional comments work?
Step 1: Create a new CSS file for IE rules only.
header
nav Home bridge1 footer
home
IE
Step 2: Add a conditional comment to the head of your HTML file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link href="css/import1.css" rel="stylesheet" <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> </head> <body> ... </body> </html>
Only the relevant version of IE will sees this new style sheet. All other browsers will ignore it completely.
header
nav Home bridge1 footer
home
IE
Normal browsers see:
header
nav Home bridge1 footer
home
IE
Relevant version of IE sees:
header
nav Home bridge1 footer
home
IE
For example, while most browsers add padding to the width of a container, IE5 will not. This these cases, IE5 will display a narrower container.
main.css (seen by all browsers including IE5)::
#container { width: 600px; padding: 100px; }
ie5.css (seen by IE5 only)::
#container { width: 800px; }
Why are conditional comments a good solution?
1. No hacks Specific CSS rules are simply rewritten in new style sheet.
2. Separate file Work-around CSS kept out of main CSS and can be turned off easily at a later date.
3. Targeted You can target specific versions of IEs
<!--[if <!--[if <!--[if <!--[if <!--[if <!--[if <!--[if
IE]> IE 5]> IE 6]> lt IE 6]> lte IE 6]> gt IE 6]> gte IE 6]>
efficient css maintainable css modular css hack-free css
Questions?
