Efficient, maintainable CSS

CSS Efficient maintainable, modular

How many of you know CSS ?

How can I make my CSS more efficient ? “ ”

We’re going to look at four key areas

efficient css maintainable css modular css hack-free css

Writing efficient CSS

1 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= " co lor: 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>

2 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 3

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; }

4 Use multiple selectors

Inefficient: :

h1 { color: #236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }

Efficient: :

h1, h2, h3, h4 { color: #236799; }

5 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; }

6 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; }

7 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. 1

/* --------------------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */

Include global color notation 2

/* --------------------------------- 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 3

Not good: :

.green-box { ... } #big-text { ... }

Better: :

.pullquote {... } #introduction {... }

Group related rules 4

#header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }

Add clear comments to your CSS files 5

/* --------------------------------- header styles --------------------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header 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 HTML files container.css header.css content.css

Why separate CSS files? It’s 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.

HTML files Bridging CSS file Recap?

This concept is ideal for large sites.

Home bridge1 header nav footer home

Section 1 bridge2 header nav footer Section 1

Section 2 bridge3 header nav 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 it’s CSS support. Hacks may come back to bite !

So how do you solve the problem ?

“ W e 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.

Home bridge1 header nav 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"  </head> <body> ... </body> </html>

Only the relevant version of IE will sees this new style sheet. All other browsers will ignore it completely.

Normal browsers see:

Relevant version of IE sees:

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 IE’s

<!-- [if IE] > <!--[if IE 5]> <!-- [if IE 6] > <!-- [if lt IE 6] > <!-- [if lte IE 6] > <!-- [if gt IE 6] > <!-- [if gte IE 6] >

efficient css maintainable css modular css hack-free css

Questions?

Efficient, maintainable CSS

3 comments

Notes on slide 1

29 Favorites & 1 Event