Modular CSS

Modular CSS

Creating flexible, hack-free and browser-stable CSS

Russ Weakley, Max Design

Anyone here build websites ?

OK… let’s assume you’re building a new site

and… let’s assume you’ve done all the right things…

so… your markup is valid

What does this mean? You’ve checked your web documents against a formal standard).

your markup is semantic

What does this mean? You have used appropriate HTML elements to give your content meaning.

your markup is accessible

What does this mean? Your site can be navigated & read by everyone, regardless of disability, location, experience or technology.

your markup is separated

What does this mean? You’ve removed behaviour and presentation from the markup.

and of course, your site fails gracefully

What does this mean? Your site fails so that it continues to operate for lower end users.

Basically, you’re feeling good !

however…

You’re about to face some horrid problems

Mainly to do with browsers and bugs

So, who are the main offenders ?

Offender 1 Windows Internet Explorer 5, 5.5 and 6

Offender 2 Macintosh Internet Explorer 5

Offender 3 Old browsers like Internet Explorer 4 and Netscape 4

on top of that…

You have to make some important decisions

Will you use hacks to overcome these browser bugs?

Will your CSS be maintainable into the future?

Will you be able to manage your CSS across a growing site?

is there a solution?

The solution may be modular CSS

what is it?

A system for managing your CSS

… developed over time

… after lots of tears

how does it work?

Step 1 Build your HTML HTML file

Step 2 Build your CSS HTML file Master CSS file

/* container styles */ #container { } /* header styles */ #header { } #header h1 { } /* content styles */ #content { } #content h2 { } /* footer styles */ #footer { } #footer p { } Master CSS file

Step 3 Separate your CSS HTML file container.css header.css content.css

#container { } #header { } #header h1 { } #content { } #content h2 { } #footer { } #footer p { } New CSS files container styles header styles content styles footer styles

Question Why separate CSS files? • Easier to find rules • More than one developer at a time • Files can be turned on/off as needed

Step 4 Add a bridging CSS file HTML file Bridging CSS file

Question Why add a bridging file? • One link to all CSS files in HTML • Change CSS without changing HTML • Add or remove files as needed

Step 5 Link to bridging file HTML file Bridging CSS file

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection"> </head> <body> …

Question Why double media type? • The bridging file will use @import • NN4 crashes on @import • NN4 ignores multiple media types • NN4 will not see bridging file

Netscape 4 No CSS for you! HTML file Bridging CSS file NN4

Step 6 Import CSS HTML file Bridging CSS file

@import "container.css"; @import "header.css"; @import "content.css"; @import "footer.css"; Bridging CSS file

Question How do @imports work? • Imports all rules from one file into other • Exactly as if written in other file • Order and placement are important • Cannot be read by older browsers

Old browsers No CSS for you either! HTML file Bridging CSS file NN4 IE4 IE3

mac/ie5

Step 7 - option a Hide rules from Mac/IE HTML file Bridging CSS file

@import "container.css"; @import "header.css"; @import "content.css"; @import "footer.css"; @import 'hide-from-mac-ie5.css'; Bridging CSS file

Question How does this work? • Place specific rules in a separate file • @import using single quotes • Mac/IE will ignore single quotes • Mac/IE will ignore chosen rules

Step 7 - option b Hide all from Mac/IE HTML file Bridging CSS file

@import ‘ container.css ’ ; @import ‘ header.css ’ ; @import ‘ content.css ’ ; @import ‘ footer.css ’ ; Bridging CSS file

win/ie

Hacking hacks can bite • hacks and later versions of browser • hacks sitting inside CSS files • hacks may become unnecessary

A better solution Conditional comments? • No hacks scattered through CSS files • Can be turned on or off • Can deal with different versions of IE • Recommended by the IE team

Step 8 Dealing with Win/IE HTML file Bridging CSS file new file

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">  </head>

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">  </head>

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">  </head>

but what about print?

Step 9 - option a Simple print CSS HTML file Bridging CSS file Print CSS

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">  <link rel="stylesheet" href=”print.css" type="text/css” media=”print"> </head>

/* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { } Print CSS file

Step 9 - option b Advanced print CSS HTML file Bridging CSS file

HTML file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Modular CSS</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection">  <link rel="stylesheet" href=”print.css" type="text/css” media=”print"> </head>

@import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’; /* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { } Bridging CSS file

a recap?

1. Build you HTML 2. Build your CSS 3. Separate the CSS 4. Add a bridging file 5. Link from HTML to bridging file 6. Import CSS into bridging file 7. Hide from Mac/IE as needed 8. Hide from Win/IE as needed 9. Add print CSS

downsides

No perfect solution • Still involves dancing around browsers • Uses conditional comments • May be overly complex for tiny sites

upsides

Good points • modular • flexible • maintainable • browser-specific • hack free (well… sorta…)

questions or abuse?