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
Master CSS file
/* container styles */ #container { } /* header styles */ #header { } #header h1 { }
/* content styles */ #content { } #content h2 { } /* footer styles */ #footer { } #footer p { }
Step 3 Separate your CSS
container.css
HTML file
header.css
content.css
New CSS files
#container { } #header { } #header h1 { }
#content { } #content h2 { } #footer { } #footer p { }
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
Modular CSS …
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!
NN4
HTML file
Bridging CSS file
Step 6 Import CSS
HTML file
Bridging CSS file
Bridging CSS file
@import "container.css"; @import "header.css"; @import "content.css"; @import "footer.css";
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!
NN4
IE4 IE3 Bridging CSS file
HTML file
mac/ie5
Step 7 - option a Hide rules from Mac/IE
HTML file
Bridging CSS file
Bridging CSS file
@import "container.css"; @import "header.css"; @import "content.css"; @import "footer.css"; @import 'hide-from-mac-ie5.css';
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
Bridging CSS file
@import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’;
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
Modular CSS
HTML file
Modular CSS
HTML file
Modular CSS
but what about print?
Step 9 - option a Simple print CSS
HTML file Bridging CSS file
Print CSS
HTML file
Modular CSS
Print CSS file
/* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { }
Step 9 - option b Advanced print CSS
HTML file Bridging CSS file
HTML file
Modular CSS
Bridging CSS file
@import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’;
/* print styles */ #container { } #header { } #header h1 { } #content { } #content h2 { }
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?