CSS ARCHITECTURE

Standards and Best Practices

“CSS starts out being a pain for everyone. Don't worry. You're not stupid, CSS is.” - John Manoogian

Reasons for this

Common issues throughout the sites Knowledge sharing Advice on overcoming problems

Multiple CSS files create confusionPeterson’s homepage

Combine CSS files

One master CSS file for common elements

One project level CSS file for project specific styles

One CSS file for print specific

Other CSS filesOne CSS file for each cobrand One CSS file for IE specific styles

Inline Styles and Internal Stylesheets<ul> <li> <img src="/images/landing/yahoo_hotjobs.jpg" style="width: 150px; height: 25px; border: 0px;" alt="Yahoo Hotjobs" /> </li> <li> <img src="/images/landing/wsj_logo.jpg" style="width: 150px; height: 25px; border: 0px;" alt="Wall Street Journal" /> </li> <li> <img src="/images/landing/air_force_logo.jpg" style="width: 150px; height: 25px; border: 0px;" alt="U.S. Air Force" /> </li> </ul>

Inline Styles and Internal StylesheetsHTML<ul> <li> <img src="/images/landing/yahoo_hotjobs.jpg“ class=“logo” alt="Yahoo Hotjobs" /> </li> <li> <img src="/images/landing/wsj_logo.jpg" class=“logo” alt="Wall Street Journal" /> </li> <li> <img src="/images/landing/air_force_logo.jpg" class=“logo” alt="U.S. Air Force" /> </li> </ul>

CSSimg {border:0;}.logo {width:150px;Height:25px;}

HTML Structure<div id="header"> this is the header</div><div id=”navbar”> main navigation goes here</div><div id=”menu”> list of items</div><div id="main-content"> the main content will go here</div><div id="sidebar"> this is the sidebar</div><div id="footer"> this is the footer</div>

Naming Conventions

Be consistent name your elements what they are, not

what they do (semantic vs. presentational)

GOOD:.featured-link

BAD:.blue-link-left

Hacks* html .class {width:150px;}

Hacks* html .class {width:150px;}

THIS DOESN’T WORK!

Hacks<!--[if lte IE 7]> <style type="text/css"> .class {width:150px;} </style><![endif]-->

<!--[if IE]> <link rel="stylesheet" href=“ie.css" type="text/css“ /><![endif]-->

Hacks

Can I code it in a way that doesn’t require any specific targeting in the first place?

Can I instead use a conditional comment?

Tables aren’t the enemy There are many places where using tables is entirely appropriate

Tables aren’t the enemy

Tables have their place, but not for layout

Main Navigation HTML (yes, that’s all there is to it!)

<!-- main nav --> <ul id="mainnav"> <li><a id="home" href="/" class="mainnavCurrent">Home</a></li> <li><a id="prodserv" href="/ps/products-services-home.aspx">Products &amp; Services</a></li> <li><a id="partnerships" href="/partnerships/partnerships-home.aspx">Partnerships</a></li> <li><a id="company" href="/company/about.aspx">Our Company</a></li> <li><a id="contact" href="/contact.aspx">Contact Us</a></li> </ul> <!-- /main nav -->

Main Navigation CSSThe heavy lifting

Selectors

You don’t need to add a class to every elementBadHTML<div id=“main”> <p class=“paragraph”>Content</p> <p class=“paragraph”>Content 2</p></div>

CSS.paragraph { color:#F00;}

GoodHTML<div id=“main”> <p>Content</p> <p>Content 2</p></div>

CSS#main p { color:#F00;}

SelectorsHTML<ul> <li> <img src="/images/landing/yahoo_hotjobs.jpg“ class=“logo” alt="Yahoo Hotjobs" /> </li> <li> <img src="/images/landing/wsj_logo.jpg" class=“logo” alt="Wall Street Journal" /> </li> <li> <img src="/images/landing/air_force_logo.jpg" class=“logo” alt="U.S. Air Force" /> </li> </ul>

CSSimg {border:0;}.logo {width:150px;Height:25px;}

SelectorsHTML<ul class=“logo”> <li> <img src="/images/landing/yahoo_hotjobs.jpg“ alt="Yahoo Hotjobs" /> </li> <li> <img src="/images/landing/wsj_logo.jpg” alt="Wall Street Journal" /> </li> <li> <img src="/images/landing/air_force_logo.jpg” alt="U.S. Air Force" /> </li> </ul>

CSSimg {border:0;}

.logo li img {width:150px;Height:25px;}

Don’t Repeat Yourself

Combine styles where possible<h1>Head</h1><h2>sub head</h2>

CSSh1 {font-size:18px;color:blue;}

h2 {font-size:18px;color:blue;}

<h1>Head</h1><h2>sub head</h2>

CSSh1, h2 {font-size:18px;color:blue;}

Don’t Repeat Yourself

Use shorthand wherever possible.class {margin-top:10px;margin-right:0;margin-bottom:15px;margin-left:5px;color:#990000;}

.class-other {font-weight: bold;font-style: italic;font-variant: small-caps;font-size: 12px;line-height: 14px;font-family: verdana,sans-serif;}

.class {margin: 10px 0 15px 5px;color:#900;}

.class-other {font: bold italic small-caps 12px/14px verdana,sans-serif;}

Commenting

Color/Layout glossary Flag different sections

Validation

Not just for HTML, but for CSS too Ensures your code is error free and

interpreted in the right way for browsers Search engines

Floats

Wrapping content around an element

Horizontally, not vertically

To stop content from wrapping, you must clear the floatCSS.clear {clear:both;}

HTML<div class=“clear”></div>

DON’T PANIC